Udostępnij za pośrednictwem

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

  • Artykuł

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.

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.

Generowanie poświadczeń wdrożenia

Utwórz jednostkę usługi za pomocą polecenia az ad sp create-for-rbac w interfejsie wiersza polecenia platformy Azure. Uruchom to polecenie za pomocą usługi Azure Cloud Shell w witrynie Azure Portal lub wybierając przycisk Wypróbuj .

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

Parametr --json-auth jest dostępny w wersjach >interfejsu wiersza polecenia platformy Azure = 2.51.0. Wersje przed tym użyciem --sdk-auth z ostrzeżeniem o wycofaniu.

W powyższym przykładzie zastąp symbole zastępcze identyfikatorem subskrypcji, nazwą grupy zasobów i nazwą aplikacji. Dane wyjściowe to obiekt JSON z poświadczeniami przypisania roli, które zapewniają dostęp do aplikacji usługi App Service podobnej do poniższej. Skopiuj ten obiekt JSON do późniejszego użycia.

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

Konfigurowanie wpisów tajnych usługi GitHub

  1. W usłudze GitHub przejdź do repozytorium.

  2. Przejdź do Ustawienia w menu nawigacji.

  3. Wybierz pozycję Wpisy tajne zabezpieczeń > i zmienne > Akcje.

    Screenshot of adding a secret

  4. Wybierz pozycję Nowy wpis tajny repozytorium.

  5. 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.

  6. Wybierz przycisk Add secret (Dodaj wpis tajny).

Dodawanie przepływu pracy

  1. Przejdź do pozycji Akcje dla repozytorium GitHub.

    GitHub Actions menu item

  2. Wybierz pozycję Skonfiguruj przepływ pracy samodzielnie.

  3. 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 ]

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

  5. 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"

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

Przeglądanie wdrożenia

  1. Przejdź do pozycji Akcje dla repozytorium GitHub.

  2. Otwórz pierwszy wynik, aby wyświetlić szczegółowe dzienniki przebiegu przepływu pracy.

    Log of GitHub Actions run

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