Wdrażanie statycznej witryny internetowej w usłudze Azure Storage przy użyciu przepływu pracy funkcji GitHub Actions

Artykuł
02/25/2025

Rozpocznij pracę z funkcją GitHub Actions przy użyciu przepływu pracy, aby wdrożyć statyczną witrynę na koncie usługi Azure Storage. Po skonfigurowaniu przepływu pracy funkcji GitHub Actions będzie można automatycznie wdrożyć witrynę na platformie Azure z usługi GitHub po wprowadzeniu zmian w kodzie witryny.

Uwaga

Jeśli używasz usługi Azure Static Web Apps, nie musisz ręcznie konfigurować przepływu pracy funkcji GitHub Actions. Usługa Azure Static Web Apps automatycznie tworzy przepływ pracy funkcji GitHub Actions.

Wymagania wstępne

Subskrypcja platformy Azure i konto usługi GitHub.

Konto platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
Repozytorium GitHub ze statycznym kodem witryny internetowej. Jeśli nie masz konta usługi GitHub, zarejestruj się bezpłatnie.
Działająca statyczna witryna internetowa hostowana w usłudze Azure Storage. Dowiedz się, jak hostować statyczną witrynę internetową w usłudze Azure Storage. Aby postępować zgodnie z tym przykładem, należy również wdrożyć usługę Azure CDN.

Uwaga

Często używa się sieci dostarczania zawartości (CDN), aby zmniejszyć opóźnienia dla użytkowników na całym świecie i zmniejszyć liczbę transakcji na koncie magazynu. Wdrażanie zawartości statycznej w usłudze magazynu w chmurze może zmniejszyć potrzebę potencjalnie kosztownego wystąpienia obliczeniowego. Aby uzyskać więcej informacji, zobacz Wzorzec hostingu zawartości statycznej.

Aby użyć akcji logowania platformy Azure z funkcją OIDC, należy skonfigurować poświadczenie tożsamości federacyjnej w aplikacji Microsoft Entra lub tożsamości zarządzanej przypisanej przez użytkownika.

Opcja 1. Aplikacja Firmy Microsoft Entra

Utwórz aplikację Firmy Microsoft Entra przy użyciu jednostki usługi według witryny Azure Portal, interfejsu wiersza polecenia platformy Azure lub programu Azure PowerShell.
Skopiuj wartości identyfikatora klienta, identyfikatora subskrypcji i identyfikatora katalogu (dzierżawy), aby użyć ich później w przepływie pracy funkcji GitHub Actions.
Przypisz odpowiednią rolę do jednostki usługi za pomocą witryny Azure Portal, interfejsu wiersza polecenia platformy Azure lub programu Azure PowerShell.
Skonfiguruj poświadczenie tożsamości federacyjnej w aplikacji Microsoft Entra w celu zaufania tokenów wystawionych przez funkcję GitHub Actions do repozytorium GitHub.

Opcja 2. Tożsamość zarządzana przypisana przez użytkownika

Utwórz tożsamość zarządzaną przypisaną przez użytkownika.
Skopiuj wartości identyfikatora klienta, identyfikatora subskrypcji i identyfikatora katalogu (dzierżawy), aby użyć ich później w przepływie pracy funkcji GitHub Actions.
Przypisz odpowiednią rolę do tożsamości zarządzanej przypisanej przez użytkownika.
Skonfiguruj poświadczenia tożsamości federacyjnej w tożsamości zarządzanej przypisanej przez użytkownika do tokenów zaufania wystawionych przez funkcję GitHub Actions w repozytorium GitHub.

Konfigurowanie wpisów tajnych usługi GitHub

OpenID Connect
Jednostka usługi

Musisz podać identyfikator klienta aplikacji, identyfikator katalogu (dzierżawy) i identyfikator subskrypcji do akcji logowania. Te wartości można podać bezpośrednio w przepływie pracy lub przechowywać w wpisach tajnych usługi GitHub i odwoływać się do nich w przepływie pracy. Zapisanie wartości jako wpisów tajnych usługi GitHub jest bezpieczniejszą opcją.

W usłudze GitHub przejdź do repozytorium.
Wybierz pozycję Wpisy tajne zabezpieczeń > i zmienne > Akcje.
Wybierz pozycję Nowy wpis tajny repozytorium.

Uwaga

Aby zwiększyć bezpieczeństwo przepływu pracy w repozytoriach publicznych, użyj wpisów tajnych środowiska zamiast wpisów tajnych repozytorium. Jeśli środowisko wymaga zatwierdzenia, zadanie nie może uzyskać dostępu do wpisów tajnych środowiska, dopóki jeden z wymaganych recenzentów go nie zatwierdzi.

Utwórz wpisy tajne dla , AZURE_CLIENT_IDAZURE_TENANT_IDi AZURE_SUBSCRIPTION_ID. Skopiuj te wartości z aplikacji Microsoft Entra lub tożsamości zarządzanej przypisanej przez użytkownika dla wpisów tajnych usługi GitHub:

Wpis tajny usługi GitHub	Aplikacja Microsoft Entra lub tożsamość zarządzana przypisana przez użytkownika
AZURE_CLIENT_ID	Client ID
AZURE_SUBSCRIPTION_ID	Identyfikator subskrypcji
AZURE_TENANT_ID	Identyfikator katalogu (dzierżawcy)

Uwaga

Ze względów bezpieczeństwa zalecamy używanie wpisów tajnych usługi GitHub zamiast przekazywania wartości bezpośrednio do przepływu pracy.

W usłudze GitHub przejdź do repozytorium.
Przejdź do pozycji Ustawienia w menu nawigacji.
Wybierz pozycję Wpisy tajne zabezpieczeń > i zmienne > Akcje.
Wybierz pozycję Nowy wpis tajny repozytorium.
Wklej całe dane wyjściowe JSON z polecenia interfejsu wiersza polecenia platformy Azure do pola wartości wpisu tajnego. Nadaj wpisowi tajnym nazwę AZURE_CREDENTIALS.
Wybierz przycisk Add secret (Dodaj wpis tajny).

Dodawanie przepływu pracy

OpenID Connect
Jednostka usługi

Przejdź do pozycji Akcje dla repozytorium GitHub.
Wybierz pozycję Skonfiguruj przepływ pracy samodzielnie.
Usuń wszystko po on: sekcji pliku przepływu pracy. Na przykład pozostały przepływ pracy może wyglądać następująco.
```
name: CI with OpenID Connect

on:
    push:
        branches: [ main ]
```

Dodaj sekcję uprawnień.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

Dodaj akcje wyewidencjonowania i logowania. Te akcje wyewidencjonują kod witryny i uwierzytelniają się na platformie Azure przy użyciu utworzonych wcześniej wpisów tajnych usługi GitHub.

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

Użyj akcji interfejsu wiersza polecenia platformy Azure, aby przekazać kod do magazynu obiektów blob i przeczyścić punkt końcowy usługi CDN. W polu az storage blob upload-batchzastąp symbol zastępczy nazwą konta magazynu. Skrypt zostanie przekazany do kontenera $web . W polu az cdn endpoint purgezastąp symbole zastępcze nazwą profilu usługi CDN, nazwą punktu końcowego usługi CDN i grupą zasobów. Aby przyspieszyć przeczyszczanie sieci CDN, możesz dodać --no-wait opcję do az cdn endpoint purge. Aby zwiększyć bezpieczeństwo, możesz również dodać --account-key opcję przy użyciu klucza konta magazynu.
```
    - 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"
```

Ukończ przepływ pracy, dodając akcję w celu wylogowania się z platformy Azure. Oto ukończony przepływ pracy. Plik zostanie wyświetlony w .github/workflows folderze repozytorium.

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

Przejdź do pozycji Akcje dla repozytorium GitHub.
Wybierz pozycję Skonfiguruj przepływ pracy samodzielnie.
Usuń wszystko po on: sekcji pliku przepływu pracy. Na przykład pozostały przepływ pracy może wyglądać następująco.
```
name: CI

on:
    push:
        branches: [ main ]
```
Zmień nazwę przepływu pracy Blob storage website CI i dodaj akcje wyewidencjonowania i logowania. Te akcje wyewidencjonują kod witryny i uwierzytelniają się na platformie Azure przy użyciu utworzonego wcześniej wpisu tajnego AZURE_CREDENTIALS usługi GitHub.
```
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 }}
```
Użyj akcji interfejsu wiersza polecenia platformy Azure, aby przekazać kod do magazynu obiektów blob i przeczyścić punkt końcowy usługi CDN. W polu az storage blob upload-batchzastąp symbol zastępczy nazwą konta magazynu. Skrypt zostanie przekazany do kontenera $web . W polu az cdn endpoint purgezastąp symbole zastępcze nazwą profilu usługi CDN, nazwą punktu końcowego usługi CDN i grupą zasobów. Aby przyspieszyć przeczyszczanie sieci CDN, możesz dodać --no-wait opcję do az cdn endpoint purge. Aby zwiększyć bezpieczeństwo, możesz również dodać --account-key opcję przy użyciu klucza konta magazynu.
```
    - 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"
```

Ukończ przepływ pracy, dodając akcję w celu wylogowania się z platformy Azure. Oto ukończony przepływ pracy. Plik zostanie wyświetlony w .github/workflows folderze repozytorium.

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

Przeglądanie wdrożenia

Przejdź do pozycji Akcje dla repozytorium GitHub.
Otwórz pierwszy wynik, aby wyświetlić szczegółowe dzienniki przebiegu przepływu pracy.

Czyszczenie zasobów

Gdy statyczna witryna internetowa i repozytorium GitHub nie są już potrzebne, wyczyść wdrożone zasoby, usuwając grupę zasobów i repozytorium GitHub.

Następne kroki

Dowiedz się więcej o usłudze Azure Static Web Apps

Udostępnij za pośrednictwem

Wdrażanie statycznej witryny internetowej w usłudze Azure Storage przy użyciu przepływu pracy funkcji GitHub Actions

Wymagania wstępne

Generowanie poświadczeń wdrożenia

Konfigurowanie wpisów tajnych usługi GitHub

Dodawanie przepływu pracy

Przeglądanie wdrożenia

Czyszczenie zasobów

Następne kroki

Opinia

Dodatkowe zasoby