Wdrażanie hybrydowych witryn internetowych Next.js w usłudze Azure Static Web Apps (wersja zapoznawcza)

Z tego samouczka dowiesz się, jak wdrożyć witrynę internetową Next.js w usłudze Azure Static Web Apps, korzystając z obsługi funkcji Next.js, takich jak renderowanie po stronie serwera (SSR) i trasy interfejsu API.

Uwaga

Next.js obsługa hybrydowa jest dostępna w wersji zapoznawczej z ograniczoną obsługą Next.js w wersji 13 lub nowszej.

Wymagania wstępne

Nieobsługiwane funkcje w wersji zapoznawczej

W wersji zapoznawczej następujące funkcje usługi Static Web Apps nie są obsługiwane w przypadku Next.js z renderowaniem po stronie serwera:

  • Interfejsy API korzystające z usług Azure Functions, aplikacja systemu Azure Service, Azure Container Apps lub Azure API Management.
  • Wdrażanie za pośrednictwem interfejsu wiersza polecenia programu SWA.
  • Usługa Static Web Apps zapewniała uwierzytelnianie i autoryzację.
    • Zamiast tego możesz użyć funkcji uwierzytelniania Next.js.
  • Plik staticwebapp.config.json .
    • Funkcje, takie jak nagłówki niestandardowe i routing, można kontrolować przy użyciu next.config.js pliku.
  • skip_app_build i skip_api_build nie można go użyć.
  • Regeneracja statyczna przyrostowa (ISR) nie obsługuje buforowania obrazów i ponownego odnawiania na żądanie
  • Next.js wersji 13 lub nowszej mają ograniczoną obsługę renderowania hybrydowego. Statyczny eksport HTML jest w pełni obsługiwany.

Uwaga

Maksymalny rozmiar aplikacji dla aplikacji hybrydowej Next.js wynosi 100 MB. Używanie funkcji autonomicznej przez Next.js dla zoptymalizowanych rozmiarów aplikacji. Jeśli nie jest to wystarczające, rozważ użycie wyeksportowanego statycznego kodu HTML Next.js , jeśli wymaganie dotyczące rozmiaru aplikacji jest większe niż 100 MB.

Konfigurowanie aplikacji Next.js

Rozpocznij od zainicjowania nowej aplikacji Next.js.

  1. Zainicjuj aplikację przy użyciu polecenia npm init. Jeśli zostanie wyświetlony monit o zainstalowanie create-next-apppolecenia , powiedz tak.

    npm init next-app@next-12-3-2 --typescript
    
  2. Po wyświetleniu monitu o nazwę aplikacji wprowadź ciąg nextjs-app.

  3. Przejdź do folderu zawierającego nową aplikację:

    cd nextjs-app
    
  4. Uruchom aplikację Next.js w programowania:

    npm run dev
    

    Przejdź do witryny , aby http://localhost:3000 otworzyć aplikację, w której powinna zostać otwarta następująca witryna internetowa w przeglądarce:

    Screenshot of a Next.js app running in the browser.

  5. Zatrzymaj serwer deweloperów, naciskając klawisze CMD/CTRL + C.

Konfigurowanie aplikacji Next.js na potrzeby wdrażania w usłudze Static Web Apps

Aby skonfigurować aplikację Next.js na potrzeby wdrażania w usłudze Static Web Apps, włącz funkcję autonomiczną dla projektu Next.js w next.config.js pliku. Ten krok zmniejsza rozmiar projektu Next.js, aby upewnić się, że jest on niższy niż limity rozmiaru dla usługi Static Web Apps. Aby uzyskać więcej informacji, zapoznaj się z sekcją autonomiczną .

module.exports = {
    output: "standalone",
}

Wdrażanie aplikacji Next.js

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.

Tworzenie repozytorium GitHub

Przed wdrożeniem na platformie Azure należy utworzyć repozytorium GitHub i wypchnąć aplikację w górę.

  1. Przejdź do https://github.com/new i nadaj jej nazwę nextjs-app.

  2. Z poziomu terminalu na maszynie zainicjuj lokalne repozytorium git i zatwierdź zmiany przy użyciu następującego polecenia.

    git init && git add -A && git commit -m "initial commit"
    
  3. Dodaj repozytorium jako zdalne i wypchnij zmiany do serwera.

    git remote add origin https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-app && git push -u origin main
    

    Podczas uruchamiania tego polecenia pamiętaj, aby zastąpić <YOUR_GITHUB_USERNAME> ciąg nazwą użytkownika usługi GitHub.

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium możesz utworzyć statyczną aplikację internetową w witrynie Azure Portal.

  1. Przejdź do witryny Azure Portal.
  2. Wybierz pozycję Utwórz zasób.
  3. Wyszukaj pozycję Static Web Apps.
  4. Wybierz pozycję Azure Static Web Apps.
  5. Wybierz pozycję Utwórz.

W sekcji Podstawy rozpocznij od skonfigurowania nowej aplikacji i połączenia jej z repozytorium GitHub.

Screenshot of the Static Web Apps Basics tab in the Azure portal.

  1. Wybierz swoją subskrypcję platformy Azure.
  2. Obok pozycji Grupa zasobów wybierz link Utwórz nową.
  3. Wprowadź ciąg static-web-apps-test w polu tekstowym.
  4. W obszarze Szczegóły statycznej aplikacji internetowej wprowadź ciąg my-first-static-web-app w polu tekstowym.
  5. W obszarze Azure Functions i szczegóły przejściowe wybierz region najbliżej Ciebie.
  6. W obszarze Szczegóły wdrożenia wybierz pozycję GitHub.
  7. Wybierz przycisk Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się w usłudze GitHub.

Po zalogowaniu się w usłudze GitHub wprowadź informacje o repozytorium.

Repository details

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

    Właściwości Wartość
    Organizacja Wybierz odpowiednią organizację usługi GitHub.
    Repozytorium Wybierz pozycję nextjs-app.
    Gałąź Wybierz pozycję main.
  2. W sekcji Szczegóły kompilacji wybierz pozycję Next.js z ustawień wstępnych kompilacji i zachowaj wartości domyślne.

Przegląd i tworzenie

  1. Wybierz przycisk 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ć akcję usługi GitHub 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 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-app/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.

Uwaga

Jeśli masz problemy z wdrażaniem aplikacji hybrydowej Next.js o rozmiarze ponad 100 Mb, użyj standalone funkcji Next.js. Aby uzyskać więcej informacji, zapoznaj się z sekcją autonomiczną .

Synchronizuj zmiany

Po utworzeniu aplikacji usługa Azure Static Web Apps utworzyła plik funkcji 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.

Dodawanie danych renderowanych przez serwer

Aby wstawić dane renderowane przez serwer danych do strony Next.js, należy najpierw wyeksportować funkcję specjalną.

  1. Otwórz plik pages/index.ts i dodaj wyeksportowaną funkcję o nazwie getServerSideProps.

    export async function getServerSideProps() {
        const data = JSON.stringify({ time: new Date() });
        return { props: { data } };
    }
    
  2. Zaktualizuj składnik, Home aby odbierał dane renderowane przez serwer.

    export default function Home({ data }: { data: { time: string } }) {
        const serverData = JSON.parse(data);
    
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                        Welcome to <a href="https://nextjs.org">Next.js! The time is {serverData.time}</a>
                    </h1>
                // snip
    
  3. Zatwierdzanie i wypychanie zmian.

Po wypchnięciu zmian rozpocznie się nowy przepływ pracy funkcji GitHub Actions i zmiany zostaną wdrożone w witrynie.

Dodawanie trasy interfejsu API

Next.js ma trasy interfejsu API, które są alternatywą dla usługi Azure Functions do tworzenia interfejsów API dla aplikacji klienckiej Next.js.

Zacznij od dodania trasy interfejsu API.

  1. Utwórz nowy plik na stronach/interfejsie API/time.ts.

  2. Dodaj funkcję obsługi, aby zwrócić dane z interfejsu API.

    import type { NextApiRequest, NextApiResponse } from "next";
    
    export default async function handler(req: NextApiRequest, res: NextApiResponse) {
        res.status(200).json({ time: new Date() });
    }
    
  3. Otwórz strony/index.ts , aby dodać wywołanie interfejsu API i wyświetlić wynik.

    export default function Home({ data }: { data: { time: string } }) {
        const [time, setTime] = useState<Date | null>(null);
        useEffect(() => {
            fetch('/api/time')
            .then(res => res.json())
            .then(json => setTime(new Date(json.time)));
        }, []);
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                    Welcome to{" "}
                    <a href="https://nextjs.org">
                        Next.js!{" "}
                        {time &&
                        `The time is ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`}
                    </a>
                    </h1>
                    // snip
    }
    
  4. Wynik trasy interfejsu API zostanie wyświetlony na stronie.

Display the output from the API route

Włączanie funkcji autonomicznej

Gdy rozmiar aplikacji przekracza 100 Mb, funkcja Next.js śledzenia plików wyjściowych pomaga zoptymalizować rozmiar aplikacji i zwiększyć wydajność.

Śledzenie plików wyjściowych tworzy skompresowaną wersję całej aplikacji z niezbędnymi zależnościami pakietów wbudowanymi w folder o nazwie .next/standalone. Ten folder ma zostać wdrożony samodzielnie bez dodatkowych node_modules zależności.

Aby włączyć standalone tę funkcję, dodaj następującą dodatkową właściwość do elementu next.config.js:

module.exports ={
    output:"standalone",
}

Włączanie rejestrowania dla Next.js

Postępując zgodnie z najlepszymi rozwiązaniami dotyczącymi rozwiązywania problemów z interfejsem API serwera Next.js, dodaj rejestrowanie do interfejsu API, aby przechwycić te błędy. Rejestrowanie na platformie Azure używa Szczegółowe informacje aplikacji. Aby wstępnie załadować ten zestaw SDK, należy utworzyć niestandardowy skrypt uruchamiania. Dodatkowe informacje:

Czyszczenie zasobów

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 czynności:

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