Nasazení webů Nuxt 3 s univerzálním vykreslováním na Azure Static Web Apps

  • Článek

V tomto kurzu se naučíte nasadit aplikaci Nuxt 3 do Azure Static Web Apps. Nuxt 3 podporuje univerzální vykreslování (na straně klienta i serveru), včetně tras serveru a rozhraní API. Bez další konfigurace můžete nasadit aplikace Nuxt 3 s univerzálním vykreslováním do Azure Static Web Apps. Když je aplikace sestavená v úloze Static Web Apps GitHub Action nebo Azure Pipelines, Nuxt 3 ji automaticky převede na statické prostředky a Azure Functions aplikaci, které jsou kompatibilní s Azure Static Web Apps.

Požadavky

Nastavení aplikace Nuxt 3

Nový projekt Nuxt můžete nastavit pomocí npx nuxi init nuxt-app. Místo použití nového projektu používá tento kurz existující nastavení úložiště, které ukazuje, jak nasadit web Nuxt 3 s univerzálním vykreslováním na Azure Static Web Apps.

  1. Přejděte na adresu http://github.com/staticwebdev/nuxt-3-starter/generate.

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

  3. Pak naklonujte nové úložiště do svého počítače. Nezapomeňte YOUR_GITHUB_ACCOUNT_NAME> nahradit <názvem vašeho účtu.

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

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

    cd nuxt-3-starter

  5. Instalace závislostí:

    npm install

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

    npm run dev -- -o

Přejděte na http://localhost:3000 adresu a otevřete aplikaci, kde byste měli vidět následující web otevřený v upřednostňovaném prohlížeči. Výběrem tlačítek vyvoláte trasy serveru a rozhraní API.

Spuštění aplikace Nuxt.js

Nasazení webu Nuxt 3

Následující kroky ukazují, jak vytvořit prostředek Azure Static Web Apps a nakonfigurovat ho pro nasazení aplikace z GitHubu.

Vytvoření prostředku Azure Static Web Apps

  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-nuxtjs-group
    Název my-nuxt3-app
    Typ plánu Free
    Oblast pro rozhraní API Azure Functions a přípravná prostředí Vyberte oblast, která je k vám nejblíže.
    Zdroj GitHub

  7. Vyberte Přihlásit se pomocí GitHubu a ověřit pomocí GitHubu.

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

    Vlastnost Hodnota
    Organizace Vyberte požadovanou organizaci GitHubu.
    Úložiště Vyberte úložiště, které jste vytvořili dříve.
    Větev Vyberte hlavní.

  9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu Předvolby sestavenímožnost Vlastní a ponechte výchozí hodnoty.

  10. Do pole Umístění aplikace zadejte / .

  11. Do pole Umístění rozhraní API zadejte .output/server .

  12. Do pole Umístění výstupu zadejte .output/public .

Zkontrolovat a vytvořit

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

  2. Výběrem možnosti Vytvořit zahajte vytváření statické webové aplikace a zřiď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 okamžitě nenačte, pracovní postup GitHub Actions na pozadí stále běží. Po dokončení pracovního postupu můžete aktualizovat prohlížeč a zobrazit webovou aplikaci.

Stav pracovních postupů Akce můžete zkontrolovat tak, že přejdete na Akce pro vaše úložiště:

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

Synchronizace změn

Při vytváření aplikace Azure Static Web Apps ve vašem úložišti vytvořili soubor pracovního postupu GitHub Actions. Vraťte se do terminálu a spuštěním následujícího příkazu vyžáděte potvrzení obsahující nový soubor.

git pull

Proveďte změny v aplikaci tak, že aktualizujete kód a nasdílíte ho na GitHub. GitHub Actions aplikaci automaticky sestaví a nasadí.

Další informace najdete v dokumentaci k přednastavení nasazení Azure Static Web Apps Nuxt 3.

Nastavení vlastní domény