Partilhar via


Criar ambientes de visualização de filial nos Aplicativos Web Estáticos do Azure

Você pode configurar seu site para implantar todas as alterações feitas em ramificações que não são uma ramificação de produção. Essa implantação de visualização é publicada em uma URL estável que inclui o nome da filial. Por exemplo, se a ramificação for nomeada dev, o ambiente estará disponível em um local como <DEFAULT_HOST_NAME>-dev.<LOCATION>.azurestaticapps.net. Você pode excluir um ambiente de filial no portal por meio da guia Ambientes do seu aplicativo Web estático.

Configuração

Para habilitar ambientes de URL estáveis, faça as seguintes alterações no arquivo configuration.yml.

  • Defina a entrada para o nome da production_branch static-web-apps-deploy ramificação de produção no trabalho na ação GitHub ou na tarefa AzureStaticWebApp. Essa ação garante que as alterações em sua ramificação de produção sejam implantadas no ambiente de produção, enquanto as alterações em outras ramificações sejam implantadas em um ambiente de visualização.
  • Liste as ramificações que você deseja implantar para visualizar ambientes na matriz de gatilho em sua configuração de fluxo de trabalho para que as alterações nessas ramificações também acionem a implantação do GitHub Actions ou do Azure Pipelines.
    • Defina essa matriz como ** para Ações do GitHub ou * para Pipelines do Azure se quiser rastrear todas as ramificações.

Exemplo

O exemplo a seguir demonstra como habilitar ambientes de visualização de ramificação.

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"

Nota

O ... código indica ignorado para maior clareza.

Neste exemplo, os ambientes de visualização são definidos para as dev ramificações e staging . Cada ramificação é implantada em um ambiente de visualização separado.

Próximos passos