Door de server gerenderde websites Nuxt.js op Azure Static Web Apps

Artikel
08/29/2021
4 minuten om te lezen

In deze zelfstudie leert u hoe u een met Nuxt.js gegenereerde statische website implementeert in Azure Static Web Apps. Allereerst leer u hoe u een Nuxt.js-app instelt, configureert en implementeert. Tijdens dit proces leert u ook hoe u omgaat met veelvoorkomende uitdagingen die kunnen optreden bij het genereren van statische pagina’s met Nuxt.js

Vereisten

Een Azure-account met een actief abonnement. Gratis een account maken
Een GitHub-account. Gratis een account maken
Node.js geïnstalleerd.

Een Nuxt.js-app instellen

U kunt een nieuw Nuxt.js-project instellen met behulp van create-nuxt-app. In plaats van een nieuw project begint u in deze zelfstudie met het klonen van een bestaande opslagplaats. Deze opslagplaats wordt ingesteld om te laten zien hoe u een dynamische Nuxt.js-app kunt implementeren als een statische site.

Maak een nieuwe opslagplaats onder uw GitHub-account met behulp van een opslagplaatssjabloon.
Ga naar http://github.com/staticwebdev/nuxtjs-starter/generate
Noem de opslagplaats nuxtjs-starter.
Kloon de nieuwe opslagplaats vervolgens naar de computer. Zorg ervoor dat u < UW_GITHUB_ACCOUNTNAAM> vervangt door de naam van uw account.
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxtjs-starter
```
Ga naar de zojuist gekloonde Nuxt.js-app:
```
cd nuxtjs-starter
```
Afhankelijkheden installeren:
```
npm install
```
Start de Nuxt.js-app in de ontwikkelomgeving:
```
npm run dev
```

Ga naar http://localhost:3000 om de app te openen. Hier ziet u de volgende website geopend in uw voorkeursbrowser:

Nuxt.js-app starten

Wanneer u op een framework/bibliotheek klikt, ziet u een pagina met details over het geselecteerde item:

Pagina Details

Een statische website genereren vanuit een Nuxt.js-build

Wanneer u een Nuxt.js-site bouwt met behulp van npm run build, wordt de app gebouwd als een traditionele web-app, niet als een statische site. Als u een statische site wilt genereren, gebruikt u de volgende toepassingsconfiguratie.

Werk het buildscript van package.json bij om alleen een statische site te genereren met behulp van de opdracht nuxt generate:
```
"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},
```
Nu deze opdracht is uitgevoerd wordt in Static Web Apps het script build uitgevoerd telkens wanneer u een doorvoering pusht.
Een statische site genereren:
```
npm run build
```
Met Nuxt.js wordt de statische site gegenereerd en gekopieerd naar een map dist in de hoofdmap van uw werkmap.

Notitie

Deze map wordt vermeld in het .gitignore-bestand, omdat het moet worden gegenereerd met CI/CD wanneer u implementeert.

Uw statische website naar GitHub pushen

Met Azure Static Web Apps wordt de app geïmplementeerd vanuit een GitHub-opslagplaats. Dit gebeurt bij elke gepushte doorvoering naar een toegewezen vertakking. Gebruik de volgende opdrachten om uw wijzigingen te synchroniseren in GitHub.

Alle gewijzigde bestanden faseren:
```
git add .
```
Alle wijzigingen doorvoeren
```
git commit -m "Update build config"
```
Push uw wijzigingen naar GitHub.
```
git push origin main
```

Uw statische website implementeren

De volgende stappen laten zien hoe u de app die u zojuist naar GitHub hebt gepusht, koppelt aan Azure Static Web Apps. Eenmaal in Azure kunt u de toepassing implementeren in een productieomgeving.

Een resource Azure Static Web Apps maken

Navigeer naar Azure Portal.
Selecteer Een resource maken.
Zoek Static Web Apps.
Selecteer Statische web-apps.
Selecteer Maken.

Voer op het tabblad Basisinformatie de volgende waarden in.

Eigenschap	Waarde
Abonnement	Uw Azure-abonnementnaam.
Resourcegroep	my-nuxtjs-group
Naam	my-nuxtjs-app
Plantype	Gratis
Regio voor Azure Functions API en faseringsomgevingen	Selecteer een regio die het dichtst bij u in de buurt is.
Bron	GitHub

Selecteer Aanmelden met GitHub en verifieren met GitHub.
Voer de volgende GitHub in.

Eigenschap Waarde

Organisatie Selecteer de gewenste GitHub organisatie.

Opslagplaats Selecteer de opslagplaats die u eerder hebt gemaakt.

Vertakking Selecteer hoofd.
Selecteer in de sectie BuildDetails de optie Aangepast in de vervolgkeuzesets voor bouwen en bewaar de standaardwaarden.
Voer in de App-locatie ./ in het vak in.
Laat het vak API-locatie leeg.
Voer in het vak Uitvoerlocatie in.

Eigenschap	Waarde
Organisatie	Selecteer de gewenste GitHub organisatie.
Opslagplaats	Selecteer de opslagplaats die u eerder hebt gemaakt.
Vertakking	Selecteer hoofd.

Controleren en maken

Selecteer de knop Beoordelen en maken om te controleren of de details juist zijn.
Selecteer Maken om te beginnen met het maken van App Service statische web-app en het inrichten van GitHub actie voor implementatie.
Zodra de implementatie is voltooid, klikt u op Naar de resource gaan.
Klik in het Overzichtsvenster op de URL-koppeling om de geïmplementeerde toepassing te openen.

Als de website onmiddellijk wordt geladen, is de werkstroom voor GitHub-acties nog steeds actief op de achtergrond. Zodra de werkstroom is voltooid, klikt u op Browser vernieuwen om de web-app weer te geven.

U kunt de status van de actiewerkstromen controleren door naar de acties voor uw opslagplaats te gaan:

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

Wijzigingen synchroniseren

Toen u de app maakte, is in Azure Static Web Apps een werkstroombestand voor GitHub-acties gemaakt in uw opslagplaats. U moet dit bestand overbrengen naar de lokale opslagplaats zodat de Git-geschiedenis kan worden gesynchroniseerd.

Ga terug naar de terminal en voer de volgende opdracht git pull origin main uit.

Dynamische routes configureren

Ga naar de zojuist geïmplementeerde site en klik op een van de framework- of bibliotheeklogo's. In plaats van een pagina met details ziet u een 404-foutpagina.

404 bij dynamische routes

De reden hiervoor is: toen met Nuxt.js de statische site werd gegenereerd, is dit alleen gebeurd voor de startpagina. Met Nuxt.js kunnen equivalente statische .html-bestanden worden gegenereerd voor elk .vue-paginabestand, met één uitzondering.

Als de pagina een dynamische pagina is, bijvoorbeeld _id.vue, beschikt deze over onvoldoende informatie om een statische HTML te maken van een dergelijke dynamische pagina. U moet dan snel expliciet de mogelijke paden voor de dynamische routes opgeven.

Statische pagina's genereren uit dynamische routes

Werk het bestand nuxt.config.js bij zodat Nuxt.js gebruikmaakt van een lijst met alle beschikbare gegevens om statische pagina’s te genereren voor elk framework/elke bibliotheek:
```
  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;
      }
    }
  };
```
Notitie

routes is een asynchrone functie. U kunt in deze functie dus een aanvraag doen bij een API en de geretourneerde lijst gebruiken om de paden te genereren.
Push de nieuwe wijzigingen naar de GitHub-opslagplaats. Na enkele minuten is uw site opnieuw gebouwd met GitHub-acties. Nadat het bouwen is voltooid, verdwijnt de 404-fout.

Een aangepast domein instellen