練習 - 建立您的後援路由
現在可以開始建立後援路由,讓您的使用者可以順利瀏覽到您的應用程式。
提取最新的程式碼
Azure 靜態 Web 應用程式會將 GitHub Actions 工作流程檔案新增到您在上一個練習中選取的分支。 首先,您要從 Git 提取您的程式碼,以取得此檔案。
依照下列步驟,從 Git 提取您的程式碼變更:
在 Visual Studio 中開啟 ShoppingList 方案。
從 GitHub 提取最新的變更。
您現在可以在 [Windows 檔案總管] 中的 .github/workflows 資料夾內,查看您的工作流程檔案 (該檔案並非 Visual Studio 解決方案的一部分)。
建立路由規則
發佈您的應用程式之前,您要建立包含後援路由的路由規則。
建立 staticwebapp.config.json 檔案
如果您的專案中還沒有 staticwebapp.config.json 檔案,您可以依照下列步驟建立這個檔案:
在 Visual Studio 中,以滑鼠右鍵按一下 Client 專案內的 [wwwroot] 資料夾。
選取 [新增] > [新項目]。
從可用的範本中選取 [JSON 檔案],將其命名為 staticwebapp.config.json,然後按下 Enter 鍵。
當 staticwebapp.config.json 檔案建立後,更新其內容以加入以下的後援路由:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/_framework/*", "/css/*"]
}
}
將您的變更推送到 Git
現在,認可您所做的變更,並將其儲存至您本機的 Git 存放庫。 接下來,將這些變更推送至 GitHub。
試用後援路由
GitHub Actions 工作流程會建置並部署您的應用程式。
在瀏覽器中移至您的存放庫,並監看 GitHub Actions 的進度。 依照以下步驟來檢視進度:
選取 [動作] 功能表。
在 [工作流程] 功能表下方,選取 [Azure Static Web Apps 持續整合與持續傳遞] 工作流程項目。
選取右側動作執行中的最新 (最上方) 連結。
選取 [建置和部署作業] 連結。
當 GitHub Action 建置並發佈您的 Web 應用程式和 API 時,您可以查看其進度。
重新部署應用程式之後,即可瀏覽至該應用程式。 請注意,URL 會顯示 /products。 現在,按下 F5 重新整理瀏覽器,以測試您的後援路由。 您的應用程式應能藉助您路由規則中的後援路由順利重新載入!