Condividi tramite

Usare il flusso di lavoro di GitHub Actions per distribuire il sito Web statico in Archiviazione di Azure

  • Articolo

Introduzione a GitHub Actions usando un flusso di lavoro per distribuire un sito statico in un account di archiviazione di Azure. Dopo aver configurato un flusso di lavoro di GitHub Actions, sarà possibile distribuire automaticamente il sito in Azure da GitHub quando si apportano modifiche al codice del sito.

Nota

Se si usa App Web statiche di Azure, non è necessario configurare manualmente un flusso di lavoro di GitHub Actions. App Web statiche di Azure crea automaticamente un flusso di lavoro di GitHub Actions.

Prerequisiti

Una sottoscrizione di Azure e un account GitHub.

Nota

È comune usare una rete per la distribuzione di contenuti (RETE CDN) per ridurre la latenza agli utenti in tutto il mondo e ridurre il numero di transazioni nell'account di archiviazione. La distribuzione di contenuto statico in un servizio di archiviazione basato sul cloud può ridurre la necessità di un'istanza di calcolo potenzialmente costosa. Per altre informazioni, vedere Modello di hosting di contenuti statici.

Generare le credenziali per la distribuzione

Per usare l'azione di accesso di Azure con OIDC, è necessario configurare una credenziale di identità federata in un'applicazione Microsoft Entra o in un'identità gestita assegnata dall'utente.

Opzione 1: Applicazione Microsoft Entra

Opzione 2: Identità gestita assegnata dall'utente

Configurare i segreti di GitHub

È necessario specificare l'ID client, l'ID directory (tenant) e l'ID sottoscrizione dell'applicazione all'azione di accesso. Questi valori possono essere forniti direttamente nel flusso di lavoro oppure possono essere archiviati nei segreti gitHub e riportati nel flusso di lavoro. Salvare i valori come segreti GitHub è l'opzione più sicura.

  1. In GitHub, andare al proprio repository.

  2. Selezionare Sicurezza > Segreti e variabili > Azioni.

    Screenshot dell'aggiunta di un segreto

  3. Selezionare Nuovo segreto repository.

    Nota

    Per migliorare la sicurezza del flusso di lavoro nei repository pubblici, usare i segreti dell'ambiente anziché i segreti del repository. Se l'ambiente richiede l'approvazione, un processo non può accedere ai segreti dell'ambiente finché uno dei revisori necessari non lo approva.

  4. Creare segreti per AZURE_CLIENT_ID, AZURE_TENANT_IDe AZURE_SUBSCRIPTION_ID. Copiare questi valori dall'applicazione Microsoft Entra o dall'identità gestita assegnata dall'utente per i segreti GitHub:

    Segreto GitHub Applicazione Microsoft Entra o identità gestita assegnata dall'utente
    AZURE_CLIENT_ID ID client
    AZURE_SUBSCRIPTION_ID ID sottoscrizione
    AZURE_TENANT_ID ID della directory (tenant)

    Nota

    Per motivi di sicurezza, è consigliabile usare i segreti di GitHub anziché passare i valori direttamente al flusso di lavoro.

Aggiungere il flusso di lavoro

  1. Passare ad Actions per il repository GitHub.

    Voce di menu GitHub Actions

  2. Selezionare Set up your workflow yourself (Configurare manualmente il flusso di lavoro).

  3. Eliminare tutti quello che segue la sezione on: del file del flusso di lavoro. Il flusso di lavoro rimanente, ad esempio, potrà essere simile al seguente.

    name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

  4. Aggiungere una sezione autorizzazioni.

    name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

  5. Aggiungere azioni di estrazione e accesso. Queste azioni verificheranno il codice del sito ed eseguiranno l'autenticazione con Azure usando i segreti GitHub creati in precedenza.

    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. Usare l'azione dell'interfaccia della riga di comando di Azure per caricare il codice nell'archivio BLOB e per eliminare l'endpoint della rete CDN. Per az storage blob upload-batchsostituire il segnaposto con il nome dell'account di archiviazione. Lo script verrà caricato nel $web contenitore. Per az cdn endpoint purgesostituire i segnaposto con il nome del profilo della rete CDN, il nome dell'endpoint della rete CDN e il gruppo di risorse. Per velocizzare l'eliminazione della rete CDN, è possibile aggiungere l'opzione --no-wait a az cdn endpoint purge. Per migliorare la sicurezza, è anche possibile aggiungere l'opzione con la --account-keychiave dell'account di archiviazione.

        - 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. Completare il flusso di lavoro aggiungendo un'azione di disconnessione da Azure. Ecco il flusso di lavoro completato. Il file verrà visualizzato nella cartella .github/workflows del repository.

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

Esaminare la distribuzione

  1. Passare ad Actions per il repository GitHub.

  2. Aprire il primo risultato per visualizzare i log dettagliati dell'esecuzione del flusso di lavoro.

    Log dell'esecuzione di GitHub Actions

Pulire le risorse

Quando il sito Web statico e il repository GitHub non sono più necessari, pulire le risorse distribuite eliminando il gruppo di risorse e il repository GitHub.

Passaggi successivi

Informazioni su App Web statiche di Azure