Konfigurace sestavení pro Azure Static Web Apps

Konfigurace sestavení Azure Static Web Apps využívá GitHub Actions nebo Azure Pipelines. Každá lokalita má konfigurační soubor YAML, který řídí, jak je lokalita sestavená a nasazená. Tento článek vysvětluje strukturu a možnosti souboru.

Následující tabulka uvádí dostupná nastavení konfigurace.

Vlastnost	Popis	Požaduje se
app_location	Tato složka obsahuje zdrojový kód pro front-endovou aplikaci. Hodnota je relativní vzhledem ke kořenovému adresáři úložiště na GitHubu a aktuální pracovní složce v Azure DevOps. Při použití skip_app_build: trues touto hodnotou je výstupní umístění sestavení aplikace.	Ano
api_location	Tato složka, která obsahuje zdrojový kód pro vaši aplikaci API. Hodnota je relativní vzhledem ke kořenovému adresáři úložiště na GitHubu a aktuální pracovní složce v Azure DevOps. Při použití skip_api_build: trues touto hodnotou je výstupní umístění sestavení rozhraní API.	No
output_location	Pokud vaše webová aplikace spustí krok sestavení, je výstupním umístěním složka, ve které se vygenerují veřejné soubory. U většiny projektů output_location je relativní vzhledem k app_location. U projektů .NET je však umístění relativní vzhledem k výstupní složce publikování.	No
app_build_command	Pro aplikace Node.js můžete definovat vlastní příkaz pro sestavení aplikace statického obsahu. Pokud chcete například nakonfigurovat produkční sestavení pro aplikaci Angular, vytvořte skript npm s názvem build-prod pro spuštění ng build --prod a zadejte npm run build-prod jako vlastní příkaz. Pokud je tento pracovní postup prázdný, pokusí se spustit npm run build příkazy nebo npm run build:azure příkazy.	No
api_build_command	Pro aplikace Node.js můžete definovat vlastní příkaz pro sestavení aplikace rozhraní API služby Azure Functions.	No
skip_app_build	Nastavte hodnotu tak, aby true se přeskočila sestavení front-endové aplikace.	No
skip_api_build	Nastavte hodnotu tak, aby true se přeskočí vytváření funkcí rozhraní API.	No
cwd (jenom Azure Pipelines)	Absolutní cesta k pracovní složce Výchozí hodnota $(System.DefaultWorkingDirectory)je .	No
build_timeout_in_minutes	Nastavte tuto hodnotu tak, aby se přizpůsobil časový limit sestavení. Výchozí hodnota 15je .	No

Pomocí těchto nastavení můžete nastavit GitHub Actions nebo Azure Pipelines tak, aby spouštěly kontinuální integraci a průběžné doručování (CI/CD) pro vaši statickou webovou aplikaci.

Název a umístění souboru

GitHub Actions

Konfigurační soubor vygeneruje GitHub a uloží se do složky .github/workflows s názvem v následujícím formátu: azure-static-web-apps-<RANDOM_NAME>.yml

Azure Pipelines

Ve výchozím nastavení je konfigurační soubor uložen v kořenovém adresáři úložiště s názvem azure-pipelines.yml.

Konfigurace sestavení

Následující ukázková konfigurace monitoruje změny úložiště. Když se potvrzení nasdílí do main větve, aplikace se sestaví ze app_location složky a soubory v souboru, které output_location se obsluhují na veřejném webu. Kromě toho je aplikace ve složce api k dispozici v cestě webu api .

GitHub Actions

name: Azure Static Web Apps CI/CD

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

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    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:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations ######
          app_location: "src" # App source code path relative to repository root
          api_location: "api" # Api source code path relative to repository root - optional
          output_location: "public" # Built app content directory, relative to app_location - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

V této konfiguraci:

• Větev main se monitoruje pro potvrzení.
• Pracovní postup GitHub Actions se aktivuje , když je žádost o přijetí změn ve main větvi otevřená, synchronizovaná, znovu otevřená nebo uzavřená.
• Spustí se build_and_deploy_job , když nasdílíte potvrzení nebo otevřete žádost o přijetí změn ve větvi uvedené ve on vlastnosti.
• Odkazuje app_location na src složku, která obsahuje zdrojové soubory webové aplikace. Pokud chcete tuto hodnotu nastavit na kořen úložiště, použijte /.
• Odkazuje api_location na api složku, která obsahuje aplikaci Azure Functions pro koncové body rozhraní API webu. Pokud chcete tuto hodnotu nastavit na kořen úložiště, použijte /.
• Odkazuje output_location na public složku, která obsahuje konečnou verzi zdrojových souborů aplikace. Je to relativní vzhledem k app_location. U projektů .NET je umístění relativní vzhledem k výstupní složce publikování.

Neměňte hodnoty pro repo_token, actiona azure_static_web_apps_api_token protože jsou nastavené pro vás službou Azure Static Web Apps.

Azure Pipelines

trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: 'src' # App source code path relative to cwd
      api_location: 'api' # Api source code path relative to cwd
      output_location: 'public' # Built app content directory relative to app_location - optional
      cwd: '$(System.DefaultWorkingDirectory)/myapp' # Working directory - optional
      azure_static_web_apps_api_token: $(deployment_token)

V této konfiguraci:

• Větev main se monitoruje pro potvrzení.
• Odkazuje app_location na src složku, která obsahuje zdrojové soubory webové aplikace. Tato hodnota je relativní vzhledem k pracovnímu adresáři (cwd). Chcete-li jej nastavit na pracovní adresář, použijte /.
• Odkazuje api_location na api složku, která obsahuje aplikaci Azure Functions pro koncové body rozhraní API webu. Tato hodnota je relativní vzhledem k pracovnímu adresáři (cwd). Chcete-li jej nastavit na pracovní adresář, použijte /.
• Odkazuje output_location na public složku, která obsahuje konečnou verzi zdrojových souborů aplikace. Tato hodnota je relativní k app_location. U projektů .NET je umístění relativní vzhledem k výstupní složce publikování.
• Jedná se cwd o absolutní cestu odkazující na pracovní adresář. Výchozí hodnota je $(System.DefaultWorkingDirectory).
• $(deployment_token) Proměnná odkazuje na vygenerovaný token nasazení Azure DevOps.

Poznámka:

app_locationa api_location musí být relativní k pracovnímu adresáři (cwd) a musí být podadresářem .cwd

Vlastní příkazy sestavení

U aplikací Node.js můžete jemně odstupňovanou kontrolu nad tím, jaké příkazy se spouštějí během procesu sestavení aplikace nebo rozhraní API. Následující příklad ukazuje, jak definovat sestavení s hodnotami pro app_build_command a api_build_command.

Poznámka:

V současné době můžete definovat app_build_command pouze sestavení api_build_command Node.js. Pokud chcete zadat verzi Node.js, použijte engines pole v package.json souboru.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: '/'
  api_location: 'api'
  output_location: 'dist'
  app_build_command: 'npm run build-ui-prod'
  api_build_command: 'npm run build-api-prod'

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  app_build_command: 'npm run build-ui-prod'
  api_build_command: 'npm run build-api-prod'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)

Přeskočit vytváření front-endové aplikace

Pokud potřebujete úplnou kontrolu nad sestavením pro front-endovou aplikaci, můžete obejít automatické sestavení a nasadit aplikaci integrovanou v předchozím kroku.

Pokud chcete přeskočit vytváření front-endové aplikace:

• Nastavte app_location umístění souborů, které chcete nasadit.
• Nastavte skip_app_build na hodnotu true.
• Nastaví output_location se na prázdný řetězec ('').

Poznámka:

Ujistěte se, že jste soubor staticwebapp.config.json zkopírovali i do výstupního adresáře.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src/dist'
  api_location: 'api'
  output_location: ''
  skip_app_build: true

Azure Pipelines

...

inputs:
  app_location: 'src/dist'
  api_location: 'api'
  output_location: '' # Leave this empty
  skip_app_build: true
  azure_static_web_apps_api_token: $(deployment_token)

Přeskočení vytváření rozhraní API

Pokud chcete přeskočit sestavování rozhraní API, můžete obejít automatické sestavení a nasadit rozhraní API vytvořené v předchozím kroku.

Postup pro přeskočení sestavení rozhraní API:

• V souboru staticwebapp.config.json nastavte apiRuntime správný modul runtime a verzi. Seznam podporovaných modulů runtime a verzí najdete v tématu Konfigurace Azure Static Web Apps .

  {
    "platform": {
      "apiRuntime": "node:16"
    }
  }
  

• Nastavte skip_api_build na hodnotu true.
• Nastavte api_location složku obsahující vytvořenou aplikaci API, která se má nasadit. Tato cesta je relativní vzhledem ke kořenovému adresáři úložiště v GitHub Actions a cwd v Azure Pipelines.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: "src" # App source code path relative to repository root
  api_location: "api" # Api source code path relative to repository root - optional
  output_location: "public" # Built app content directory, relative to app_location - optional
  skip_api_build: true

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  skip_api_build: true
  azure_static_web_apps_api_token: $(deployment_token)

Prodloužení časového limitu sestavení

Ve výchozím nastavení jsou buildy aplikací a rozhraní API omezené na 15 minut. Časový limit sestavení můžete prodloužit nastavením build_timeout_in_minutes vlastnosti.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  build_timeout_in_minutes: 30

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  build_timeout_in_minutes: 30
  azure_static_web_apps_api_token: $(deployment_token)

Spuštění pracovního postupu bez tajných kódů nasazení

Někdy potřebujete, aby pracovní postup pokračoval v procesu i v případě, že chybí některé tajné kódy. Nastavte proměnnou SKIP_DEPLOY_ON_MISSING_SECRETS prostředí tak, aby true konfiguroval pracovní postup tak, aby pokračoval bez definovaných tajných kódů.

Pokud je tato funkce povolená, umožňuje pracovnímu postupu pokračovat bez nasazení obsahu webu.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
env:
  SKIP_DEPLOY_ON_MISSING_SECRETS: true

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)
env:
  SKIP_DEPLOY_ON_MISSING_SECRETS: true

Proměnné prostředí

Proměnné prostředí pro sestavení můžete nastavit prostřednictvím env části konfigurace úlohy.

GitHub Actions

...

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
  repo_token: ${{ secrets.GITHUB_TOKEN }}
  action: 'upload'
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
env: # Add environment variables here
  HUGO_VERSION: 0.58.0

Azure Pipelines

...

inputs:
  app_location: 'src'
  api_location: 'api'
  output_location: 'public'
  azure_static_web_apps_api_token: $(deployment_token)
env: # Add environment variables here
  HUGO_VERSION: 0.58.0

Podpora monorepo

Monorepo je úložiště, které obsahuje kód pro více než jednu aplikaci. Ve výchozím nastavení pracovní postup sleduje všechny soubory v úložišti, ale konfiguraci můžete upravit tak, aby cílila na jednu aplikaci.

Pokud chcete soubor pracovního postupu cílit na jednu aplikaci, zadáte cesty v push částech.pull_request

GitHub Actions

Když nastavíte monorepo, každá konfigurace statické aplikace je vymezená jenom na soubory pro jednu aplikaci. Různé soubory pracovního postupu jsou vedle sebe ve složce .github/workflows úložiště.

├── .github
│   └── workflows
│       ├── azure-static-web-apps-purple-pond.yml
│       └── azure-static-web-apps-yellow-shoe.yml
│
├── app1  👉 controlled by: azure-static-web-apps-purple-pond.yml
├── app2  👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
├── api1  👉 controlled by: azure-static-web-apps-purple-pond.yml
├── api2  👉 controlled by: azure-static-web-apps-yellow-shoe.yml
│
└── README.md

Následující příklad ukazuje, jak přidat paths uzel do push oddílů pull_request souboru s názvem azure-static-web-apps-purple-pond.yml.

on:
  push:
    branches:
      - main
    paths:
      - app1/**
      - api1/**
      - .github/workflows/azure-static-web-apps-purple-pond.yml
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
    paths:
      - app1/**
      - api1/**
      - .github/workflows/azure-static-web-apps-purple-pond.yml

V tomto příkladu aktivují nové sestavení pouze změny provedené v následujících souborech:

• Všechny soubory ve složce app1
• Všechny soubory ve složce api1
• Změny souboru pracovního postupu azure-static-web-apps-purple-pond.yml aplikace

Azure Pipelines

Pokud chcete podporovat více než jednu aplikaci v jednom úložišti, vytvořte samostatný soubor pracovního postupu a přidružte ho k různým kanálům Azure Pipelines.

Další kroky

Kontrola žádostí o přijetí změn v předprodukčním prostředí