練習 - 開始使用

  • 7 分鐘

在此練習中，您會建立 Azure 靜態 Web 應用程式實例，包括可自動建置和發佈網站的 GitHub Action。

本模組透過沙盒環境提供所需資源，讓您可以免費、暫時性地存取 Azure 訂閱及完成練習所需的資源。 請務必在此頁面頂端啟用沙箱。 當您完成本課程模組中的練習時，每個單元都取決於您在上一個練習中建立的內容。 基於這個理由，請選取 JavaScript 架構，並將其用於所有後續練習。

建立存放庫

若要開始，請使用 GitHub 範本建立存放庫。 有一系列的存放庫範本可供使用，其中包含在各種前端架構中實作的入門應用程式。

  1. 移至 GitHub 的「從範本建立」頁面 (英文)，以開啟範本存放庫。

  2. 如果系統提示您提供 [Owner] \(擁有者\)，請選取您的其中一個 GitHub 帳戶。

  3. 針對 存放庫名稱，輸入 my-static-web-app-and-api。

  4. 選取 [從範本建立存放庫]。

    當您從範本建立專案時，GitHub 會在背景建置您的存放庫。

在本機執行您的應用程式

現在，您的 GitHub 帳戶中有名為 my-static-web-app-and-api 的 GitHub 存放庫。 接下來，您會複製 GitHub 存放庫，並在本機電腦上執行程式碼。

  1. 在您的電腦上開啟終端機視窗。

    如果您是在 Windows 上，您可以在系統匣搜尋方塊中輸入 cmd 。

  2. 若要將存放庫複製到您的電腦，請將下列程式代碼貼到命令提示字元視窗中。

    請務必將 <YOUR_GITHUB_USERNAME> 取代為您的 GitHub 使用者名稱。

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    備註

    如果您無法複製到命令提示字元終端機，請以滑鼠右鍵按下標題列中的圖示，然後在 [ 屬性 ] 索引標籤中，確認核取 [使用 Ctrl+Shift+C/V] 作為 [複製/貼上 ]。

  3. 切換到您複製的原始程式碼所在的目錄。

    cd my-static-web-app-and-api

  4. 移至您慣用前端架構的目錄。

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. 安裝應用程式依賴項。

    npm install

  6. 請使用下列命令來確保每個相依性的最新版本都已安裝。

    npm audit fix

  7. 執行前端用戶端應用程式。

    npm start

    npm start

    npm run dev

    npm run serve

瀏覽到您的應用程式

產生並編譯應用程式套件組合時，瀏覽器索引標籤會自動開啟以顯示在本機執行的應用程式。

angular 的本機主機為 http://localhost:4200。

Angular Web 應用程式的本機主機螢幕快照。

用於 react 的本機主機為 http://localhost:3000。

React Web 應用程式的本機主機螢幕快照。

svelte 的本機主機為 http://localhost:5000。

Svelte Web 應用程式的本機主機螢幕快照。

Vue 的本機主機為 http://localhost:8080。

Vue Web 應用程式的本機主機螢幕快照。

您的應用程式應該會顯示 [正在載入資料...]，因為還沒有任何資料或 API。 您稍後會在本課程中新增 Web 應用程式的 API。

在終端機中，按 Ctrl+C 停止您的批次作業。

祝賀！ 您已建置應用程式，並在瀏覽器中看到它在本機執行。 接下來，您可以將應用程式發佈至 Azure Static Web Apps。

建立靜態 Web 應用程式

您已建立自己的 GitHub 存放庫。 現在您可以使用適用於 Visual Studio Code 的 Azure Static Web Apps 擴充功能來建立自己的靜態 Web 應用程式。

安裝適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組

  1. 開啟 Visual Studio Code。

  2. 從頂端功能表中，選取 [ 檢視>延伸模組]，然後在搜尋方塊中輸入 Azure Static Web Apps 。

  3. 當延伸模組索引標籤在 Visual Studio Code 中載入時，選取 [安裝]。

開啟應用程式資料夾

  1. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  2. 輸入 檔案：開啟資料夾...。

  3. 選取 my-static-web-app-and-api 資料夾。

  4. 選取 [開啟 ] 以在 Visual Studio Code 中開啟資料夾。

在 Visual Studio Code 中登入 Azure

  1. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  2. 輸入 Azure：登入 並遵循提示進行驗證。

    這很重要

    請務必使用您用來啟用瀏覽器內沙盒的相同帳戶來登入 Azure。 使用相同帳戶可讓指引訂用帳戶可供使用，讓您在本教學課程期間存取免費的 Azure 資源。

選取您的訂用帳戶

  1. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  2. 輸入 Azure：Select Subscriptions，然後清除 [指引訂用帳戶] 以外的所有選取項目。

    顯示已選取指引訂用帳戶的螢幕擷取畫面。

提交變更

當您安裝應用程式相依性時，專案中的某些檔案會在程式中更新。 若要繼續進行，您必須將這些變更提交至存放庫。

  1. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  2. 輸入並選取 [Git: 全部認可]。

  3. 在檔案的頂端輸入initial commit。

  4. 儲存並關閉 Git 提交文件。

    現在不用擔心同步您的變更到伺服器。 當您發佈靜態 Web 應用程式時，更新會複製到 GitHub。

建立靜態 Web 應用程式

建立靜態 Web 應用程式需要目前的 Azure 和 GitHub 已驗證的工作階段。 如果您尚未登入這兩個提供者，擴充功能會提示您在建立程式期間登入。

  1. 選取 F1 以開啟 Visual Studio Code 命令選擇區。

  1. 輸入並選取 [Azure 靜態 Web 應用程式：建立靜態 Web 應用程式...]。

    針對命令選擇區提示的其餘部分，輸入下列值。

    提示 價值觀
    訂閱 選取 禮賓訂閱
    名稱 輸入 my-static-web-app-and-api
    區域 選取距離您最近的區域
    預先設定 選取 [Angular]
    應用程式程式代碼位置 輸入 angular-app
    輸出位置 輸入 dist/angular-app

  1. 輸入並選取 [Azure 靜態 Web 應用程式：建立靜態 Web 應用程式...]。

    針對命令選擇區提示的其餘部分，輸入下列值。

    提示 價值觀
    訂閱 選取 禮賓訂閱
    名稱 輸入 my-static-web-app-and-api
    區域 選取距離您最近的區域
    預先設定 選取 [React]
    應用程式程式代碼位置 輸入 react-app
    輸出位置 輸入 dist

  1. 輸入並選取 [Azure 靜態 Web 應用程式：建立靜態 Web 應用程式...]。

    針對命令選擇區提示的其餘部分，輸入下列值。

    提示 價值觀
    訂閱 選取 禮賓訂閱服務
    名稱 輸入 my-static-web-app-and-api
    區域 選取距離您最近的區域
    預先設定 選擇 Svelte
    應用程式程式代碼位置 輸入 svelte-app
    輸出位置 輸入 public

  1. 輸入並選取 [Azure 靜態 Web 應用程式：建立靜態 Web 應用程式...]。

    針對命令選擇區提示的其餘部分，輸入下列值。

    提示 價值觀
    訂閱 選取 禮賓訂閱服務
    名稱 輸入 my-static-web-app-and-api
    區域 選取距離您最近的區域
    預先設定 選取 [Vue]
    應用程式程式代碼位置 輸入 vue-app
    輸出位置 輸入 dist

備註

此存放庫與您過去可能使用的其他專案不同。 此專案在四個不同的資料夾中包含四個不同的應用程式。 每個資料夾都包含一個以不同 JavaScript 架構建立的應用程式。 一般而言，您的存放庫根目錄中只有一個應用程式，因此是應用程式路徑位置的預設值 / 。 這是 Azure Static Web Apps 如何讓您第一次設定位置的絕佳範例 - 您可以完全掌控應用程式的建置方式。

  1. 建立應用程式之後，Visual Studio Code 中就會顯示確認通知。

    GitHub 中 [開啟動作] 或 [檢視/編輯設定] 彈出視窗的螢幕快照。

    在設定組建時，Visual Studio Code 會向您報告組建狀態。

    顯示生產狀態為等待部署的螢幕擷取畫面。

  2. 您可以展開 [Actions] \(動作\) 功能表，使用 GitHub Actions 來檢視部署的進度。

    顯示如何查看 GitHub Actions 的螢幕快照。

    部署完成後，您即可直接瀏覽至網站。

  3. 若要在瀏覽器中檢視網站，請以滑鼠右鍵按一下 Static Web Apps 延伸模組中的專案，然後選取 [瀏覽網站]。

    顯示如何使用 Visual Studio Code 擴充功能來瀏覽靜態 Web 應用程式的螢幕快照。

    您的應用程式應該會顯示 [正在載入資料...]，因為還沒有任何資料或 API。 您稍後會在此課程模組中為您的 Web 應用程式新增 API。

祝賀！ 您的應用程式已部署至 Azure Static Web Apps！

備註

如果看到網頁指出應用程式尚未建置和部署，請不要擔心。 請嘗試在一分鐘後重新整理瀏覽器。 建立 Azure 靜態 Web 應用程式時，GitHub Action 服務會自動執行。 因此，如果您看到啟動顯示頁面，表示應用程式仍在部署中。

從 GitHub 提取變更

從 GitHub 提取最新的變更，以關閉 Azure Static Web Apps 服務所建立的工作流程檔案。

  1. 按 Ctrl+Shift+P 開啟命令選擇區。

  2. 輸入並選取 [Git:提取]。

  3. 按 Enter 鍵。

後續步驟

接下來，您將瞭解如何使用 Azure Functions 專案建置和執行 API。