Sdílet prostřednictvím

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

  • Článek

V tomto kurzu se naučíte nasadit statický web vygenerovanýNext.js pro Azure Static Web Apps. Další informace o Next.js specifikách najdete v úvodní šabloně readme.

Požadavky

1. Nastavení aplikace Next.js

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 aplikaci, která podporuje dynamické trasy.

Začněte vytvořením nového úložiště v rámci účtu GitHub z úložiště šablon.

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

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

  3. Pak naklonujte nové úložiště 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é aplikace Next.js.

    cd nextjs-starter

  5. Nainstalujte závislosti.

    npm install

  6. Spusťte Next.js aplikaci ve vývoji.

    npm run dev

  7. Přejděte na a http://localhost:3000 otevřete aplikaci, kde byste měli vidět následující web otevřený v upřednostňovaném prohlížeči:

Spustit aplikaci Next.js

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

Stránka podrobností

2. Vytvoření statické aplikace

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

  1. Přejděte na Azure Portal.

  2. Vyberte Vytvořit prostředek.

  3. Vyhledejte Static Web Apps.

  4. Vyberte Static Web App (Static Web App).

  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 rozhraní API Azure Functions a přípravná prostředí Vyberte oblast, která je vám nejblíže.
    Zdroj GitHub

  7. Pokud se zobrazí výzva, vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.

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

    Vlastnost Hodnota
    Organizace Vyberte příslušnou organizaci GitHubu.
    Úložiště Vyberte nextjs-starter.
    Větev Vyberte hlavní.

  9. V části Podrobnosti o sestavení vyberte v předvolbách sestavenímožnost 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 Toto pole nechejte prázdné.
    Umístění výstupu Do pole zadejte ven .

3. Kontrola a vytvoření

  1. Vyberte Zkontrolovat a vytvořit a ověřte správnost podrobností.

  2. Výběrem možnosti Vytvořit zahájíte vytváření App Service Static Web App a zřídíte GitHub Actions pro 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é. 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

Po dokončení pracovního postupu můžete aktualizovat prohlížeč a zobrazit webovou aplikaci.

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

4. Synchronizace změn

Když jste aplikaci vytvořili, Azure Static Web Apps v úložišti vytvořili soubor GitHub Actions. Synchronizujte se serverem stažením nejnovějších dat do místního úložiště.

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

Konfigurace statického vykreslování

Ve výchozím nastavení se aplikace považuje za hybridní vykreslenou Next.js aplikaci, ale pokud ji chcete dál používat jako generátor statické lokality, musíte aktualizovat úlohu nasazení.

  1. Otevřete úložiště v editoru Visual Studio Code.

  2. Přejděte na soubor GitHub Actions, který Azure Static Web Apps přidán do úložiště na adrese.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Aktualizujte úlohu Sestavení a nasazení tak, aby měla proměnnou prostředí nastavenou IS_STATIC_EXPORT na truehodnotu :

        - 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. Potvrďte změny do Gitu a nasdílejte je do GitHubu.

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

Po dokončení sestavení se web staticky vykresluje.

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

Pokud tuto aplikaci nebudete dál používat, můžete instanci Azure Static Web Apps odstranit následujícím postupem.

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

Další kroky

Nastavení vlastní domény