Nasazení statického webu ve službě Azure Storage pomocí pracovního postupu GitHub Actions

Začněte pracovat s GitHub Actions pomocí pracovního postupu pro nasazení statického webu do účtu úložiště Azure. Jakmile nastavíte pracovní postup GitHub Actions, budete moct web automaticky nasadit do Azure z GitHubu, když provedete změny kódu webu.

Poznámka:

Pokud používáte Azure Static Web Apps, nemusíte ručně nastavovat pracovní postup GitHub Actions. Azure Static Web Apps automaticky vytvoří pracovní postup GitHub Actions za vás.

Požadavky

Předplatné Azure a účet GitHubu.

• Účet Azure s aktivním předplatným. Vytvoření účtu zdarma
• Úložiště GitHubu s kódem statického webu Pokud nemáte účet GitHubu, zaregistrujte se zdarma.
• Funkční statický web hostovaný ve službě Azure Storage Zjistěte, jak hostovat statický web ve službě Azure Storage. Pokud chcete postupovat podle tohoto příkladu, měli byste také nasadit Azure CDN.

Poznámka:

Běžně se používá síť pro doručování obsahu (CDN) ke snížení latence pro uživatele po celém světě a ke snížení počtu transakcí do vašeho účtu úložiště. Nasazení statického obsahu do cloudové služby úložiště může snížit potřebu potenciálně nákladné výpočetní instance. Další informace naleznete v tématu Model Hostování statického obsahu.

Generování přihlašovacích údajů pro nasazení

Instanční objekt

Pomocí příkazu az ad sp create-for-rbac v Azure CLI vytvořte instanční objekt. Spusťte tento příkaz pomocí Azure Cloud Shellu na webu Azure Portal nebo výběrem tlačítka Vyzkoušet .

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

--json-auth Parametr je k dispozici ve verzích >Azure CLI = 2.51.0. Verze před tímto použitím --sdk-auth s upozorněním na vyřazení.

V předchozím příkladu nahraďte zástupné symboly ID vašeho předplatného, názvem skupiny prostředků a názvem aplikace. Výstupem je objekt JSON s přihlašovacími údaji pro přiřazení role, které poskytují přístup k vaší aplikaci App Service podobně jako v následujícím příkladu. Zkopírujte tento objekt JSON pro pozdější použití.

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

OpenID Connect

OpenID Připojení je metoda ověřování, která používá krátkodobé tokeny. Nastavení OpenID Připojení pomocí GitHub Actions je složitější proces, který nabízí posílené zabezpečení.

1. Pokud nemáte existující aplikaci, zaregistrujte novou aplikaci Microsoft Entra a instanční objekt, který má přístup k prostředkům.

   az ad app create --display-name myApp
   

   Tento příkaz vypíše JSON s vaším kódem appIdclient-id. APPLICATION-OBJECT-ID Slouží objectId k vytváření federovaných přihlašovacích údajů s voláními rozhraní Graph API. Uložte hodnotu, kterou chcete použít jako tajný kód GitHubu AZURE_CLIENT_ID později.

2. Vytvořte instanční objekt. $appID Nahraďte id aplikace z výstupu JSON. Tento příkaz vygeneruje výstup JSON s jiným objectId příkazem, který se použije v dalším kroku. Nový objectId je assignee-object-id.

   Tento příkaz vygeneruje výstup JSON s jiným objectId kódem a použije se v dalším kroku. Nový objectId je assignee-object-id.

   Zkopírujte soubor, který appOwnerTenantId chcete použít jako tajný kód GitHubu pro AZURE_TENANT_ID pozdější použití.

    az ad sp create --id $appId
   

3. Vytvořte nové přiřazení role podle předplatného a objektu. Ve výchozím nastavení bude přiřazení role svázané s vaším výchozím předplatným. Nahraďte $subscriptionId ID předplatného, $resourceGroupName názvem vaší skupiny prostředků a $assigneeObjectId vygenerovanými assignee-object-id (id nově vytvořeného objektu instančního objektu).

   az role assignment create --role contributor --subscription $subscriptionId --assignee-object-id  $assigneeObjectId --assignee-principal-type ServicePrincipal --scope /subscriptions/$subscriptionId/resourceGroups/$resourceGroupName
   

4. Spuštěním následujícího příkazu vytvořte nové přihlašovací údaje federované identity pro vaši aplikaci Microsoft Entra.

   • Nahraďte APPLICATION-OBJECT-ID objectId (vygenerovaný při vytváření aplikace) pro vaši aplikaci Microsoft Entra.
   • Nastavte hodnotu pro CREDENTIAL-NAME pozdější odkaz.
   • Nastavte .subject Hodnota je definována GitHubem v závislosti na vašem pracovním postupu:
     • Úlohy v prostředí GitHub Actions: repo:< Organization/Repository >:environment:< Name >
     • Pro úlohy, které nejsou svázané s prostředím, zahrňte cestu odkaz pro větev nebo značku na základě cesty odkazu použité k aktivaci pracovního postupu: repo:< Organization/Repository >:ref:< ref path>. Například repo:n-username/ node_express:ref:refs/heads/my-branch nebo repo:n-username/ node_express:ref:refs/tags/my-tag.
     • Pro pracovní postupy aktivované událostí žádosti o přijetí změn: repo:< Organization/Repository >:pull_request.

   az ad app federated-credential create --id <APPLICATION-OBJECT-ID> --parameters credential.json
   ("credential.json" contains the following content)
   {
       "name": "<CREDENTIAL-NAME>",
       "issuer": "https://token.actions.githubusercontent.com",
       "subject": "repo:octo-org/octo-repo:environment:Production",
       "description": "Testing",
       "audiences": [
           "api://AzureADTokenExchange"
       ]
   }
   

Konfigurace tajných kódů GitHubu

Instanční objekt

1. Na GitHubu přejděte do svého úložiště.

2. V navigační nabídce přejděte na Nastavení.

3. Vyberte Akce tajných kódů zabezpečení > a proměnných>.

   

4. Vyberte Nový tajný klíč úložiště.

5. Celý výstup JSON z příkazu Azure CLI vložte do pole hodnoty tajného kódu. Dejte tajnému názvu AZURE_CREDENTIALS.

6. Vyberte Add secret (Přidat tajný kód).

OpenID Connect

K akci přihlášení musíte zadat ID klienta, ID tenanta a ID předplatného vaší aplikace. Tyto hodnoty je možné zadat buď přímo v pracovním postupu, nebo je můžete uložit v tajných kódech GitHubu a odkazovat na je ve vašem pracovním postupu. Uložením hodnot jako tajných kódů GitHubu je bezpečnější možnost.

1. Na GitHubu přejděte do svého úložiště.

2. Vyberte Akce tajných kódů zabezpečení > a proměnných>.

   

3. Vyberte Nový tajný klíč úložiště.

4. Vytváření tajných kódů pro AZURE_CLIENT_ID, AZURE_TENANT_IDa AZURE_SUBSCRIPTION_ID. Pro tajné kódy GitHubu použijte tyto hodnoty z vaší aplikace Microsoft Entra:

   Tajný kód GitHubu	Aplikace Microsoft Entra
   AZURE_CLIENT_ID	ID aplikace (klienta)
   AZURE_TENANT_ID	ID adresáře (klienta)
   AZURE_SUBSCRIPTION_ID	Subscription ID

5. Uložte každý tajný kód výběrem možnosti Přidat tajný kód.

Přidání pracovního postupu

Instanční objekt

1. Přejděte na Akce pro úložiště GitHub.

   

2. Vyberte Nastavit pracovní postup sami.

3. Odstraňte všechno za oddílem on: souboru pracovního postupu. Váš zbývající pracovní postup může například vypadat takto.

   name: CI
   
   on:
       push:
           branches: [ main ]
   

4. Přejmenujte pracovní postup Blob storage website CI a přidejte akce rezervace a přihlášení. Tyto akce si prohlédnou kód webu a ověří se v Azure pomocí tajného kódu GitHubu AZURE_CREDENTIALS , který jste vytvořili dříve.

   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. Pomocí akce Azure CLI nahrajte kód do úložiště objektů blob a vyprázdněte koncový bod CDN. Nahraďte az storage blob upload-batchzástupný text názvem vašeho účtu úložiště. Skript se nahraje do kontejneru $web . Nahraďte az cdn endpoint purgezástupné symboly názvem profilu CDN, názvem koncového bodu CDN a skupinou prostředků. Chcete-li urychlit vyprázdnění CDN, můžete přidat --no-wait možnost do az cdn endpoint purge. Pokud chcete zvýšit zabezpečení, můžete také přidat --account-key možnost s klíčem účtu úložiště.

       - 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. Dokončete pracovní postup přidáním akce pro odhlášení z Azure. Tady je dokončený pracovní postup. Soubor se zobrazí ve .github/workflows složce úložiště.

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

OpenID Connect

1. Přejděte na Akce pro úložiště GitHub.

   

2. Vyberte Nastavit pracovní postup sami.

3. Odstraňte všechno za oddílem on: souboru pracovního postupu. Váš zbývající pracovní postup může například vypadat takto.

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. Přidejte oddíl oprávnění.

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

5. Přidání akcí rezervace a přihlášení Tyto akce si prohlédnou kód webu a ověří se v Azure pomocí tajných kódů GitHubu, které jste vytvořili dříve.

   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@v1
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   

6. Pomocí akce Azure CLI nahrajte kód do úložiště objektů blob a vyprázdněte koncový bod CDN. Nahraďte az storage blob upload-batchzástupný text názvem vašeho účtu úložiště. Skript se nahraje do kontejneru $web . Nahraďte az cdn endpoint purgezástupné symboly názvem profilu CDN, názvem koncového bodu CDN a skupinou prostředků. Chcete-li urychlit vyprázdnění CDN, můžete přidat --no-wait možnost do az cdn endpoint purge. Pokud chcete zvýšit zabezpečení, můžete také přidat --account-key možnost s klíčem účtu úložiště.

       - 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. Dokončete pracovní postup přidáním akce pro odhlášení z Azure. Tady je dokončený pracovní postup. Soubor se zobrazí ve .github/workflows složce úložiště.

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

Kontrola nasazení

1. Přejděte na Akce pro úložiště GitHub.

2. Otevřete první výsledek a prohlédněte si podrobné protokoly spuštění pracovního postupu.

   

Vyčištění prostředků

Pokud už statický web a úložiště GitHub nepotřebujete, vyčistěte prostředky, které jste nasadili, odstraněním skupiny prostředků a úložiště GitHub.

Další kroky

Další informace o Službě Azure Static Web Apps