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

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.

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

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

OpenID Connect

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

Opção 1: Aplicação 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 fluxo de trabalho das Ações do GitHub.
• Atribua uma função apropriada à sua entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.
• Configure uma credencial de identidade federada em um aplicativo Microsoft Entra para confiar tokens emitidos pelo GitHub Actions em seu repositório GitHub.

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

• Crie 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 fluxo de trabalho das Ações do GitHub.
• 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 tokens emitidos pelas Ações do GitHub em seu repositório do GitHub.

Principal 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 de cliente para sua entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.
• Copie os valores para ID do cliente, Segredo do cliente, ID da assinatura e ID do diretório (locatário) para usar posteriormente no fluxo de trabalho de Ações do GitHub.
• Atribua uma função apropriada à sua entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.

Configurar segredos do GitHub

OpenID Connect

Você precisa fornecer a ID do cliente, a ID do diretório (locatário) e a ID da assinatura do aplicativo para a ação de login. 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, vá para o seu repositório.

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

   

3. Selecione Novo segredo do repositório.

   Nota

   Para melhorar a segurança do fluxo de trabalho em repositórios públicos, use segredos de ambiente em vez de segredos de 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_IDe AZURE_SUBSCRIPTION_ID. Copie estes valores do seu 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 de Cliente
   AZURE_SUBSCRIPTION_ID	ID de Subscrição
   AZURE_TENANT_ID	ID do Diretório (inquilino)

   Nota

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

Principal de serviço

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

   

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

OpenID Connect

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

   

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 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 check-out e login. Essas ações verificarão o código do seu site e serão autenticadas com o Azure usando os segredos do GitHub criados 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 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"
   

7. 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: 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()
   

Principal de serviço

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

   

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@v2
         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@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()
   

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.

   

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