GitHub Actions arbetsflöden för Azure Static Web Apps förhandsversionGitHub Actions workflows for Azure Static Web Apps Preview

När du skapar en Azure Static Web Apps resurs genererar Azure ett GitHub Actions arbetsflöde för att styra appens kontinuerliga distribution.When you create a new Azure Static Web Apps resource, Azure generates a GitHub Actions workflow to control the app's continuous deployment. Arbetsflödet drivs av en YAML-fil.The workflow is driven by a YAML file. Den här artikeln beskriver strukturen och alternativen för arbetsflödesfilen.This article details the structure and options of the workflow file.

Distributioner initieras av utlösare, som kör jobb som definieras av enskilda steg.Deployments are initiated by triggers, which run jobs that are defined by individual steps.

Anteckning

Azure Static Web Apps har även stöd för Azure DevOps.Azure Static Web Apps also supports Azure DevOps. Se Publicera med Azure DevOps för information om hur du ställer in en pipeline.See Publish with Azure DevOps for information on setting up a pipeline.

FilplatsFile location

När du länkar gitHub-lagringsplatsen till Azure Static Web Apps läggs en arbetsflödesfil till på lagringsplatsen.When you link your GitHub repository to Azure Static Web Apps, a workflow file is added to the repository.

Följ de här stegen för att visa den genererade arbetsflödesfilen.Follow these steps to view the generated workflow file.

  1. Öppna appens lagringsplats på GitHub.Open the app's repository on GitHub.
  2. Klicka på mappen på fliken .github/workflows Kod.From the Code tab, click on the .github/workflows folder.
  3. Klicka på filen med ett namn som ser ut så azure-static-web-apps-<RANDOM_NAME>.yml här: .Click on the file with a name that looks like azure-static-web-apps-<RANDOM_NAME>.yml.

YAML-filen på din lagringsplats liknar följande exempel:The YAML file in your repository will be similar to the following example:

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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: 'upload'
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          app_location: '/' # App source code path
          api_location: 'api' # Api source code path - optional
          output_location: 'dist' # Built app content directory - 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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
          action: 'close'

UtlösareTriggers

En GitHub Actions en utlösare meddelar ett GitHub Actions arbetsflöde för att köra ett jobb baserat på händelseutlösare.A GitHub Actions trigger notifies a GitHub Actions workflow to run a job based off event triggers. Utlösare visas med hjälp av on egenskapen i arbetsflödesfilen.Triggers are listed using the on property in the workflow file.

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

Via inställningar som är associerade med egenskapen kan du definiera vilka grenar som utlöser ett jobb och ange utlösare som on utlöses för olika pull-begärande tillstånd.Through settings associated with the on property, you can define which branches trigger a job, and set triggers to fire for different pull request states.

I det här exemplet startas ett arbetsflöde när huvudgrenen ändras.In this example, a workflow is started as the main branch changes. Ändringar som startar arbetsflödet inkluderar push-push-förfrågningar och öppning av pull-begäranden mot den valda grenen.Changes that start the workflow include pushing commits and opening pull requests against the chosen branch.

JobbJobs

Varje händelseutlösare kräver en händelsehanterare.Each event trigger requires an event handler. Jobb definierar vad som händer när en händelse utlöses.Jobs define what happens when an event is triggered.

Det finns Static Web Apps jobb i arbetsflödesfilen.In the Static Web Apps workflow file, there are two available jobs.

NameName BeskrivningDescription
build_and_deploy_job Körs när du push-genomför eller öppnar en pull-begäran mot grenen som anges i on egenskapen .Executes when you push commits or open a pull request against the branch listed in the on property.
close_pull_request_job Körs ENDAST när du stänger en pull-begäran, vilket tar bort mellanlagringsmiljön som skapats från pull-begäranden.Executes ONLY when you close a pull request, which removes the staging environment created from pull requests.

StegSteps

Steg är sekventiella uppgifter för ett jobb.Steps are sequential tasks for a job. Ett steg utför åtgärder som att installera beroenden, köra tester och distribuera programmet till produktion.A step carries out actions like installing dependencies, running tests, and deploying your application to production.

En arbetsflödesfil definierar följande steg.A workflow file defines the following steps.

JobbJob StegSteps
build_and_deploy_job
  1. Checkar ut lagringsplatsen i åtgärdsmiljön.Checks out the repository in the Action's environment.
  2. Skapar och distribuerar lagringsplatsen till Azure Static Web Apps.Builds and deploys the repository to Azure Static Web Apps.
close_pull_request_job
  1. Meddelar Azure Static Web Apps att en pull-begäran har stängts.Notifies Azure Static Web Apps that a pull request has closed.

Skapa och distribueraBuild and deploy

Steget med namnet Build and Deploy skapar och distribuerar till din Azure Static Web Apps instans.The step named Build and Deploy builds and deploys to your Azure Static Web Apps instance. Under avsnittet with kan du anpassa följande värden för distributionen.Under the with section, you can customize the following values for your deployment.

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
  repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
  action: 'upload'
  ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
  app_location: '/' # App source code path
  api_location: 'api' # Api source code path - optional
  output_location: 'dist' # Built app content directory - optional
  ###### End of Repository/Build Configurations ######
EgenskapProperty BeskrivningDescription ExempelExample ObligatoriskRequired
app_location Plats för program koden.Location of your application code. Ange / om din program käll kod är i roten av lagrings platsen eller /app om program koden finns i en katalog som kallas app .Enter / if your application source code is at the root of the repository, or /app if your application code is in a directory called app. JaYes
api_location Azure Functionss kodens plats.Location of your Azure Functions code. Ange /api om din app-kod finns i en mapp med namnet api .Enter /api if your app code is in a folder called api. Om det inte går att hitta någon Azure Functions app i mappen, kan inte versionen av det här arbets flödet antas att du inte vill ha något API.If no Azure Functions app is detected in the folder, the build doesn't fail, the workflow assumes you don't want an API. IngaNo
output_location Platsen för build-utdatakatalogen i förhållande till app_location .Location of the build output directory relative to the app_location. Om programmets källkod finns i /app och build-skriptet matar ut filer till /app/build mappen, anger du build som output_location värde.If your application source code is located at /app, and the build script outputs files to the /app/build folder, then set build as the output_location value. IngaNo

Värdena repo_token , och anges åt dig genom att Azure Static Web Apps ska inte ändras action azure_static_web_apps_api_token manuellt.The repo_token, action, and azure_static_web_apps_api_token values are set for you by Azure Static Web Apps shouldn't be manually changed.

Anpassade byggkommandonCustom build commands

Du kan ha en mer exakt kontroll över vilka kommandon som körs under en distribution.You can have fine-grained control over what commands run during a deployment. Följande kommandon kan definieras under avsnittet för ett with jobb.The following commands can be defined under a job's with section.

Distributionen anropar alltid npm install före ett anpassat kommando.The deployment always calls npm install before any custom command.

KommandoCommand BeskrivningDescription
app_build_command Definierar ett anpassat kommando som ska köras under distributionen av programmet för statiskt innehåll.Defines a custom command to run during deployment of the static content application.

Om du till exempel vill konfigurera en produktionsbygge för ett Angular-program skapar du ett npm-skript med namnet för att köra build-prod och ange som det anpassade ng build --prod npm run build-prod kommandot.For example, to configure a production build for an Angular application create an npm script named build-prod to run ng build --prod and enter npm run build-prod as the custom command. Om det lämnas tomt försöker arbetsflödet köra npm run build kommandona npm run build:azure eller .If left blank, the workflow tries to run the npm run build or npm run build:azure commands.
api_build_command Definierar ett anpassat kommando som ska köras under distributionen av Azure Functions API-programmet.Defines a custom command to run during deployment of the Azure Functions API application.

Hoppa över appbyggeSkip app build

Om du behöver fullständig kontroll över hur ditt frontend-program har skapats kan du lägga till anpassade byggsteg i arbetsflödet.If you need full control over how your front-end application is built, you can add custom build steps in your workflow. Sedan kan du konfigurera Static Web Apps för att kringgå den automatiska byggprocessen och bara distribuera appen som skapats i ett tidigare steg.Then you can configure the Static Web Apps action to bypass the automatic build process and just deploy the app that was built in a previous step.

Om du vill hoppa över att skapa skip_app_build appen anger du till och till platsen för mappen som ska true app_location distribueras.To skip building the app, set skip_app_build to true and app_location to the location of the folder to deploy.

with:
  azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_MANGO_RIVER_0AFDB141E }}
  repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
  action: 'upload'
  ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
  app_location: 'dist' # Application build output generated by a previous step
  api_location: 'api' # Api source code path - optional
  output_location: '' # Leave this empty
  skip_app_build: true
  ###### End of Repository/Build Configurations ######
EgenskapProperty BeskrivningDescription
skip_app_build Ange värdet till för true att hoppa över att skapa frontend-appen.Set the value to true to skip building the front-end app.

Anteckning

Du kan bara hoppa över bygget för frontend-appen.You can only skip the build for the front-end app. Om din app har ett API kommer den fortfarande att byggas av Static Web Apps GitHub Action.If your app has an API, it'll still be built by the Static Web Apps GitHub Action.

Routes-filens platsRoute file location

Du kan anpassa arbetsflödet för att leta efter routes.jspå i valfri mapp på din lagringsplats.You can customize the workflow to look for the routes.json in any folder in your repository. Följande egenskap kan definieras under avsnittet för ett with jobb.The following property can be defined under a job's with section.

EgenskapProperty BeskrivningDescription
routes_location Definierar den katalogplats där routes.jspå filen hittas.Defines the directory location where the routes.json file is found. Den här platsen är relativ till lagringsplatsens rot.This location is relative to the root of the repository.

Det är särskilt viktigt att duroutes.js platsen för filen om byggsteget för frontend-ramverket inte flyttar den här filen till som output_location standard.Being explicit about the location of your routes.json file is particularly important if your front-end framework build step does not move this file to the output_location by default.

Viktigt

Funktioner som definierats iroutes.jspå filen är nu inaktuella.Functionality defined in the routes.json file is now deprecated. Se konfigurationsfilen Azure Static Web Apps för information om staticwebapp.config.jspå.See the Azure Static Web Apps configuration file for information about staticwebapp.config.json.

MiljövariablerEnvironment variables

Du kan ange miljövariabler för ditt env bygge via avsnittet i ett jobbs konfiguration.You can set environment variables for your build via the env section of a job's configuration.

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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          ###### Repository/Build Configurations
          app_location: '/'
          api_location: 'api'
          output_location: 'public'
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          HUGO_VERSION: 0.58.0

Monorepo-stödMonorepo support

Ett monorepo är en lagringsplats som innehåller kod för mer än ett program.A monorepo is a repository that contains code for more than one application. Som standard spårar en Static Web Apps-arbetsflödesfil alla filer i en lagringsplats, men du kan justera den för att rikta in dig på en enda app.By default, a Static Web Apps workflow file tracks all the files in a repository, but you can adjust it to target a single app. För monorepos har därför varje statisk app sin egen konfigurationsfil som finns sida vid sida i lagringsplatsens mapp .github/workflows.Therefore, for monorepos, each static app has it's own configuration file which lives side-by-side in the repository's .github/workflows folder.

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

Om du vill rikta en arbetsflödesfil till en enda app anger du sökvägar i push avsnitten och pull_request .To target a workflow file to a single app, you specify paths in the push and pull_request sections.

I följande exempel visas hur du lägger till en nod i - och -avsnitten i en fil med namnet paths push pull_request azure-static-web-apps-purple-mapp.yml.The following example demonstrates how to add a paths node to the push and pull_request sections of a file named 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

I det här fallet utlöser endast ändringar som görs i följande filer en ny version:In this instance, only changes made to following files trigger a new build:

  • Filer i mappen app1Any files inside the app1 folder
  • Filer i mappen api1Any files inside the api1 folder
  • Ändringar i appens azure-static-web-apps-purple-steg.yml-arbetsflödesfilChanges to the app's azure-static-web-apps-purple-pond.yml workflow file

Nästa stegNext steps