Déployer des sites Nuxt 3 avec un rendu universel sur Azure Static Web Apps

  • Article

Ce tutoriel permet d’apprendre à déployer une application Nuxt 3 sur Azure Static Web Apps. Nuxt 3 prend en charge le rendu universel (côté client et côté serveur), serveur et routes d’API compris. Sans configuration supplémentaire, vous pouvez déployer des applications Nuxt 3 avec un rendu universel sur Azure Static Web Apps. Lorsque l’application est intégrée à la tâche GitHub Action ou Azure Pipelines de Static Web Apps, Nuxt 3 la convertit automatiquement en ressources statiques et en application Azure Functions compatibles avec Azure Static Web Apps.

Prérequis

Configurer une application Nuxt 3

Pour créer un projet Nuxt, utilisez npx nuxi init nuxt-app. Plutôt que d’utiliser un nouveau projet, ce tutoriel utilise une configuration de référentiel existante pour montrer comment déployer un site Nuxt 3 avec un rendu universel sur Azure Static Web Apps.

  1. Accédez à http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Nommez le référentiel nuxt-3-starter.

  3. Ensuite, clonez le nouveau référentiel sur votre ordinateur. Veillez à remplacer <YOUR_GITHUB_ACCOUNT_NAME> par le nom de votre compte.

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

  4. Accédez à l’application Nuxt.js nouvellement clonée :

    cd nuxt-3-starter

  5. Installez des dépendances :

    npm install

  6. Démarrez l’application Nuxt.js dans l’environnement de développement :

    npm run dev -- -o

Accédez à http://localhost:3000 pour ouvrir l’application à partir de laquelle le site Web suivant devrait s’ouvrir dans votre navigateur favori. Sélectionnez les boutons pour solliciter des itinéraires pour le serveur et l’API.

Démarrer l’application Nuxt.js

Déployez votre site Nuxt 3

Les étapes suivantes montrent comment créer une ressource Azure Static Web Apps et la configurer pour le déploiement de votre application depuis GitHub.

Créer une ressource Azure Static Web Apps

  1. Accédez au portail Azure.

  2. Sélectionnez Créer une ressource.

  3. Recherchez Static Web Apps.

  4. Sélectionnez Static Web Apps.

  5. Sélectionnez Create (Créer).

  6. Sous l’onglet Informations de base, entrez les valeurs suivantes.

    Propriété Valeur
    Abonnement Le nom de votre abonnement Azure.
    Groupe de ressources my-nuxtjs-group
    Nom my-nuxt3-app
    Type de plan Gratuit
    Région de l’API Azure Functions et des environnements intermédiaires Sélectionnez la région la plus proche de vous.
    Source GitHub

  7. Sélectionnez Se connecter avec GitHub et authentifiez-vous auprès de GitHub.

  8. Entrez les valeurs GitHub suivantes.

    Propriété Valeur
    Organisation Sélectionnez l’organisation GitHub de votre choix.
    Dépôt Sélectionnez le référentiel que vous avez créé précédemment.
    Branche Sélectionnez principal.

  9. Dans la section Détails de build, sélectionnez Personnalisé dans la liste déroulante Présélections de build et conservez les valeurs par défaut.

  10. Dans Emplacement de l’application, entrez / dans la case.

  11. Dans le champ Emplacement de l’API, entrez .output/server.

  12. Dans le champ Emplacement de sortie, entrez .output/public.

Examiner et créer

  1. Sélectionnez Vérifier + créer pour vérifier que les informations sont correctes.

  2. Pour démarrer la création de l’application web statique et le provisionnement d’un GitHub Actions pour le déploiement, sélectionnez Créer.

  3. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

  4. Dans la fenêtre Vue d’ensemble, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée.

Si le site Web ne se charge pas immédiatement, c’est que le workflow GitHub Actions est toujours en cours d’exécution en arrière-plan. Une fois le workflow terminé, actualisez ensuite votre navigateur pour afficher votre application Web.

Vous pouvez vérifier l’état des workflow Actions en accédant aux actions de votre référentiel :

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

Synchroniser les changements

Une fois l’application créée, Azure Static Web Apps a créé un fichier de workflow GitHub Actions dans votre référentiel. Revenez au terminal et exécutez la commande suivante pour extraire la validation (commit) contenant le nouveau fichier.

git pull

Apportez des modifications à l’application en mettant à jour le code et en l’envoyant (push) à GitHub. GitHub Actions génère et déploie automatiquement l’application.

Pour plus d’informations, consultez la documentation Azure Static Web Apps sur la présélection du déploiement Nuxt 3.

Configurer un nom de domaine personnalisé