Compartilhar via

Usar o fluxo de trabalho de GitHub Actions para implantar seu site estático no Armazenamento do Azure

  • Artigo

Introdução às GitHub Actions 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 GitHub Actions, você poderá implantar automaticamente seu site no Azure pelo GitHub quando fizer alterações no código do site.

Observação

Se você estiver usando Aplicativos Web Estáticos do Azure, não será necessário configurar manualmente um fluxo de trabalho de GitHub Actions. Os Aplicativos Web Estáticos do Azure criam automaticamente um fluxo de trabalho de GitHub Actions para você.

Pré-requisitos

Uma assinatura do Azure e uma conta do GitHub.

Observação

É comum usar uma CDN (rede de distribuição de conteúdo) para reduzir a latência para seus usuários em todo o mundo e reduzir o número de transações em 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 uma instância de computação potencialmente cara. Para obter mais informações, consulte Padrão de hospedagem de conteúdo estático.

Gerar as credenciais de implantação

Crie uma entidade de serviço com o comando az ad sp create-for-rbac na CLI do Azure. Execute esse 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 essa usam --sdk-auth com um aviso de substituiçã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 aplicativo do Serviço de Aplicativo semelhante ao mostrado abaixo. Copie esse objeto JSON para uso posterior.

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

Configurar segredos do GitHub

  1. No GitHub, acesse seu repositório.

  2. Acesse Configurações no menu de navegação.

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

    Screenshot of adding a secret

  4. Selecione Novo segredo de repositório.

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

  6. Selecione Adicionar segredo.

Adicionar seu fluxo de trabalho

  1. Acesse Ações para seu repositório do GitHub.

    GitHub Actions menu item

  2. Selecione Configurar seu fluxo de trabalho por conta própria.

  3. Exclua tudo depois da seção on: do seu arquivo de fluxo de trabalho. Por exemplo, o fluxo de trabalho restante pode ter a aparência a seguir.

    name: CI

on:
    push:
        branches: [ main ]

  4. Renomeie o fluxo de trabalho Blob storage website CI e adicione as ações de check-out e logon. Essas ações farão o check-out do código do site e a autenticação com o Azure usando o segredo do GitHub AZURE_CREDENTIALS criado 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 da CLI do Azure para carregar seu código no armazenamento de blobs e para limpar o ponto de extremidade da CDN. Para az storage blob upload-batch, substitua o espaço reservado pelo nome da sua conta de armazenamento. O script será carregado no contêiner $web. Para az cdn endpoint purge, substitua os espaços reservados pelo nome do perfil da CDN, nome do ponto de extremidade da CDN e grupo de recursos. Para acelerar a limpeza da CDN, você pode adicionar a opção --no-wait a az cdn endpoint purge. Para aumentar a segurança, adicione também a opção --account-key com a chave de 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 o fluxo de trabalho adicionando uma ação para fazer logoff do Azure. Este é o fluxo de trabalho concluído. O arquivo será exibido na pasta .github/workflows 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()

Examinar sua implantação

  1. Acesse Ações para seu repositório do GitHub.

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

    Log of GitHub Actions run

Limpar os recursos

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

Próximas etapas

Saiba mais sobre os Aplicativos Web Estáticos do Azure