Udostępnij za pomocą

Wdrażanie statycznie renderowanych witryn internetowych Next.js w usłudze Azure Static Web Apps

Z tego samouczka dowiesz się, jak wdrożyć Next.js wygenerowaną statyczną witrynę internetową w usłudze Azure Static Web Apps. Aby uzyskać więcej informacji na temat szczegółów Next.js, zobacz plik readme szablonu startowego.

Wymagania wstępne

1. Konfigurowanie aplikacji Next.js

Zamiast używać interfejsu wiersza polecenia Next.js do tworzenia aplikacji, możesz użyć repozytorium początkowego. Repozytorium początkowe zawiera istniejącą aplikację Next.js, która obsługuje trasy dynamiczne.

Aby rozpocząć, utwórz nowe repozytorium w ramach konta usługi GitHub z repozytorium szablonów.

  1. Przejdź do https://github.com/staticwebdev/nextjs-starter/generate

  2. Nadaj repozytorium nazwę nextjs-starter

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

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

  4. Przejdź do nowo sklonowanej aplikacji Next.js.

    cd nextjs-starter

  5. Instalowanie zależności.

    npm install

  6. Uruchom aplikację Next.js w trybie deweloperskim.

    npm run dev

  7. Przejdź do http://localhost:3000, aby otworzyć aplikację. Powinna się tam otworzyć następująca strona internetowa w preferowanej przeglądarce.

Uruchamianie aplikacji Next.js

Po wybraniu struktury lub biblioteki zostanie wyświetlona strona szczegółów dotycząca wybranego elementu:

Strona szczegółów

2. Tworzenie aplikacji statycznej

W poniższych krokach pokazano, jak połączyć aplikację z usługą Azure Static Web Apps. Po przejściu na platformę Azure możesz wdrożyć aplikację w środowisku produkcyjnym.

  1. Przejdź do portalu Azure.

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

  3. Wyszukaj Static Web Apps.

  4. Wybierz pozycję Statyczna aplikacja internetowa.

  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-nextjs-group
    Nazwa my-nextjs-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ę w usłudze GitHub, jeśli zostanie wyświetlony monit.

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

    Majątek Wartość
    Organizacja Wybierz odpowiednią organizację usługi GitHub.
    Repozytorium Wybierz pozycję nextjs-starter.
    Gałąź Wybierz main.

  9. W sekcji Szczegóły kompilacji wybierz pozycję Niestandardowe z ustawień wstępnych kompilacji. Dodaj następujące wartości dla konfiguracji kompilacji.

    Majątek Wartość
    Lokalizacja aplikacji Wprowadź / w polu .
    Lokalizacja API Pozostaw to pole puste.
    Lokalizacja wyjściowa Wprowadź wyjdź w polu.

3. Przeglądanie 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 Przejdź do zasobu.

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

Jeśli witryna internetowa nie zostanie załadowana natychmiast, kompilacja jest nadal uruchomiona. Aby sprawdzić stan przepływu pracy Akcje, przejdź do pulpitu nawigacyjnego Akcje dla repozytorium:

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

Po zakończeniu przepływu pracy możesz odświeżyć przeglądarkę, aby wyświetlić aplikację internetową.

Teraz wszelkie zmiany wprowadzone w main gałęzi rozpoczynają nową kompilację i wdrożenie witryny internetowej.

4. Synchronizacja zmian

Po utworzeniu aplikacji usługa Azure Static Web Apps utworzyła plik GitHub Actions w repozytorium. Zsynchronizuj z serwerem, ściągając najnowszą wersję do repozytorium lokalnego.

Wróć do terminalu i uruchom następujące polecenie git pull origin main.

Konfigurowanie renderowania statycznego

Domyślnie aplikacja jest traktowana jako aplikacja renderowana hybrydowo Next.js, ale aby nadal używać jej jako generatora witryn statycznych, należy zaktualizować zadanie wdrażania.

  1. Otwórz repozytorium w programie Visual Studio Code.

  2. Przejdź do pliku GitHub Actions, który Azure Static Web Apps dodał do twojego repozytorium pod adresem .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Zaktualizuj zadanie kompilacji i wdrażania , aby mieć zmienną środowiskową IS_STATIC_EXPORT ustawioną na true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Zatwierdź zmiany w usłudze Git i wypchnij je do usługi GitHub.

    git commit -am "Configuring static site generation" && git push

Po zakończeniu kompilacji witryna zostanie statycznie renderowana.

Uprzątnij zasoby

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć wystąpienie usługi Azure Static Web Apps, wykonując następujące kroki.

  1. Otwórz portal Azure.
  2. Wyszukaj ciąg my-nextjs-group na górnym pasku wyszukiwania.
  3. Wybierz nazwę grupy.
  4. Wybierz Usuń.
  5. Wybierz pozycję Tak , aby potwierdzić akcję usuwania.

Dalsze kroki

Konfigurowanie domeny niestandardowej

  • Last updated on