上一個

下一個

練習 - 建立您的後援路由

已完成

現在可以開始建立後援路由，讓您的使用者可以順利瀏覽到您的應用程式。

提取最新的程式碼

Azure 靜態 Web 應用程式會將 GitHub Actions 工作流程檔案新增到您在上一個練習中選取的分支。 首先，您要從 Git 提取您的程式碼，以取得此檔案。

依照下列步驟，從 Git 提取您的程式碼變更：

1. 在 Visual Studio 中開啟 ShoppingList 方案。

2. 從 GitHub 提取最新的變更。

   

您現在可以在 [Windows 檔案總管] 中的 .github/workflows 資料夾內，查看您的工作流程檔案 (該檔案並非 Visual Studio 解決方案的一部分)。

建立路由規則

發佈您的應用程式之前，您要建立包含後援路由的路由規則。

建立 staticwebapp.config.json 檔案

如果您的專案中還沒有 staticwebapp.config.json 檔案，您可以依照下列步驟建立這個檔案：

1. 在 Visual Studio 中，以滑鼠右鍵按一下 Client 專案內的 [wwwroot] 資料夾。

2. 選取 [新增] > [新項目]。

3. 從可用的範本中選取 [JSON 檔案]，將其命名為 staticwebapp.config.json，然後按下 Enter 鍵。

當 staticwebapp.config.json 檔案建立後，更新其內容以加入以下的後援路由：

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

將您的變更推送到 Git

現在，認可您所做的變更，並將其儲存至您本機的 Git 存放庫。 接下來，將這些變更推送至 GitHub。

試用後援路由

GitHub Actions 工作流程會建置並部署您的應用程式。

在瀏覽器中移至您的存放庫，並監看 GitHub Actions 的進度。 依照以下步驟來檢視進度：

1. 選取 [動作] 功能表。

2. 在 [工作流程] 功能表下方，選取 [Azure Static Web Apps 持續整合與持續傳遞] 工作流程項目。

3. 選取右側動作執行中的最新 (最上方) 連結。

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

當 GitHub Action 建置並發佈您的 Web 應用程式和 API 時，您可以查看其進度。

重新部署應用程式之後，即可瀏覽至該應用程式。 請注意，URL 會顯示 /products。 現在，按下 F5 重新整理瀏覽器，以測試您的後援路由。 您的應用程式應能藉助您路由規則中的後援路由順利重新載入！

繼續