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

5 分鐘

您的最終目標是在 Azure 中裝載應用程式。 Azure Static Web Apps 會負責為您佈建所有必要的 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 的應用程式。當您建立靜態 Web 應用程式執行個體時，您將會登入 GitHub，並指定包含您應用程式程式碼的存放庫。

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

Location	位置範例	描述	必要
應用程式位置	/	您 Web 應用程式的原始程式碼位置	Yes
應用程式組建輸出位置	dist	應用程式組建輸出的位置 (相對於您的應用程式位置)	No
API 位置	api	API 的原始程式碼位置	No

應用程式組建輸出是應用程式建置輸出目錄的相對路徑。例如，假設我們在 my-app 中的應用程式會將其建置的資產輸出到 my-app/dist 資料夾。在此案例中，您可以為此位置指定 dist。

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

您的 GitHub 存放庫包含原始程式碼，因此必須先建置之後才能發佈。

當您建立靜態 Web 應用程式執行個體時，Azure 會在您的存放庫中建立 GitHub Actions 工作流程。每當您針對所選要追蹤的分支提取要求或建立要求時，工作流程都會建置您的應用程式。此建置程序會將原始程式碼轉換成可由 Azure 提供服務的靜態資產。建置完成之後，此動作接著會部署資產。

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

透過 Azure Functions 整合的 API

如果應用程式需要 API，則可將其實作為存放庫中的 Azure Functions 專案。 API 將會自動部署，並由 Static Web Apps 執行個體裝載。建置及部署應用程式的 GitHub Actions 工作流程，會依據您指定的資料夾名稱，在您的存放庫中尋找該 API。

通常，您會將 API 應用程式放在名為 api 或 functions 的資料夾中，但您可隨意命名。

如果您沒有 API，該怎麼辦？別擔心。如果 Azure 靜態 Web 應用程式在您指定的資料夾中找不到 API，其將不會發佈 API，但仍會發佈您的應用程式。

處理後援路由

您會在重新整理頁面時看到 404 錯誤，這是因為瀏覽器會將要求傳送到裝載平台以提供 /products。伺服器上沒有名為產品的頁面可以提供。幸好，您可以藉由建立後援路由，輕鬆解決此問題。後援路由是一種路由，可將所有不相符的頁面要求與伺服器進行比對。

Azure Static Web Apps 支援自訂路由規則，這類規則定義於位於應用程式組建輸出資料夾的選擇性 staticwebapp.config.json 檔案中。

您可以將應用程式設定為使用實作後援路由的規則，如下列範例所示，此範例會使用路徑萬用字元搭配檔案篩選：

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

此規則會指示 Azure Static Web Apps 在找不到資源的要求時提供 index.html，但不包括 exclude 運算式中顯示的影像和 CSS 檔案。

路由檔案位置

根據預設，Azure 靜態 Web 應用程式預期您的 staticwebapp.config.json 檔案位於 output_location 中。如果建置程序會將 staticwebapp.config.json 檔案複製到 output_location，則不需執行任何其他動作。對於大部分的專案而言，output_location 是相對於 app_location 的。

您應用程式的 staticwebapp.config.json 檔案位於資料夾 angular-app/src/assets。

staticwebapp.config.json 檔案位於資料夾 react-app 中。

staticwebapp.config.json 檔案位於資料夾 svelte-app/public 中。

staticwebapp.config.json 檔案位於資料夾 vue-app/public 中。

下一步

那麼，您需要哪些項目，才能將 Web 應用程式發佈到 Azure 靜態 Web 應用程式？您只需要 GitHub 存放庫中的應用程式即可。