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

Artykuł
10/22/2023

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

W terminalu uruchom interfejs wiersza polecenia narzędzia Jekyll, aby utworzyć nową aplikację.
```
jekyll new static-app
```
Przejdź do nowo utworzonej aplikacji.
```
cd static-app
```
Zainicjuj nowe repozytorium Git.
```
 git init
```

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.

Utwórz puste repozytorium GitHub (nie twórz pliku README) na podstawie https://github.com/new nazwy jekyll-azure-static.
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
```
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

Przejdź do witryny Azure Portal.
Wybieranie pozycji Utwórz zasób
Wyszukaj usługę Static Web Apps
Wybieranie pozycji Static Web Apps
Wybierz pozycję Utwórz

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

Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się przy użyciu usługi GitHub.
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ń.
W sekcji Szczegóły kompilacji wybierz pozycję Niestandardowe z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.
W polu Lokalizacja aplikacji wprowadź ciąg ./.
Pozostaw puste pole Lokalizacja interfejsu API.
W polu Lokalizacja danych wyjściowych wprowadź _site.

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

Przegląd i tworzenie

Wybierz pozycję Przejrzyj i utwórz , aby sprawdzić, czy wszystkie szczegóły są poprawne.
Wybierz pozycję Utwórz , aby rozpocząć tworzenie statycznej aplikacji internetowej usługi App Service i aprowizować funkcję GitHub Actions na potrzeby wdrożenia.
Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.
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.

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:

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

Następne kroki

Dodawanie domeny niestandardowej

Udostępnij za pośrednictwem