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.

Note

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.

Prerequisites

Předplatné Azure a účet GitHubu.

Účet Azure s aktivním předplatným. Vytvořte si bezplatný účet.
Ú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.

Note

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í

OpenID Connect
Služba principal

Pokud chcete použít akci přihlášení k Azure s OIDC, musíte nakonfigurovat přihlašovací údaje federované identity v aplikaci Microsoft Entra nebo spravované identitě přiřazené uživatelem.

Možnost 1: Aplikace Microsoft Entra

Vytvořte aplikaci Microsoft Entra s oprávněním služby pomocí Azure portálu , příkazového nástroje Azure CLI , nebo modulu Azure PowerShell .
Zkopírujte hodnoty ID klienta, ID předplatnéhoa ID adresáře (tenanta), abyste je mohli použít později v pracovním postupu GitHub Actions.
Přiřaďte k instančnímu objektu příslušnou roli pomocí webu Azure Portal, Azure CLI nebo Azure PowerShellu.
Nakonfigurujte federované identitní pověření v aplikaci Microsoft Entra tak, aby důvěřovalo tokenům vydaným GitHub Actions pro vaše úložiště na GitHubu.

možnost 2: Spravovaná identita přiřazená uživatelem

Vytvořte uživatelsky přiřazenou spravovanou identitu.
Zkopírujte hodnoty ID klienta, ID předplatnéhoa ID adresáře (tenanta), abyste je mohli použít později v pracovním postupu GitHub Actions.
Přiřadit odpovídající roli spravované identitě přiřazené uživatelem.
Nakonfigurujte pověření federované identity pro spravovanou identitu přiřazenou uživatelem, aby důvěřovala tokenům vydaným GitHub Actions ve vašem úložišti GitHub.

Musíte zadat ID klienta vaší aplikace, ID adresáře (tenanta)a ID předplatného pro akci přihlášení. 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.

Na GitHubu přejděte do svého úložiště.
Vyberte > tajných kódů zabezpečení > a proměnných.
Vyberte Nový tajný klíč úložiště.

Note

Pokud chcete zvýšit zabezpečení pracovních postupů ve veřejných úložištích, použijte tajných kódů prostředí místo tajných kódů úložiště. Pokud prostředí vyžaduje schválení, úloha nemůže získat přístup k tajným kódům prostředí, dokud ho některý z požadovaných kontrolorů neschválí.

Vytváření tajných kódů pro AZURE_CLIENT_ID, AZURE_TENANT_IDa AZURE_SUBSCRIPTION_ID. Zkopírujte tyto hodnoty z vaší aplikace Microsoft Entra nebo spravované identity přiřazené uživatelem pro tajné kódy GitHubu:

Tajný kód GitHubu	Aplikace Microsoft Entra nebo spravovaná identita přiřazená uživatelem
AZURE_CLIENT_ID	ID klienta
AZURE_SUBSCRIPTION_ID	Identifikátor předplatného
AZURE_TENANT_ID	ID adresáře (klienta)

Note

Z bezpečnostních důvodů doporučujeme místo předávání hodnot přímo pracovnímu postupu používat tajné kódy GitHubu.

Na GitHubu přejděte do svého úložiště.
V navigační nabídce přejděte na Nastavení .
Vyberte > tajných kódů zabezpečení > a proměnných.
Vyberte Nový tajný klíč úložiště.
Celý výstup JSON z příkazu Azure CLI vložte do pole hodnoty tajného kódu. Pojmenujte tajemství jako AZURE_CREDENTIALS.
Vyberte Add secret (Přidat tajný kód).

Přidejte svůj pracovní postup

OpenID Connect
Služba principal

Přejděte na Akce pro úložiště GitHub.
Vyberte Nastavit pracovní postup sami.
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 ]
```

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

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

Přidejte akce pokladny 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@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

Pomocí akce Azure CLI nahrajte kód do úložiště objektů blob a vyprázdněte koncový bod CDN. Nahraďte zástupný text az storage blob upload-batch názvem vašeho účtu úložiště. Skript se nahraje do kontejneru $web . Nahraďte az cdn endpoint purge zá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"
```

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

Přejděte na Akce pro úložiště GitHub.
Vyberte Nastavit pracovní postup sami.
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 ]
```

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@v2
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

Pomocí akce Azure CLI nahrajte kód do úložiště objektů blob a vyprázdněte koncový bod CDN. Nahraďte zástupný text az storage blob upload-batch názvem vašeho účtu úložiště. Skript se nahraje do kontejneru $web . Nahraďte az cdn endpoint purge zá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"
```

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

Zkontrolujte své nasazení

Přejděte na Akce pro úložiště GitHub.
Otevřete první výsledek a prohlédněte si podrobné protokoly spuštění pracovního postupu.

Vyčistěte zdroje

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

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-10-08

Sdílet prostřednictvím

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

Prerequisites

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

Konfigurace tajných kódů GitHubu

Přidejte svůj pracovní postup

Zkontrolujte své nasazení

Vyčistěte zdroje

Další kroky

Váš názor

Další materiály