Distribuera serverre renderade Nuxt.js webbplatser på Azure Static Web Apps

I den här självstudien lär du dig att distribuera enNuxt.js statisk webbplats till Azure Static Web Apps. Först lär du dig att konfigurera, konfigurera och distribuera en Nuxt.js app. Under den här processen lär du dig också att hantera vanliga utmaningar när du genererar statiska sidor med Nuxt.js

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
• Ett GitHub-konto. Skapa ett konto utan kostnad.
• Node.js installerat.

Konfigurera en Nuxt.js app

Du kan konfigurera ett nytt Nuxt.js projekt med create-nuxt-app . I stället för ett nytt projekt börjar du i den här självstudien med att klona en befintlig lagringsplats. Den här lagringsplatsen är konfigurerad för att demonstrera hur du distribuerar en Nuxt.js app som en statisk webbplats.

1. Skapa en ny lagringsplats under ditt GitHub konto från en malldatabas.

2. Gå till http://github.com/staticwebdev/nuxtjs-starter/generate

3. Ge lagringsplatsen namnet nuxtjs-starter.

4. Klona sedan den nya lagringsplatsen till datorn. Se till att ersätta <YOUR_GITHUB_ACCOUNT_NAME> med ditt kontonamn.

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

5. Gå till den nyligen klonade Nuxt.js appen:

   cd nuxtjs-starter
   

6. Installera beroenden:

   npm install
   

7. Börja Nuxt.js app under utveckling:

   npm run dev
   

Gå till http://localhost:3000 för att öppna appen, där du bör se att följande webbplats är öppen i önskad webbläsare:

När du klickar på ett ramverk/bibliotek bör du se en informationssida om det valda objektet:

Generera en statisk webbplats från Nuxt.js build

När du skapar en Nuxt.js webbplats med npm run build , byggs appen som en traditionell webbapp, inte en statisk webbplats. Använd följande programkonfiguration för att generera en statisk plats.

1. Uppdaterapackage.js på build-skriptet för att endast generera en statisk plats med hjälp av nuxt generate kommandot :

   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt generate"
   },
   

   Nu när det här kommandot är Static Web Apps kör skriptet build varje gång du push-genomför.

2. Generera en statisk plats:

   npm run build
   

   Nuxt.js den statiska platsen och kopierar den till en dist-mapp i roten av arbetskatalogen.

   Anteckning

   Den här mappen visas i .gitignore-filen eftersom den ska genereras av CI/CD när du distribuerar.

Skicka din statiska webbplats till GitHub

Azure Static Web Apps distribuerar din app från en GitHub-lagringsplats och fortsätter att göra det för varje push-push-genomförande till en angiven gren. Använd följande kommandon för att synkronisera ändringarna till GitHub.

1. Mellanfasa alla ändrade filer:

   git add .
   

2. Genomför alla ändringar

   git commit -m "Update build config"
   

3. Skicka ändringarna till GitHub.

   git push origin main
   

Distribuera din statiska webbplats

Följande steg visar hur du länkar appen som du just push-överförde till GitHub till Azure Static Web Apps. I Azure kan du distribuera programmet till en produktionsmiljö.

Skapa en Azure Static Web Apps resurs

1. Gå till Azure Portal.

2. Välj Skapa en resurs.

3. Sök efter Static Web Apps.

4. Välj Static Web Apps.

5. Välj Skapa.

6. Ange följande värden på fliken Grundläggande inställningar.

   Egenskap	Värde
   Prenumeration	Ditt Azure-prenumerationsnamn.
   Resursgrupp	my-nuxtjs-group
   Namn	my-nuxtjs-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj den region som är närmast dig.
   Källa	GitHub

7. Välj Logga in med GitHub och autentisera med GitHub.

8. Ange följande GitHub värden.

   Egenskap	Värde
   Organisation	Välj önskad GitHub organisation.
   Lagringsplats	Välj den lagringsplats som du skapade tidigare.
   Gren	Välj main.

9. I avsnittet Build Details (Bygginformation) väljer du Custom (Anpassad) i listrutan Build Presets (Byggförinställningar) och behåller standardvärdena.

10. På appplatsen anger du ./ i rutan.

11. Lämna rutan Api-plats tom.

12. I rutan Utdataplats anger du .

Granska och skapa

1. Välj knappen Granska + skapa för att kontrollera att informationen är korrekt.

2. Välj Skapa för att börja skapa App Service Static Web App och etablera en GitHub åtgärd för distribution.

3. När distributionen är klar klickar du på Gå till resurs.

4. I fönstret Översikt klickar du på URL-länken för att öppna det distribuerade programmet.

Om webbplatsen läser in omedelbart körs GitHub åtgärdsarbetsflödet. När arbetsflödet är klart kan du klicka på Uppdatera webbläsaren för att visa webbappen.

Du kan kontrollera statusen för åtgärdsarbetsflödena genom att gå till Åtgärder för din lagringsplats:

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

Synkronisera ändringar

När du skapade appen skapade Azure Static Web Apps en arbetsflödesfil GitHub Actions på lagringsplatsen. Du måste ta ned den här filen till din lokala lagringsplats så att din git-historik synkroniseras.

Gå tillbaka till terminalen och kör följande kommando git pull origin main .

Konfigurera dynamiska vägar

Gå till den nyligen distribuerade webbplatsen och klicka på någon av ramverks- eller bibliotekslogotyperna. I stället för att få en informationssida får du en 404-felsida.

Anledningen till detta är att Nuxt.js genererade den statiska webbplatsen, men det gjorde det bara för startsidan. Nuxt.js kan generera motsvarande .html statiska filer för .vue varje sidfil, men det finns ett undantag.

Om sidan är en dynamisk sida, till exempel , har den inte tillräckligt med information för att _id.vue generera en statisk HTML från en sådan dynamisk sida. Du måste uttryckligen ange möjliga sökvägar för de dynamiska vägarna.

Generera statiska sidor från dynamiska vägar

1. Uppdatera nuxt.config.js så att Nuxt.js använder en lista över alla tillgängliga data för att generera statiska sidor för varje ramverk/bibliotek:

     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;
         }
       }
     };
   

   Anteckning

   routes är en asynkron funktion, så du kan göra en begäran till ett API i den här funktionen och använda den returnerade listan för att generera sökvägarna.

2. Push-skicka de nya ändringarna GitHub lagringsplatsen och vänta några minuter medan GitHub Actions skapar webbplatsen igen. När bygget är klart försvinner 404-felet.