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

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową Gatsby w usłudze Azure Static Web Apps. Ostatecznym wynikiem jest nowa witryna usługi Static Web Apps (ze skojarzonymi funkcjami GitHub Actions), która zapewnia kontrolę nad sposobem tworzenia i publikowania aplikacji.

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

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

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

Wymagania wstępne

• 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.
• Zainstalowane środowisko Node.js.

Tworzenie aplikacji Gatsby

Utwórz aplikację Gatsby przy użyciu interfejsu wiersza polecenia narzędzia Gatsby:

1. Otwieranie terminalu

2. Użyj narzędzia npx, aby utworzyć nową aplikację za pomocą interfejsu wiersza polecenia narzędzia Gatsby. Może to potrwać kilka minut.

   npx gatsby new static-web-app
   

3. Przejdź do nowo utworzonej aplikacji

   cd static-web-app
   

4. Inicjowanie repozytorium Git

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

Uwaga

Jeśli używasz najnowszej wersji narzędzia Gatsby, może być konieczne zmodyfikowanie pliku package.json w celu uwzględnienia ciągu "engines": { "node": ">=18.0.0" },

Wypychanie aplikacji do usługi GitHub

Aby utworzyć nowy zasób usługi Azure Static Web Apps, musisz mieć repozytorium w usłudze GitHub.

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

2. Następnie dodaj repozytorium GitHub utworzone właśnie 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>/gatsby-static-web-app
   

3. Wypchnij repozytorium lokalne do usługi GitHub.

   git push --set-upstream origin main
   

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:	my-gatsby-group
   Nazwa/nazwisko	my-gatsby-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ę gatsby-static-web-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ę Gatsby z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.

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.

   

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