在 Azure 靜態網頁應用中建立分支預覽環境

你可以設定網站,將所有變更部署到非生產分支。 此預覽部署會發佈至含有分支名稱的穩定 URL, 舉例來說,假如分支名為 dev,則環境位置存取位置會如下所示:<DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net。 您可以透過靜態 Web 應用程式的 [環境] 索引標籤,在入口網站中刪除分支環境。

Configuration

為了讓 URL 環境變得穩定,請對你的 configuration.yml 檔案做以下修改。

  • 在 GitHub action 的 static-web-apps-deploy 作業或 AzureStaticWebApp 工作中,將 production_branch 輸入設為您的生產分支名稱。 此動作確保你對生產分支的變更會部署到生產環境,而其他分支的變更則部署到預覽環境。
  • 在工作流程設定的觸發陣列中列出你想部署到預覽環境的分支,這樣這些分支的變更也會觸發 GitHub Actions 或 Azure Pipelines 部署。
    • 如果你想追蹤所有分支,可以把這個陣列設成 ** GitHub Actions 或 * Azure Pipelines。

範例

以下範例示範如何啟用分支預覽環境。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
      - dev
      - staging
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    ...
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          ...
          production_branch: "main"

備註

該 ... 表示為了清楚而跳過的代碼。

在此範例中,預覽環境已為 dev 和 staging 分支定義。 每個分支都部署到獨立的預覽環境。

下一步