Sdílet prostřednictvím

Nasazení statických webů Next.js ve službě Azure Static Web Apps

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

Požadavky

1. Nastavení aplikace Next.js

Místo použití rozhraní příkazového řádku Next.js 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 tím, že vytvoříte nové úložiště pod účtem GitHubu 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. V dalším kroku naklonujte nové úložiště do počítače. Nezapomeňte nahradit <YOUR_GITHUB_ACCOUNT_NAME> názvem vašeho úč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 http://localhost:3000 otevření aplikace, kde byste měli vidět následující web otevřený v preferovaném prohlížeči:

Spuštění aplikace Next.js

Když vyberete framework nebo knihovnu, zobrazí se stránka podrobností o vybrané položce:

Stránka Podrobností

2. Vytvoření statické aplikace

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

  1. Přejděte na webový portál Azure.

  2. Vyberte Vytvořit zdroj.

  3. Vyhledejte statické webové aplikace.

  4. Vyberte statickou webovou aplikaci.

  5. Vyberte Vytvořit.

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

    Vlastnictví Hodnota
    Subscription Název vašeho předplatného Azure
    Skupina zdrojů my-nextjs-group
    název my-nextjs-app
    Typ plánu Bezplatné
    Oblast pro rozhraní API služby Azure Functions a přípravná prostředí Vyberte oblast, která je k vám nejblíže.
    Zdroj GitHub

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

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

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

  9. V části Podrobnosti sestavení vyberte Vlastní z Předvoleb sestavení. Jako konfiguraci sestavení přidejte následující hodnoty.

    Vlastnictví Hodnota
    Umístění aplikace Zadejte / do pole.
    Umístění rozhraní API Nechte toto pole prázdné.
    Umístění výstupu Zadejte out do pole.

3. Prohlédnout a vytvořit

  1. Výběrem možnosti Zkontrolovat a vytvořit ověřte správnost podrobností.

  2. Výběrem možnosti Vytvořit spustíte vytvoření statické webové aplikace služby App Service a zřídíte GitHub Actions pro nasazení.

  3. Po dokončení nasazení, přejděte k prostředku.

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

Pokud se web nenačte okamžitě, sestavení je 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 vytvořili aplikaci, služba Azure Static Web Apps vytvořila v úložišti soubor GitHub Actions. Synchronizujte se serverem tak, že stáhnete nejnovější data 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í aplikaci vykreslenou pomocí Next.js, ale pokud ji chcete dál používat jako generátor statických stránek, musíte aktualizovat nasazovací úlohu.

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

  2. Přejděte do souboru GitHub Actions, který služba Azure Static Web Apps přidala 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 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. 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 vykreslí.

Vyčistěte zdroje

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

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

Další kroky

Nastavení vlastní domény

  • Last updated on