Det här är ett exempel på hur man ställer in en Nuxt-applikation eller statisk webbplats från ett GitHub-kodförråd för distribuering på Kinsta’s tjänster för Applikationshosting eller hosting av statiska webbplatser.

Nuxt är ett webbutvecklings-ramverk med öppen källkod som låter dig bygga renderade Vue-applikationer och statiska webbplatser på serversidan. Mer information finns på Nuxt’s hemsida.

Under distribueringsprocessen så installerar Kinsta automatiskt de beroenden som definieras i din package.json-fil.

Hosting av statiska webbplatser

  1. Logga in på GitHub och skapa ett nytt kodförråd från den här mallen (Använd den här mallen > Skapa ett nytt kodförråd): Kinsta – Hello World – NuxtJS.
  2. I MyKinsta, lägg till en statisk webbplats med Hello World – NuxtJS-kodförrådet och följande Bygg-inställningar:
    • Byggkommando: npm run generate
    • Nodversion: 18.16.0
    • Publicerings-katalog: .output/public
  3. Webbplatsen är tillgänglig så fort som bygget är klart, och Hello world-sidan laddas på din webbplats webbadress.

Applikationshosting

  1. Logga in på GitHub och skapa ett nytt arkiv från den här mallen (Använd den här mallen > Skapa ett nytt arkiv): Kinsta – Hello World – NuxtJS.
  2. I MyKinsta så lägger du till en applikation med Hello World – NuxtJS-arkivet. Start-kommandot kan lämnas tomt för webb-processen eftersom Kinsta upptäcker det nödvändiga kommandot automatiskt under den första distribueringen.
  3. Appen är tillgänglig så snart som bygget är klar, och Hello world-sidan laddas på din applikations webbadress.

Inställning av webbserver

Port

Kinsta ställer in miljövariabeln PORT automatiskt. Du behöver inte definiera den eller hårdkoda den i applikationen.

Start-kommando

När du distribuerar applikationen så skapar Kinsta automatiskt en webbprocess med npm start som start-kommando.

Livscykel för distribuering

Närhelst som en distribuering inleds (genom att skapa en applikation eller omdistribuera på grund av ett inkommande utförande) så körs kommandot npm build, följt av kommandot npm start.

Hello World-sida

Appen är tillgänglig så snart som bygget är klart, och Hello World-sidan laddas på din applikations webbadress eller webbplatsens webbadress.

Nuxt’s Hello World-sida efter en lyckad distribuering.
Nuxt’s Hello World-sida efter en lyckad distribuering.