Usar o fluxo de trabalho de Ações do GitHub para implantar seu site estático no Armazenamento do Azure

  • Artigo

Comece a usar as Ações do GitHub usando um fluxo de trabalho para implantar um site estático em uma conta de armazenamento do Azure. Depois de configurar um fluxo de trabalho de Ações do GitHub, você poderá implantar automaticamente seu site no Azure a partir do GitHub quando fizer alterações no código do seu site.

Nota

Se você estiver usando os Aplicativos Web Estáticos do Azure, não precisará configurar manualmente um fluxo de trabalho de Ações do GitHub. Os Aplicativos Web Estáticos do Azure criam automaticamente um fluxo de trabalho de Ações do GitHub para você.

Pré-requisitos

Uma assinatura do Azure e uma conta do GitHub.

Nota

É comum usar uma rede de distribuição de conteúdo (CDN) para reduzir a latência para seus usuários em todo o mundo e para reduzir o número de transações para sua conta de armazenamento. A implantação de conteúdo estático em um serviço de armazenamento baseado em nuvem pode reduzir a necessidade de instâncias de computação potencialmente caras. Para obter mais informações, consulte Padrão de hospedagem de conteúdo estático.

Gerar credenciais de implantação

Crie uma entidade de serviço com o comando az ad sp create-for-rbac na CLI do Azure. Execute este comando com o Azure Cloud Shell no portal do Azure ou selecionando o botão Experimentar .

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

O parâmetro --json-auth está disponível nas versões >da CLI do Azure = 2.51.0. Versões anteriores a este uso --sdk-auth com um aviso de descontinuação.

No exemplo acima, substitua os espaços reservados pela ID da assinatura, nome do grupo de recursos e nome do aplicativo. A saída é um objeto JSON com as credenciais de atribuição de função que fornecem acesso ao seu aplicativo do Serviço de Aplicativo semelhante ao abaixo. Copie este objeto JSON para mais tarde.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

Configurar segredos do GitHub

  1. No GitHub, vá para o seu repositório.

  2. Vá para Configurações no menu de navegação.

  3. Selecione Segredos de Segurança > e Ações de variáveis>.

    Screenshot of adding a secret

  4. Selecione Novo segredo do repositório.

  5. Cole toda a saída JSON do comando CLI do Azure no campo de valor do segredo. Dê o nome AZURE_CREDENTIALSao segredo .

  6. Selecione Add secret (Adicionar segredo).

Adicione o seu fluxo de trabalho

  1. Vá para Ações para seu repositório GitHub.

    GitHub Actions menu item

  2. Selecione Configurar seu fluxo de trabalho você mesmo.

  3. Exclua tudo após a on: seção do seu arquivo de fluxo de trabalho. Por exemplo, o fluxo de trabalho restante pode ter esta aparência.

    name: CI

on:
    push:
        branches: [ main ]

  4. Renomeie seu fluxo de trabalho Blob storage website CI e adicione as ações de check-out e login. Essas ações verificarão o código do seu site e autenticarão com o Azure usando o segredo do AZURE_CREDENTIALS GitHub que você criou anteriormente.

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

  5. Use a ação CLI do Azure para carregar seu código no armazenamento de blob e limpar seu ponto de extremidade CDN. Para az storage blob upload-batch, substitua o espaço reservado pelo nome da conta de armazenamento. O script será carregado para o $web contêiner. Para az cdn endpoint purge, substitua os espaços reservados pelo nome do perfil CDN, nome do ponto de extremidade CDN e grupo de recursos. Para acelerar a limpeza da CDN, você pode adicionar a --no-wait opção ao az cdn endpoint purge. Para aumentar a segurança, você também pode adicionar a opção com a chave da --account-key conta de armazenamento.

        - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  6. Conclua seu fluxo de trabalho adicionando uma ação para fazer logout do Azure. Aqui está o fluxo de trabalho concluído. O arquivo aparecerá na .github/workflows pasta do seu repositório.

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Revisar sua implantação

  1. Vá para Ações para seu repositório GitHub.

  2. Abra o primeiro resultado para ver os logs detalhados da execução do seu fluxo de trabalho.

    Log of GitHub Actions run

Clean up resources (Limpar recursos)

Quando seu site estático e o repositório GitHub não forem mais necessários, limpe os recursos implantados excluindo o grupo de recursos e o repositório GitHub.

Próximos passos

Saiba mais sobre os Aplicativos Web Estáticos do Azure