Fazendo a implantação no Azure Static Web App

Você pode fazer a implantação do seu aplicativo web para o Azure Static Web App como parte dos fluxos de trabalho de implantação contínua (CD).

Neste artigo

Introdução

Este guia explica como usar o GitHub Actions para criar e implantar um aplicativo Web nos Aplicativos Web Estáticos do Azure.

Note

Se os seus fluxos de trabalho de GitHub Actions tiverem de acessar recursos de um provedor de nuvem compatível com o OpenID Connect (OIDC), você poderá configurar seus fluxos de trabalho para efetuar a autenticção diretamente no provedor de nuvem. Isso permitirá que você pare de armazenar essas credenciais como segredos de longa duração e proporcione outros benefícios de segurança. Para obter mais informações, confira "Sobre o enrijecimento de segurança com o OpenID Connect". e Configurando o OpenID Connect no Azure.

Pré-requisitos

Antes de criar seu fluxo de trabalho de GitHub Actions, primeiro você precisa concluir as etapas de configuração a seguir:

  1. Crie um Azure Static Web App usando a opção "Outro" para fonte de implantação. Para obter mais informações, confira Guia de Início Rápido: Como criar seu primeiro site estático no portal do Azure na documentação do Azure.

  2. Crie um segredo chamado AZURE_STATIC_WEB_APPS_API_TOKEN com o valor do token de implantação do aplicativo Web estático. Para obter mais informações sobre como encontrar o token de implantação, confira Redefinir tokens de implantação nos Aplicativos Web Estáticos do Azure na documentação do Azure.

Criar o fluxo de trabalho

Depois de preencher os pré-requisitos, você pode prosseguir com a criação do fluxo de trabalho.

O exemplo de fluxo de trabalho a seguir demonstra como criar e implantar um aplicativo Web estático do Azure quando há um push para o branch main ou quando uma solicitação de pull direcionada a main é aberta, sincronizada ou reaberta. O fluxo de trabalho também destrói a implantação de pré-produção correspondente quando uma solicitação de pull direcionada a main é fechada.

Abaixo da chave env de fluxo de trabalho, altere os seguintes valores:

  • APP_LOCATION para o local do código do cliente
  • API_LOCATION para o local do código-fonte da API. Se API_LOCATION não for relevante, você poderá excluir a variável e as linhas em que ela é usada.
  • OUTPUT_LOCATION para o local da saída de build do código do cliente

Para obter mais informações sobre esses valores, confira Configuração de build para Aplicativos Web Estáticos do Azure na documentação do Azure.

YAML
# Esse fluxo de trabalho usa ações que não são certificadas pelo GitHub.
# São fornecidas por terceiros e regidas por
# termos de serviço, política de privacidade e suporte separados
# online.

# O GitHub recomenda fixar ações em um SHA de commit.
# Para obter uma versão mais recente, você precisará atualizar o SHA.
# Você também pode fazer referência a uma marca ou branch, mas a ação pode ser alterada sem aviso.

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "/" # location of your client code
  API_LOCATION: "api" # location of your api source code - optional
  OUTPUT_LOCATION: "build" # location of client code build output

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

permissions:
  issues: write
  contents: read
  pull-requests: write

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: ${{ env.OUTPUT_LOCATION }}

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

Recursos adicionais

Os seguintes recursos também podem ser úteis:

  • Para o modelo de fluxo de trabalho original, confira azure-staticwebapp.yml no repositório starter-workflows do GitHub Actions.
  • A ação usada para implantar o aplicativo Web é a ação Azure/static-web-apps-deploy oficial do Azure.
  • Para ver mais exemplos de fluxos de trabalho do GitHub Action que são implantados no Azure, confira o repositório actions-workflow-samples.