Sdílet prostřednictvím

Nasazení webů Nuxt 3 s univerzálním vykreslováním ve službě Azure Static Web Apps

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 a na straně 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 integrovaná v akci GitHubu Static Web Apps nebo v úloze Azure Pipelines, Nuxt 3 ji automaticky převede na statické prostředky a aplikaci Azure Functions, která je kompatibilní se službou Azure Static Web Apps.

Požadavky

Nastavení aplikace Nuxt 3

Můžete nastavit nový projekt Nuxt pomocí npx nuxi init nuxt-app. Místo použití nového projektu tento kurz používá existující úložiště nastavené k předvedení nasazení webu Nuxt 3 s univerzálním vykreslováním ve službě Azure Static Web Apps.

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

  2. Pojmenujte úložiště nuxt-3-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>/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í aplikace Nuxt.js v režimu vývoje:

    npm run dev -- -o

Přejděte na http://localhost:3000, abyste otevřeli aplikaci, kde byste měli vidět následující webovou stránku otevřenou ve svém preferovaném prohlížeči. Vyberte tlačítka pro vyvolání tras serveru a rozhraní API.

Spuštění aplikace Nuxt.js

Nasazení webu Nuxt 3

Následující postup ukazuje, 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 zdroj.

  3. Vyhledejte statické webové aplikace.

  4. Vyberte Static Web Apps.

  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-nuxtjs-group
    název my-nuxt3-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. Vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.

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

    Vlastnictví 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 sestavení vyberte v rozevíracím seznamu Předvolby sestaveníVlastní a ponechte výchozí hodnoty.

  10. Zadejte do pole umístění aplikace .

  11. V umístění rozhraní API zadejte .output/server do políčka.

  12. Do pole Výstupní umístění zadejte .output/public.

Zkontrolujte a vytvořte

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

  2. Vyberte Vytvořit pro spuštění vytvoření statické webové aplikace a zřízení GitHub Actions pro nasazení.

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

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

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

Stav pracovních postupů Akcí 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

Když jste aplikaci vytvořili, služba Azure Static Web Apps vytvořila ve vašem úložišti soubor pracovního postupu GitHub Actions. Vraťte se do terminálu a spuštěním následujícího příkazu stáhněte potvrzení obsahující nový soubor.

git pull

Aktualizujte kód a nasdílejte ho do GitHubu a proveďte změny v aplikaci. GitHub Actions automaticky sestaví a nasadí aplikaci.

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

Nastavení vlastní domény

  • Last updated on