Delen via

Nuxt 3-sites implementeren met universele rendering in Azure Static Web Apps

In deze zelfstudie leert u hoe u een Nuxt 3-toepassing implementeert in Azure Static Web Apps. Nuxt 3 biedt ondersteuning voor universele rendering (clientzijde en serverzijde), inclusief server- en API-routes. Zonder extra configuratie kunt u Nuxt 3-apps implementeren met universal rendering naar Azure Static Web Apps. Wanneer de app is ingebouwd in de GitHub Action- of Azure Pipelines-taak van Static Web Apps, converteert Nuxt 3 deze automatisch naar statische assets en een Azure Functions-app die compatibel is met Azure Static Web Apps.

Vereiste voorwaarden

Een Nuxt 3-app instellen

U kunt een nieuw Nuxt-project instellen met behulp van npx nuxi init nuxt-app. In plaats van een nieuw project te gebruiken, gebruikt deze zelfstudie een bestaande opslagplaats die is ingesteld om te laten zien hoe u een Nuxt 3-site implementeert met universal rendering in Azure Static Web Apps.

  1. Navigeer naar http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Geef de opslagplaats de naam nuxt-3-starter.

  3. Kloon vervolgens de nieuwe repository naar je computer. Zorg ervoor dat u YOUR_GITHUB_ACCOUNT_NAME< vervangt door >uw accountnaam.

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

  4. Navigeer naar de zojuist gekloonde Nuxt.js-app:

    cd nuxt-3-starter

  5. Afhankelijkheden installeren:

    npm install

  6. Start Nuxt.js app in ontwikkeling:

    npm run dev -- -o

Navigeer naar http://localhost:3000 het openen van de app. Hier ziet u dat de volgende website is geopend in de browser van uw voorkeur. Selecteer de knoppen om server- en API-routes aan te roepen.

Nuxt.js-app starten

Uw Nuxt 3-site implementeren

De volgende stappen laten zien hoe u een Azure Static Web Apps-resource maakt en configureert om uw app te implementeren vanuit GitHub.

Een Azure Static Web Apps-resource maken

  1. Ga naar de Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek naar Static Web Apps.

  4. Selecteer Static Web Apps.

  5. Klik op Creëren.

  6. Voer op het tabblad Basisinformatie de volgende waarden in.

    Vastgoed Waarde
    Subscription Uw Azure-abonnementnaam.
    Resourcegroep my-nuxtjs-group
    Naam my-nuxt3-app
    Plantype Gratis
    Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die het dichtst bij u in de buurt ligt.
    bron GitHub

  7. Selecteer Aanmelden met GitHub en verifieer met GitHub.

  8. Voer de volgende GitHub-waarden in.

    Vastgoed Waarde
    Organisatie Selecteer de gewenste GitHub-organisatie.
    Opslagplaats Selecteer de repository die je eerder hebt gemaakt.
    Filiaal Selecteer hoofd.

  9. Selecteer in de sectie Builddetails de optie Custom uit de vervolgkeuzelijst Build-voorinstellingen en behoud de standaardwaarden.

  10. Voer in het vak in de / in.

  11. Voer in de API-locatie.output/server in het vak in.

  12. Voer in de uitvoerlocatie.output/public in het vak in.

Beoordelen en creëren

  1. Selecteer Controleren + Maken om te controleren of de details juist zijn.

  2. Selecteer Maken om het maken van de statische web-app te starten en een GitHub Actions in te richten voor implementatie.

  3. Zodra de implementatie is voltooid, selecteert u Ga naar de resource.

  4. Selecteer in het venster Overzicht de URL-koppeling om uw geïmplementeerde toepassing te openen.

Als de website niet onmiddellijk wordt geladen, wordt de werkstroom voor GitHub Actions op de achtergrond nog steeds uitgevoerd. Zodra de werkstroom is voltooid, kunt u de browser vernieuwen om uw webapplicatie weer te geven.

U kunt de status van de Acties-werkstromen controleren door naar de Acties van uw repository te navigeren:

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

Wijzigingen synchroniseren

Wanneer u de app hebt gemaakt, heeft Azure Static Web Apps een GitHub Actions-werkstroombestand in uw opslagplaats gemaakt. Ga terug naar de terminal en voer de volgende opdracht uit om de doorvoer met het nieuwe bestand op te halen.

git pull

Breng wijzigingen aan in de app door de code bij te werken en naar GitHub te pushen. GitHub Actions bouwt en implementeert de app automatisch.

Zie de vooraf ingestelde documentatie voor de implementatie van Azure Static Web Apps Nuxt 3 voor meer informatie.

Een aangepast domein instellen

  • Last updated on