Configurazione della compilazione per App Web statiche di Azure

L'azione GitHub genera il file di configurazione e viene archiviato nella cartella .github/workflows , denominata usando il formato seguente: azure-static-web-apps-<RANDOM_NAME>.yml.

Per impostazione predefinita, il file di configurazione viene archiviato nella radice del repository con il nome azure-pipelines.yml.

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)

In questa configurazione:

• Il main ramo viene monitorato per i commit.
• Punta app_location alla src cartella che contiene i file di origine per l'app Web. Questo valore è relativo alla directory di lavoro (cwd). Per impostarlo sulla directory di lavoro, usare /.
• Punta api_location alla api cartella che contiene l'applicazione Funzioni di Azure per gli endpoint API del sito. Questo valore è relativo alla directory di lavoro (cwd). Per impostarlo sulla directory di lavoro, usare /.
• Punta output_location alla public cartella che contiene la versione finale dei file di origine dell'app. Questo valore è relativo a app_location. Per i progetti .NET, il percorso è relativo alla cartella di output.
• cwd è un percorso assoluto che punta alla directory di lavoro. Il valore predefinito è $(System.DefaultWorkingDirectory).
• La $(deployment_token) variabile punta al token di distribuzione di Azure DevOps generato.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
      - dev
  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
    permissions:
       id-token: write
       contents: read
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Install OIDC Client from Core Package
        run: npm install @actions/core@1.6.0 @actions/http-client
      - name: Get Id Token
        uses: actions/github-script@v6
        id: idtoken
        with:
           script: |
               const coredemo = require('@actions/core')
               return await coredemo.getIDToken()
           result-encoding: string
      - 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_GENTLE_WATER }}
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist/angular-basic" # Built app content directory - optional
          production_branch: "dev"
          github_id_token: ${{ steps.idtoken.outputs.result }}
          ###### 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_GENTLE_WATER_030D91C1E }}
          action: "close"

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"

In questa configurazione:

• Il main ramo viene monitorato per i commit.
• Un flusso di lavoro di GitHub Actions viene attivato quando una richiesta pull nel main ramo è aperta, sincronizzata, riaperta o chiusa.
• Viene build_and_deploy_job eseguito quando si esegue il push dei commit o si apre una richiesta pull sul ramo elencato nella on proprietà .
• Punta app_location alla src cartella che contiene i file di origine per l'app Web. Per impostare questo valore sulla radice del repository, usare /.
• Punta api_location alla api cartella che contiene l'applicazione Funzioni di Azure per gli endpoint API del sito. Per impostare questo valore sulla radice del repository, usare /.
• Punta output_location alla public cartella che contiene la versione finale dei file di origine dell'app. È relativo a app_location. Per i progetti .NET, il percorso è relativo alla cartella di output di pubblicazione.

Non modificare i valori per repo_token, actione azure_static_web_apps_api_token perché sono impostati per te da App Web statiche di Azure.

Il processo Chiudi richiesta pull chiude automaticamente la richiesta pull che ha attivato la compilazione e la distribuzione. Questo processo facoltativo non è necessario per il funzionamento del processo.

Quando viene aperta una richiesta pull, il App Web statiche di Azure GitHub Action compila e distribuisce l'app in un ambiente di staging. Successivamente, il processo Chiudi richiesta pull controlla se la richiesta pull è ancora aperta e la chiude con un messaggio di completamento.

Questo processo consente di mantenere organizzato il flusso di lavoro della richiesta pull e di evitare richieste pull non aggiornati. Chiudendo automaticamente la richiesta pull, il repository rimane aggiornato e il team riceve una notifica dello stato.

Il processo Chiudi richiesta pull fa parte del flusso di lavoro App Web statiche di Azure GitHub Actions, chiudendo la richiesta pull dopo il merge. L'azione Azure/static-web-apps-deploy distribuisce l'app in App Web statiche di Azure, che richiede l'autenticazioneazure_static_web_apps_api_token.

...

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'

...

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)

...

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

...

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)

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

Quando si configura un monorepo, ogni configurazione di app statica ha come ambito solo i file per una singola app. I diversi file del flusso di lavoro si trovano affiancati nella cartella .github/workflows del repository.

├── .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

Nell'esempio seguente viene illustrato come aggiungere un paths nodo alle push sezioni e pull_request di un file denominato 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

In questo esempio vengono attivate solo le modifiche apportate ai file seguenti:

• Tutti i file all'interno della cartella app1
• Tutti i file all'interno della cartella api1
• Modifiche al file del flusso di lavoro azure-static-web-apps-purple-pond.yml dell'app

Per supportare più di un'applicazione in un singolo repository, creare un file di flusso di lavoro separato e associarlo a azure Pipelines diverse.