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

Conexão OpenID

Para usar a Ação Azure Login com o OIDC, precisa configurar uma credencial federada de identidade numa aplicação Microsoft Entra ou numa identidade gerida pelo utilizador.

Opção 1: Aplicação Microsoft Entra

• Crie uma aplicação Microsoft Entra com uma entidade de serviço usando o Azure portal, o Azure CLI ou o 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 através do Portal do Azure, Azure CLI ou Azure PowerShell.
• Configure uma credencial de identidade federada num aplicativo Microsoft Entra para confiar tokens emitidos pelo GitHub Actions no 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 à identidade gerida atribuída ao utilizador.
• Configure uma credencial de identidade federada numa identidade gerida atribuída ao utilizador para confiar tokens emitidos pelo GitHub Actions no seu repositório GitHub.

Principal de serviço

• Crie uma aplicação Microsoft Entra com uma entidade de serviço usando o Azure portal, o Azure CLI ou o 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 através do Portal do Azure, Azure CLI ou Azure PowerShell.

Configurar segredos do GitHub

Conexão OpenID

Você precisa fornecer o ID do cliente, o ID do diretório (locatário) e o ID da assinatura da sua aplicação 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 Segurança > Segredos e variáveis > Ações.

   

3. Selecione Novo segredo do repositório.

   Nota

   Para aumentar a segurança do fluxo de trabalho em repositórios públicos, utilize 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 Segurança > Segredos e variáveis > Ações.

   

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ê ao segredo o nome AZURE_CREDENTIALS.

6. Selecione Add secret (Adicionar segredo).

Adicione o seu fluxo de trabalho

Conexão OpenID

1. Vá para Ações para o seu repositório do 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. Utilize a ação CLI do Azure para carregar o seu código no armazenamento de blobs e limpar o ponto de extremidade do seu CDN. Para az storage blob upload-batch, substitua o marcador de posição pelo nome da conta de armazenamento. O script será carregado para o $web contêiner. Para az cdn endpoint purge, substitua os marcadores de posição 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, pode-se também adicionar a opção --account-key com a chave da 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 o seu repositório do 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. Utilize a ação CLI do Azure para carregar o seu código no armazenamento de blobs e limpar o ponto de extremidade do seu CDN. Para az storage blob upload-batch, substitua o marcador de posição pelo nome da conta de armazenamento. O script será carregado para o $web contêiner. Para az cdn endpoint purge, substitua os marcadores de posição 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, pode-se também adicionar a opção --account-key com a chave da 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()
   

Reveja a sua implementação

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

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

   

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