Udostępnij za pośrednictwem

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

  • Artykuł

Z tego samouczka dowiesz się, jak wdrożyć Next.js wygenerowaną statyczną witrynę internetową w Azure Static Web Apps. Aby uzyskać więcej informacji na temat Next.js specyfiki, zobacz readme szablonu początkowego.

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 strony https://github.com/staticwebdev/nextjs-starter/generate

  2. Nadaj repozytorium nazwę nextjs-starter

  3. Następnie sklonuj nowe repozytorium na maszynę. Pamiętaj, aby zastąpić ciąg <YOUR_GITHUB_ACCOUNT_NAME> 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. Rozpocznij Next.js aplikację w programowania.

    npm run dev

  7. Przejdź do strony, aby http://localhost:3000 otworzyć aplikację, w której powinna zostać otwarta następująca witryna 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 Azure Static Web Apps. Na platformie Azure możesz wdrożyć aplikację w środowisku produkcyjnym.

  1. Przejdź do witryny Azure Portal.

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

  3. Wyszukaj Static Web Apps.

  4. Wybierz pozycję Statyczna aplikacja internetowa.

  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-nextjs-group
    Nazwa my-nextjs-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, jeśli zostanie wyświetlony monit.

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

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

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

    Właściwość Wartość
    Lokalizacja aplikacji Wprowadź / w polu .
    Lokalizacja interfejsu API Pozostaw to pole puste.
    Lokalizacja wyjściowa Wprowadź wartość w polu .

3. Przeglądanie 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 App Service 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 adres 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 wdrażanie witryny internetowej.

4. Synchronizowanie zmian

Po utworzeniu aplikacji Azure Static Web Apps utworzyć 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 lokacji statycznej, należy zaktualizować zadanie wdrożenia.

  1. Otwórz repozytorium w Visual Studio Code.

  2. Przejdź do pliku GitHub Actions, który Azure Static Web Apps dodany do 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.

Czyszczenie zasobów

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

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

Następne kroki

Konfigurowanie domeny niestandardowej