練習 - 建立 Azure 靜態 Web 應用程式

  • 5 分鐘

在此練習中，您會建立 Azure Static Web Apps 執行個體，其中包括能自動建置並發佈應用程式的 GitHub 動作。

建立靜態 Web 應用程式

既然您已建立 GitHub 存放庫，您可以從 Azure 入口網站建立靜態 Web 應用程式執行個體。

此課程模組使用 Azure 沙箱為您提供免費的暫時 Azure 訂用帳戶，讓您用來完成練習。 繼續之前，請先確定您已在此頁面最上方啟動該沙箱。

  1. 登入 Azure 入口網站，確定您是使用啟動沙箱時所使用的相同帳戶來登入。

  2. 在 Azure [首頁] 頁面的 [Azure 服務] 下，選取 [建立資源]。 [建立資源] 窗格隨即會顯示。

  3. 在 [市集] 的搜尋方塊中，搜尋並選取 [靜態 Web 應用程式]。 [靜態 Web 應用程式] 窗格隨即顯示。

  4. 選取 建立。 [建立靜態 Web 應用程式] 窗格隨即顯示。 設定您的新應用程式，並將其連結至您的 GitHub 存放庫。

  5. 在 [基本] 索引標籤上，為每個設定輸入下列值。

    設定 值
    專案詳細資料
    訂用帳戶 指引訂用帳戶
    資源群組 [沙箱資源群組名稱]
    靜態 Web 應用程式詳細資料
    名稱 為您的應用程式命名。 有效的字元是 a-z (不區分大小寫)、0-9 和 -。
    主控方案
    應用程式的定價層 選取 [免費]
    Azure Functions 和暫存詳細資料
    Azure Functions API 和預備環境的區域 選取距離您最近的區域
    部署詳細資料
    來源 選取 [GitHub]
    GitHub 帳戶 選取 [以 GitHub 登入]。 [授權 Azure Static Web Apps] 窗格隨即顯示。 選取 [授權 Azure-App-Service-Static-Web-Apps]。 輸入您的密碼。
    Organization 選取您建立存放庫所在的組織
    存放庫 my-static-blazor-app
    分行 main
    組建詳細資料
    組建預設 Blazor
    應用程式位置 用戶端
    API 位置 API
    輸出位置 wwwroot

  6. 選取 [檢閱 + 建立]>[建立]。

  7. 完成部署後，選取 [移至資源]。 您的 [靜態 Web 應用程式] 窗格隨即顯示。

檢閱 GitHub Action

在此階段，會在 Azure 中建立您的靜態 Web 應用程式執行個體，但尚未部署您的應用程式。 Azure 在您的存放庫中建立的 GitHub Action 會自動執行，以觸發應用程式的首次建置和部署，但需要幾分鐘的時間才能完成。

藉由選取以下的連結，前往您 GitHub 存放庫的 [動作] 頁面，即可檢查建置與部署動作的狀態：

螢幕擷取畫面，顯示如何瀏覽以查看 GitHub Actions 工作流程的進度。

進入該頁面後：

  1. 選取 [Azure Static Web Apps CI/CD]。

  2. 選取標題為 ci：新增 Azure Static Web Apps 工作流程檔案的認可。

  3. 選取 [建置和部署作業] 連結

您可以從這裡觀察應用程式建置時的進度。

檢視網站

當 GitHub Action 完成建置和發佈 Web 應用程式之後，即可瀏覽以查看執行中的應用程式。

選取 Azure 入口網站的 URL 連結，即可在瀏覽器中瀏覽應用程式。

您的應用程式現已可供全球使用，但其仍會停留於正在載入資料的狀態，這是因為還沒有任何資料或 API。 您將在下一節新增適用於 Web 應用程式的 API。

恭喜！ 您已將第一個應用程式部署到 Azure Static Web Apps！

注意

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

下一步

您的應用程式缺少適用於其購物清單的 API。 接下來，您會探索如何將 Azure Functions API 新增到應用程式，並將其與靜態資產一起發佈到 Azure。