Wdrażanie witryny jekyll w usłudze Azure Static Web Apps

  • Artykuł

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową Jekyll w usłudze Azure Static Web Apps.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

  • Tworzenie witryny internetowej usługi Jekyll
  • Konfigurowanie zasobu usługi Azure Static Web Apps
  • Wdrażanie aplikacji Jekyll na platformie Azure

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto platformy Azure.

Wymagania wstępne

  • Instalowanie narzędzia Jekyll
    • W razie potrzeby możesz użyć Podsystem Windows dla systemu Linux i postępować zgodnie z instrukcjami systemu Ubuntu.
  • Konto platformy Azure z aktywną subskrypcją. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
  • Konto usługi GitHub. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
  • Zainstalowano instalatora usługi Git. Jeśli go nie masz, możesz zainstalować narzędzie Git.

Tworzenie aplikacji Jekyll

Utwórz aplikację Jekyll przy użyciu interfejsu wiersza polecenia (CLI):

  1. W terminalu uruchom interfejs wiersza polecenia narzędzia Jekyll, aby utworzyć nową aplikację.

    jekyll new static-app

  2. Przejdź do nowo utworzonej aplikacji.

    cd static-app

  3. Zainicjuj nowe repozytorium Git.

     git init

  4. Zatwierdź zmiany.

    git add -A
git commit -m "initial commit"

Wypychanie aplikacji do usługi GitHub

Usługa Azure Static Web Apps używa usługi GitHub do publikowania witryny internetowej. W poniższych krokach pokazano, jak utworzyć repozytorium GitHub.

  1. Utwórz puste repozytorium GitHub (nie twórz pliku README) na podstawie https://github.com/new nazwy jekyll-azure-static.

  2. Dodaj repozytorium GitHub jako repozytorium zdalne do lokalnego repozytorium. Pamiętaj, aby dodać nazwę użytkownika usługi GitHub zamiast symbolu zastępczego <YOUR_USER_NAME> w poniższym poleceniu.

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static

  3. Wypchnij lokalne repozytorium do usługi GitHub.

    git push --set-upstream origin main

    Uwaga

    Gałąź git może mieć inną nazwę niż main. Zastąp main element w tym poleceniu poprawną wartością.

Wdrażanie aplikacji internetowej

W poniższych krokach pokazano, jak utworzyć nową aplikację witryny statycznej i wdrożyć ją w środowisku produkcyjnym.

Tworzenie aplikacji

  1. Przejdź do witryny Azure Portal.

  2. Wybieranie pozycji Utwórz zasób

  3. Wyszukaj usługę Static Web Apps

  4. Wybieranie pozycji Static Web Apps

  5. Wybierz pozycję Utwórz

  6. Na karcie Podstawy wprowadź następujące wartości.

    Właściwości Wartość
    Subskrypcja Nazwa subskrypcji platformy Azure.
    Grupa zasobów: jekyll-static-app
    Nazwa/nazwisko jekyll-static-app
    Typ planu Bezpłatna
    Region dla interfejsu API usługi Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie.
    Source GitHub

  7. Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się przy użyciu usługi GitHub.

  8. Wprowadź następujące wartości usługi GitHub.

    Właściwości Wartość
    Organizacja Wybierz żądaną organizację usługi GitHub.
    Repozytorium Wybierz pozycję jekyll-static-app.
    Gałąź Wybierz pozycję main.

    Uwaga

    Jeśli nie widzisz żadnych repozytoriów, może być konieczne autoryzowanie usługi Azure Static Web Apps w usłudze GitHub. Przejdź do repozytorium GitHub i przejdź do pozycji aplikacje Ustawienia > Autoryzowane aplikacje> OAuth, wybierz pozycję Azure Static Web Apps, a następnie wybierz pozycję Udziel. W przypadku repozytoriów organizacji musisz być właścicielem organizacji, aby udzielić uprawnień.

  9. W sekcji Szczegóły kompilacji wybierz pozycję Niestandardowe z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.

  10. W polu Lokalizacja aplikacji wprowadź ciąg ./.

  11. Pozostaw puste pole Lokalizacja interfejsu API.

  12. W polu Lokalizacja danych wyjściowych wprowadź _site.

Przegląd i tworzenie

  1. Wybierz pozycję Przejrzyj i utwórz , aby sprawdzić, czy wszystkie szczegóły są poprawne.

  2. Wybierz pozycję Utwórz , aby rozpocząć tworzenie statycznej aplikacji internetowej usługi App Service i aprowizować funkcję GitHub Actions na potrzeby wdrożenia.

  3. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.

  4. Na ekranie zasobu wybierz link URL , aby otworzyć wdrożona aplikację. Może być konieczne odczekanie minuty lub dwóch na ukończenie funkcji GitHub Actions.

    Deployed application

Niestandardowe ustawienia narzędzia Jekyll

Podczas generowania statycznej aplikacji internetowej jest generowany plik przepływu pracy zawierający ustawienia konfiguracji publikowania dla aplikacji.

Aby skonfigurować zmienne środowiskowe, takie jak JEKYLL_ENV, dodaj sekcję env do funkcji GitHub Actions usługi Azure Static Web Apps w przepływie pracy.

- name: Build And Deploy
   id: builddeploy
   uses: Azure/static-web-apps-deploy@v1
   with:
      azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
      repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
      action: "upload"
      ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
      # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć zasób statycznej aplikacji internetowej platformy Azure, wykonując następujące kroki:

  1. Otwórz witrynę Azure Portal .
  2. Na górnym pasku wyszukiwania wyszukaj aplikację według podanej wcześniej nazwy
  3. Kliknij aplikację
  4. Kliknij przycisk Usuń
  5. Kliknij przycisk Tak , aby potwierdzić akcję usuwania

Następne kroki

Dodawanie domeny niestandardowej