Wdrażanie witryn Nuxt 3 z uniwersalnym renderowaniem w usłudze Azure Static Web Apps

Z tego samouczka dowiesz się, jak wdrożyć aplikację Nuxt 3 w usłudze Azure Static Web Apps. Narzędzie Nuxt 3 obsługuje renderowanie uniwersalne (po stronie klienta i po stronie serwera), w tym trasy serwera i interfejsu API. Bez dodatkowej konfiguracji można wdrażać aplikacje Nuxt 3 z uniwersalnym renderowaniem w usłudze Azure Static Web Apps. Gdy aplikacja jest budowana za pomocą GitHub Action dla Static Web Apps lub zadania Azure Pipelines, Nuxt 3 automatycznie konwertuje ją na zasoby statyczne i aplikację Azure Functions zgodną z Azure Static Web Apps.

Wymagania wstępne

• Konto Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
• Konto usługi GitHub. Utwórz konto bezpłatnie.
• Node.js w wersji 16 lub nowszej zainstalowany.

Konfigurowanie aplikacji Nuxt 3

Nowy projekt Nuxt można skonfigurować przy użyciu polecenia npx nuxi init nuxt-app. Zamiast korzystać z nowego projektu, w tym samouczku użyto istniejącego repozytorium skonfigurowanego w celu zademonstrowania sposobu wdrażania witryny Nuxt 3 z uniwersalnym renderowaniem w usłudze Azure Static Web Apps.

1. Przejdź do strony http://github.com/staticwebdev/nuxt-3-starter/generate.

2. Nadaj repozytorium nazwę nuxt-3-starter.

3. Następnie sklonuj nowe repozytorium na Twoją lokalną maszynę. Pamiętaj, aby zastąpić <YOUR_GITHUB_ACCOUNT_NAME> nazwą konta.

   git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter
   

4. Przejdź do nowo sklonowanej aplikacji Nuxt.js:

   cd nuxt-3-starter
   

5. Zainstaluj zależności:

   npm install
   

6. Uruchom aplikację Nuxt.js w trybie deweloperskim:

   npm run dev -- -o
   

Przejdź do http://localhost:3000 w celu otwarcia aplikacji, w której powinna być wyświetlona następująca strona internetowa w preferowanej przeglądarce. Wybierz przyciski, aby wywołać ścieżki serwera i API.

Wdróż witrynę Nuxt 3

W poniższych krokach pokazano, jak utworzyć zasób usługi Azure Static Web Apps i skonfigurować go do wdrożenia aplikacji z usługi GitHub.

Tworzenie zasobu usługi Azure Static Web Apps

1. Przejdź do Portalu Azure.

2. Wybierz pozycję Utwórz zasób.

3. Wyszukaj Static Web Apps.

4. Wybierz pozycję Static Web Apps( Statyczne aplikacje internetowe).

5. Wybierz Utwórz.

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

   Majątek	Wartość
   Subscription	Nazwa subskrypcji platformy Azure.
   Grupa zasobów	my-nuxtjs-group
   Nazwa	my-nuxt3-app
   Typ planu	Bezpłatna
   Region dla interfejsu API usługi Azure Functions i środowisk przejściowych	Wybierz region najbliżej Ciebie.
   Źródło	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.

   Majątek	Wartość
   Organizacja	Wybierz żądaną organizację usługi GitHub.
   Repozytorium	Wybierz utworzone wcześniej repozytorium.
   Gałąź	Wybierz main.

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 wpisz /.

11. W polu lokalizacja API wpisz .output/server.

12. W lokalizacji Wyjściowej wprowadź .output/public w polu.

Przejrzyj i twórz

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 i aprowizować funkcję GitHub Actions na potrzeby wdrożenia.

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

4. W oknie Przegląd wybierz link URL , aby otworzyć wdrożona aplikację.

Jeśli witryna internetowa nie zostanie natychmiast załadowana, przepływ pracy funkcji GitHub Actions w tle jest nadal uruchomiony. Po zakończeniu przepływu pracy możesz odświeżyć przeglądarkę, aby wyświetlić aplikację internetową.

Stan przepływów pracy Akcje można sprawdzić, przechodząc do pozycji Akcje dla repozytorium:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Synchronizowanie zmian

Po utworzeniu aplikacji usługa Azure Static Web Apps utworzyła plik przepływu pracy funkcji GitHub Actions w repozytorium. Wróć do terminalu i uruchom następujące polecenie, aby ściągnąć zatwierdzenie zawierające nowy plik.

git pull

Wprowadź zmiany w aplikacji, aktualizując kod i wypychając go do usługi GitHub. Funkcja GitHub Actions automatycznie kompiluje i wdraża aplikację.

Aby uzyskać więcej informacji, zobacz dokumentację ustawień wstępnych wdrażania usługi Azure Static Web Apps Nuxt 3.

Konfigurowanie domeny niestandardowej