規劃您的 Azure 靜態 Web 應用程式
- 5 分鐘
您的最終目標是在 Azure 中裝載應用程式。 Azure Static Web Apps 會負責為您佈建所有必要的 Azure 資源。
不過，您需要先進行一些變更來建置您的應用程式，然後才能裝載該應用程式。 那些變更可以透過對存放庫的認可或提取要求來進行。 Azure 靜態 Web 應用程式的主要功能之一，是設定 GitHub Actions 工作流程來建置並發佈應用程式。
當您建立 Azure 靜態 Web 應用程式資源時，其會建立 GitHub Actions 工作流程。 此工作流程會立即觸發，且負責建置並發佈您的應用程式。 每當您對存放庫中監看的分支進行變更時，也會觸發此工作流程。
Azure Static Web Apps
部署 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 存放庫中的應用程式即可。