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

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.

• Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente.
• Um repositório do GitHub com seu código de site estático. Se você não tiver uma conta do GitHub, inscreva-se gratuitamente.
• Um site estático funcional hospedado no Armazenamento do Microsoft Azure. Saiba como hospedar site estático no Armazenamento do Microsoft Azure. Para seguir este exemplo, você também deve implantar a CDN do Azure.

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

OpenID Connect

Para usar a ação de Logon do Azure com o OIDC, você precisa configurar uma credencial de identidade federada em um aplicativo do Microsoft Entra ou uma identidade gerenciada atribuída pelo usuário.

Opção 1: Aplicativo Microsoft Entra

• Crie um aplicativo Microsoft Entra com uma entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.
• Copie os valores para ID do cliente, ID da assinatura e ID do diretório (locatário) para usar posteriormente no seu fluxo de trabalho do GitHub Actions.
• Atribua uma função apropriada à entidade de serviço pelo portal do Azure, pela CLI do Azure ou pelo Azure PowerShell.
• Configure uma credencial de identidade federada em um aplicativo Microsoft Entra para confiar em tokens emitidos pelo GitHub Actions para seu repositório GitHub.

Opção 2: Identidade gerenciada atribuída pelo usuário

• Criar uma identidade gerenciada atribuída pelo usuário.
• Copie os valores para ID do cliente, ID da assinatura e ID do diretório (locatário) para usar posteriormente no seu fluxo de trabalho do GitHub Actions.
• Atribua uma função apropriada à sua identidade gerenciada atribuída pelo usuário.
• Configure uma credencial de identidade federada em uma identidade gerenciada atribuída pelo usuário para confiar em tokens emitidos pelo GitHub Actions para seu repositório GitHub.

Entidade de serviço

• Crie um aplicativo Microsoft Entra com uma entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.
• Crie um segredo do cliente para sua entidade de serviço pelo portal do Azure, pela CLI do Azure ou pelo Azure PowerShell .
• Copie os valores para ID do cliente, Segredo do Cliente e ID da Assinatura e ID do Diretório (locatário) para usar posteriormente no seu fluxo de trabalho do GitHub Actions.
• Atribua uma função apropriada à entidade de serviço pelo portal do Azure, pela CLI do Azure ou pelo Azure PowerShell.

Configurar segredos do GitHub

OpenID Connect

Você precisa fornecer a ID do cliente, a ID do locatário e a ID da assinatura do seu aplicativo para a ação de logon. Esses valores podem ser fornecidos diretamente no fluxo de trabalho ou podem ser armazenados em segredos do GitHub e referenciados em seu fluxo de trabalho. Salvar os valores como segredos do GitHub é a opção mais segura.

1. No GitHub, acesse seu repositório.

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

   

3. Selecione Novo segredo de repositório.

   Observação

   Para aprimorar a segurança do fluxo de trabalho em repositórios públicos, use segredos de ambiente em vez de segredos do repositório. Se o ambiente exigir aprovação, um trabalho não poderá acessar segredos de ambiente até que um dos revisores necessários o aprove.

4. Crie segredos para AZURE_CLIENT_ID, AZURE_TENANT_ID e AZURE_SUBSCRIPTION_ID. Copie esses valores do aplicativo Microsoft Entra ou da identidade gerenciada atribuída pelo usuário para seus segredos do GitHub:

   Segredo do GitHub	Aplicativo Microsoft Entra ou identidade gerenciada atribuída pelo usuário
   AZURE_CLIENT_ID	ID do Cliente
   AZURE_SUBSCRIPTION_ID	ID da assinatura
   AZURE_TENANT_ID	ID do diretório (locatário)

   Observação

   Por motivos de segurança, recomendamos usar os Segredos do GitHub em vez de passar valores diretamente para o fluxo de trabalho.

Entidade de serviço

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.

   

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

OpenID Connect

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

   

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 with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. Adicione uma seção de permissões.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   

5. Adicione ações de fazer 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 os segredos do GitHub criado anteriormente.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   

6. 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"
   

7. 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: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v2
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
       - 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()
   

Entidade de serviço

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

   

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@v2
         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@v2
         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.

   

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