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

  • Artykuł

Z tego samouczka dowiesz się, jak wdrożyć aplikację Nuxt 3 w Azure Static Web Apps. Program 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 celu Azure Static Web Apps. Gdy aplikacja jest wbudowana w zadanie Static Web Apps GitHub Action lub Azure Pipelines, narzędzie Nuxt 3 automatycznie konwertuje ją na zasoby statyczne i aplikację Azure Functions zgodną z Azure Static Web Apps.

Wymagania wstępne

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 jest używane istniejące repozytorium skonfigurowane w celu zademonstrowania sposobu wdrażania witryny Nuxt 3 z uniwersalnym renderowaniem na Azure Static Web Apps.

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

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

  3. Następnie sklonuj nowe repozytorium na 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 programowania:

    npm run dev -- -o

Przejdź do http://localhost:3000 witryny , aby otworzyć aplikację, w której powinna zostać otwarta następująca witryna internetowa w preferowanej przeglądarce. Wybierz przyciski, aby wywołać trasy serwera i interfejsu API.

Uruchamianie aplikacji Nuxt.js

Wdrażanie witryny narzędzia Nuxt 3

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

Tworzenie zasobu Azure Static Web Apps

  1. Przejdź do witryny Azure Portal.

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

  3. Wyszukaj Static Web Apps.

  4. Wybierz pozycję Azure Static Web Apps.

  5. Wybierz przycisk Utwórz.

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

    Właściwość Wartość
    Subskrypcja Nazwa subskrypcji platformy Azure.
    Grupa zasobów my-nuxtjs-group
    Nazwa my-nuxt3-app
    Typ planu Bezpłatna
    Region dla interfejsu API Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie.
    Element źródłowy GitHub

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

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

    Właściwość Wartość
    Organizacja Wybierz żądaną organizację usługi GitHub.
    Repozytorium Wybierz utworzone wcześniej repozytorium.
    Gałąź Wybierz pozycję 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 wprowadź / wartość .

  11. W polu Lokalizacja interfejsu API wprowadź ciąg .output/server .

  12. W polu Lokalizacja wyjściowa wprowadź ciąg .output/public .

Przegląd i tworzenie

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

  2. Wybierz pozycję Utwórz, aby rozpocząć tworzenie statycznej aplikacji internetowej i aprowizować 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 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 sekcji Akcje dla repozytorium:

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

Synchronizowanie zmian

Po utworzeniu aplikacji Azure Static Web Apps utworzyć plik przepływu pracy 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. GitHub Actions automatycznie kompiluje i wdraża aplikację.

Aby uzyskać więcej informacji, zobacz dokumentację ustawień wstępnych wdrożenia Azure Static Web Apps Nuxt 3.

Konfigurowanie domeny niestandardowej