Nasazení webů vykreslených staticky Next.js na Azure Static Web Apps

  • Článek
  • 2 min ke čtení

V tomto kurzu zjistíte, jak nasadit Next.js vygenerovaný statický web do Azure Static Web Apps. Další informace o Next.js najdete v souboru readme úvodní šablony.

Požadavky

Nastavení Next.js aplikace

Místo použití Next.js CLI k vytvoření aplikace můžete použít počáteční úložiště. Počáteční úložiště obsahuje existující Next.js, která podporuje dynamické trasy.

Začněte tím, že ve svém účtu GitHub nové úložiště z úložiště šablon.

  1. Přejděte na . https://github.com/staticwebdev/nextjs-starter/generate

  2. Pojmete úložiště nextjs-starter.

  3. V dalším kroku naklonovat nové repo do počítače. Nezapomeňte nahradit <YOUR_GITHUB_ACCOUNT_NAME> názvem svého účtu.

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

  4. Přejděte do nově naklonované Next.js aplikace:

    cd nextjs-starter

  5. Instalace závislostí:

    npm install

  6. Spuštění Next.js ve vývoji:

    npm run dev

Přejděte na a otevřete aplikaci, kde by se měl v upřednostňovaném prohlížeči http://localhost:3000 otevřít následující web:

Spuštění Next.js aplikace

Když vyberete rozhraní nebo knihovnu, zobrazí se stránka s podrobnostmi o vybrané položce:

Stránka podrobností

Nasazení statického webu

Následující kroky ukazují, jak propojit aplikaci s Azure Static Web Apps. Jakmile budete v Azure, můžete aplikaci nasadit do produkčního prostředí.

Vytvoření statické aplikace

  1. Přejděte na Azure Portal.

  2. Vyberte Vytvořit prostředek.

  3. Vyhledejte Static Web Apps.

  4. Vyberte staické webové aplikace (Static Web Apps).

  5. Vyberte Vytvořit.

  6. Na kartě Základy zadejte následující hodnoty.

    Vlastnost Hodnota
    Předplatné Název vašeho předplatného Azure.
    Skupina prostředků my-nextjs-group
    Název my-nextjs-app
    Typ plánu Free
    Oblast pro Azure Functions API a pracovní prostředí Vyberte oblast, která je k vám nejblíže.
    Zdroj GitHub

  7. Vyberte Sign in with GitHub and authenticate with GitHub (Přihlásit se pomocí GitHub).

  8. Zadejte následující GitHub hodnoty.

    Vlastnost Hodnota
    Organizace Vyberte odpovídající GitHub organizaci.
    Úložiště Vyberte nextjs-starter.
    Větev Vyberte hlavní .

  9. V části Build Details (Podrobnosti o sestavení) v části Build Presets (Předvolby sestavení) vyberte Custom (Vlastní). Přidejte následující hodnoty jako pro konfiguraci sestavení.

    Vlastnost Hodnota
    Umístění aplikace Do / pole zadejte .
    Umístění rozhraní API Ponechte toto pole prázdné.
    Umístění výstupu Do pole zadejte .

Zkontrolovat a vytvořit

  1. Výběrem tlačítka Zkontrolovat a vytvořit ověřte správnost podrobností.

  2. Výběrem možnosti Vytvořit spusťte vytváření App Service statické webové aplikace a zřízení GitHub nasazení.

  3. Po dokončení nasazení vyberte Přejít k prostředku.

  4. V okně Přehled vyberte odkaz URL a otevřete nasazenou aplikaci.

Pokud se web nenačte okamžitě, je sestavení stále spuštěné. Po dokončení pracovního postupu můžete aktualizovat prohlížeč a zobrazit webovou aplikaci.

Pokud chcete zkontrolovat stav pracovního postupu Akce, přejděte na řídicí panel Akce pro vaše úložiště:

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

Všechny změny provedené ve main větvi teď spustí nové sestavení a nasazení vašeho webu.

Synchronizace změn

Když jste vytvořili aplikaci, Azure Static Web Apps v úložišti GitHub soubor Akcí. Proveďte synchronizaci se serverem tak, že do místního úložiště přetáhnete nejnovější verzi.

Vraťte se do terminálu a spusťte následující příkaz git pull origin main .

Vyčištění prostředků

Pokud tuto aplikaci nadále používat odstraňovat Azure Static Web Apps pomocí následujících kroků:

  1. Otevřete Azure Portal.
  2. Na horním panelu hledání vyhledejte my-nextjs-group.
  3. Vyberte název skupiny.
  4. Vyberte tlačítko Odstranit.
  5. Výběrem ano potvrďte akci odstranění.

Nastavení vlastní domény