Nasazení Nuxt.js webů vygenerovaných serverem ve službě Azure static Web Apps

Článek
08/29/2021
4 min ke čtení

V tomto kurzu se naučíte nasadit Nuxt.js generovaný statický web do služby Azure static Web Apps. Pokud chcete začít, naučíte se, jak nastavit, nakonfigurovat a nasadit aplikaci Nuxt.js. Během tohoto procesu se naučíte také řešit běžné výzvy, které se často vyskytují při generování statických stránek pomocí Nuxt.js

Požadavky

Účet Azure s aktivním předplatným. Vytvořte si účet zdarma.
Účet GitHub. Vytvořte si účet zdarma.
Node.js nainstalován.

Nastavení aplikace Nuxt.js

Můžete nastavit nový Nuxt.js projekt pomocí create-nuxt-app . Místo nového projektu můžete v tomto kurzu začít klonovat stávající úložiště. Toto úložiště je nastavené tak, aby předvedlo, jak nasadit dynamickou aplikaci Nuxt.js jako statickou lokalitu.

vytvořte nové úložiště pod účtem GitHub z úložiště šablon.
Přejít na http://github.com/staticwebdev/nuxtjs-starter/generate
Pojmenujte úložiště nuxtjs-Starter.
Pak na svém počítači naklonujte nové úložiště. Nezapomeňte nahradit <YOUR_GITHUB_ACCOUNT_NAME> název svého účtu.
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxtjs-starter
```
Přejděte do nově naklonované Nuxt.js aplikace:
```
cd nuxtjs-starter
```
Závislosti instalace:
```
npm install
```
Spustit aplikaci Nuxt.js ve vývoji:
```
npm run dev
```

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

Spustit aplikaci Nuxt.js

Když kliknete na architekturu nebo knihovnu, měla by se zobrazit Stránka s podrobnostmi o vybrané položce:

Stránka podrobností

Vygenerování statického webu z Nuxt.js sestavení

Když vytváříte lokalitu Nuxt.js pomocí nástroje npm run build , je aplikace sestavena jako tradiční webová aplikace, nikoli jako statická lokalita. Chcete-li vygenerovat statickou lokalitu, použijte následující konfiguraci aplikace.

Aktualizujte package.js skript sestavení tak, aby vygeneroval pouze statickou lokalitu pomocí nuxt generate příkazu:
```
"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},
```
Když je tento příkaz na místě, statický Web Apps spustí build skript při každém vložení potvrzení změn.
Generovat statický web:
```
npm run build
```
Nuxt.js vygeneruje statický web a zkopíruje ho do složky DIST v kořenovém adresáři vašeho pracovního adresáře.

Poznámka

Tato složka je uvedena v souboru . gitignore , protože při nasazení by měla být generována pomocí CI/CD.

Vložení statického webu do GitHub

Azure Static Web Apps nasadí vaši aplikaci z úložiště GitHub a zachová se tak pro všechna vložená potvrzení do určené větve. Pomocí následujících příkazů Synchronizujte změny GitHub.

Připravit všechny změněné soubory:
```
git add .
```
Potvrdit všechny změny
```
git commit -m "Update build config"
```
Doručovat změny do GitHub.
```
git push origin main
```

Nasazení statického webu

následující kroky ukazují, jak propojit aplikaci, kterou jste právě odeslali, do GitHub ke statickým Web Appsm Azure. V Azure můžete aplikaci nasadit do produkčního prostředí.

Vytvoření prostředku statického Web Apps Azure

Přejděte na Azure Portal.
Vyberte Vytvořit prostředek.
Vyhledejte statické Web Apps.
Vyberte staické webové aplikace (Static Web Apps).
Vyberte Vytvořit.

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

Vlastnost	Hodnota
Předplatné	Název vašeho předplatného Azure.
Skupina prostředků	Moje nuxtjs-Group
Název	My-nuxtjs-App
Typ plánu	Free
Oblast pro Azure Functions rozhraní API a přípravná prostředí	Vyberte oblast, která je pro vás nejblíže.
Zdroj	GitHub

vyberte možnost přihlásit se pomocí GitHub a ověřit pomocí GitHub.
zadejte následující hodnoty GitHub.

Vlastnost Hodnota

Organizace vyberte požadovanou organizaci GitHub.

Úložiště Vyberte úložiště, které jste vytvořili dříve.

Větev Vyberte Main (Hlavní).
V části Podrobnosti o sestavení vyberte v rozevíracím seznamu přednastavení sestavení položku vlastní a ponechejte výchozí hodnoty.
Do umístění aplikace zadejte do pole ./ .
Pole umístění rozhraní API nechte prázdné.
Do pole výstupní umístění Zadejte.

Vlastnost	Hodnota
Organizace	vyberte požadovanou organizaci GitHub.
Úložiště	Vyberte úložiště, které jste vytvořili dříve.
Větev	Vyberte Main (Hlavní).

Zkontrolovat a vytvořit

Kliknutím na tlačítko Revize + vytvořit ověřte správnost podrobností.
výběrem možnosti vytvořit zahájíte vytváření App Servicech statických webových aplikací a zřídíte GitHub akci pro nasazení.
Až se nasazení dokončí, přejděte na prostředek.
V okně Přehled klikněte na odkaz URL a otevřete nasazenou aplikaci.

pokud si web nahraje okamžitě, pak je pracovní postup GitHub akcí na pozadí stále spuštěný. Po dokončení pracovního postupu můžete kliknutím na aktualizovat prohlížeč zobrazit webovou aplikaci.

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

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

Synchronizovat změny

při vytváření aplikace se v úložišti Azure Static Web Apps vytvořil soubor pracovního postupu GitHub actions. Tento soubor budete muset přenést do místního úložiště, aby se synchronizoval historie Gitu.

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

Konfigurace dynamických tras

Přejděte k nově nasazenému webu a klikněte na jedno z log rozhraní nebo loga knihovny. Místo toho, abyste získali stránku s podrobnostmi, dostanete chybovou stránku 404.

404 na dynamických trasách

Důvodem je, Nuxt.js vygenerovali statickou lokalitu, pouze pro domovskou stránku. Nuxt.js může generovat ekvivalentní statické .html soubory pro každý .vue soubor stránky, ale dojde k výjimce.

Pokud se jedná o dynamickou stránku, například _id.vue nebude mít dostatek informací, aby vygenerovala statický kód HTML z takové dynamické stránky. Budete muset explicitně zadat možné cesty pro dynamické trasy.

Generování statických stránek z dynamických tras

Aktualizujte soubor nuxt.config.js tak, aby Nuxt.js používal seznam všech dostupných dat pro generování statických stránek pro každé rozhraní nebo knihovnu:

  import { projects } from "./utils/projectsData";

  export default {
    mode: "universal",

    //...truncated

    generate: {
      async routes() {
        const paths = [];

        projects.forEach(project => {
          paths.push(`/project/${project.slug}`);
        });

        return paths;
      }
    }
  };

Poznámka

routes je asynchronní funkce, takže můžete vytvořit požadavek na rozhraní API v této funkci a použít vrácený seznam k vygenerování cest.

nahrajte nové změny do úložiště GitHub a počkejte pár minut, než GitHub akce znovu vytvoří váš web. Po dokončení sestavení se zobrazí chyba 404.

Nastavení vlastní domény