規劃您的 Azure 靜態 Web 應用程式

已完成

您的最終目標是在 Azure 中裝載應用程式。 Azure 靜態 Web 應用程式會負責為您佈建所有必要的 Azure 資源。

不過,您需要先進行一些變更來建置您的應用程式,然後才能裝載該應用程式。 那些變更可以透過對存放庫的認可或提取要求來進行。 Azure 靜態 Web 應用程式的主要功能之一,是設定 GitHub Actions 工作流程來建置並發佈應用程式。

當您建立 Azure 靜態 Web 應用程式資源時,其會建立 GitHub Actions 工作流程。 此工作流程會立即觸發,且負責建置並發佈您的應用程式。 每當您對存放庫中監看的分支進行變更時,也會觸發此工作流程。

Azure 靜態 Web 應用程式

部署 Web 應用程式有兩個自動化層面。 第一個會佈建構成應用程式的底層 Azure 資源。 第二個為 GitHub Actions 工作流程,其會建置並發佈應用程式。

當您使用 Azure 靜態 Web 應用程式將應用程式發佈到 Web 時,即可快速裝載您的 Web 應用程式和可調整規模的 API。 您也會取得 GitHub Actions 所提供的統一建置和部署工作流程。

將 Static Web Apps 執行個體連線到 GitHub

Azure 靜態 Web 應用程式是設計來裝載原始程式碼位於 GitHub 的應用程式。 當您建立 Static Web Apps 執行個體時,您要登入 GitHub,並指定包含您應用程式程式碼的存放庫。

您也需要指定存放庫中的三個資料夾路徑,以便自動建置及部署您的應用程式:

Location 位置範例 描述 必要
應用程式位置 用戶端 您 Web 應用程式的原始程式碼位置 Yes
輸出位置 wwwroot 應用程式組建成品的位置 No
API 位置 API API 的原始程式碼位置 No

輸出位置是應用程式發佈目錄的相對路徑。 例如,假設我們在 Client 中的應用程式會將其建置的資產輸出到 bin/<build profile>/<framework>/publish/wwwroot 資料夾。 在此案例中,您只需要針對此位置指定 wwwroot,因為發佈系統會負責處理剩餘的前置詞。

使用 GitHub Actions 從原始程式碼到靜態資產

您的 GitHub 存放庫包含原始程式碼 (而非靜態資產),因此必須先建置之後才能發佈。

當您建立靜態 Web 應用程式執行個體時,Azure 會在您的存放庫中建立 GitHub Actions 工作流程。 每次當您推送變更或針對發佈來源的分支建立提取要求時,此工作流程即會建立應用程式。 此程序會將原始程式碼轉換成 Azure 處理的靜態資產。 完成建置之後,動作會部署資產。

GitHub Action 會新增到您存放庫的 .github/workflows 資料夾中。 您可以視需要檢閱或修改此檔案。 您在建立資源時輸入的設定會儲存於 GitHub Action 的檔案中。

透過 Azure Functions 整合的 API

如果您的應用程式需要 API,可以將其實作為存放庫中的 Azure Functions 專案,然後您的 Static Web Apps 執行個體就會自動部署和裝載 API。 建置及部署應用程式的 GitHub Actions 工作流程,會使用您在 [API 位置] 中指定的資料夾名稱,在您的存放庫中尋找該 API。

如果您沒有 API,該怎麼辦? 別擔心。 如果 Azure Static Web Apps 在您指定的資料夾中找不到 API,則不會發佈 API,但仍會發佈您的應用程式。

下一步

要將 Web 應用程式發佈到 Azure Static Web Apps 所需準備的事項有哪些? 您只需要 GitHub 存放庫中的應用程式即可。