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

  • Artikel

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

Vereisten

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, wordt in deze zelfstudie gebruikgemaakt van een bestaande opslagplaats die is ingesteld om te laten zien hoe u een Nuxt 3-site implementeert met universele rendering op 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 de nieuwe opslagplaats vervolgens naar de 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. Ga naar de zojuist gekloonde Nuxt.js-app:

    cd nuxt-3-starter

  5. Afhankelijkheden installeren:

    npm install

  6. Start de Nuxt.js-app in de ontwikkelomgeving:

    npm run dev -- -o

Ga naar http://localhost:3000 om de app te openen, waar u de volgende website moet zien 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

In de volgende stappen ziet u hoe u een Azure Static Web Apps-resource maakt en configureert om uw app vanuit GitHub te implementeren.

Een Azure Static Web Apps-resource maken

  1. Navigeer naar Azure Portal.

  2. Selecteer Een resource maken.

  3. Zoek Static Web Apps.

  4. Selecteer Statische web-apps.

  5. Selecteer Maken.

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

    Eigenschap Waarde
    Abonnement 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.

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

  9. Selecteer in de sectie Builddetailsde optie Aangepast in de vervolgkeuzelijst Build-voorinstellingen en behoud de standaardwaarden.

  10. Voer / in de app-locatie in het vak in.

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

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

Controleren en maken

  1. Selecteer Controleren en maken om te controleren of de details correct 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 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 op de achtergrond GitHub Actions nog steeds uitgevoerd. Zodra de werkstroom is voltooid, kunt u de browser vernieuwen om uw 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>/nuxt-3-starter/actions

Wijzigingen synchroniseren

Toen u de app maakte, is in Azure Static Web Apps een werkstroombestand voor GitHub-acties gemaakt in uw opslagplaats. Ga terug naar de terminal en voer de volgende opdracht uit om de doorvoer op te halen die het nieuwe bestand bevat.

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 documentatie over vooraf ingestelde Azure Static Web Apps Nuxt 3-implementatie voor meer informatie.

Een aangepast domein instellen