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

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. Créez un référentiel sous votre compte GitHub à partir d’un référentiel de modèles.

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

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

  4. 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
    
  5. Accédez à l’application Nuxt.js qui vient d’être clonée :

    cd nuxt-3-starter
    
  6. Installez des dépendances :

    npm install
    
  7. 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, où le site web suivant devrait s’ouvrir dans votre navigateur favori :

Démarrer l’application Nuxt.js

Lorsque vous sélectionnez une infrastructure ou une bibliothèque, vous devez voir une page d’informations détaillées sur l’élément sélectionné :

Page de détails

Générer un site web statique à partir du build Nuxt.js

Quand vous générez un site Nuxt.js en utilisant npm run build, l’application est générée comme une application web traditionnelle, et non comme un site statique. Pour générer un site statique, utilisez la configuration d’application suivante.

  1. Mettez à jour le script de génération du package.json pour générer uniquement un site statique avec la commande nuxt generate :

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

    Maintenant que cette commande est en place, Static Web Apps exécute le script build chaque fois que vous transmettez (push) une validation (commit).

  2. Générez un site statique :

    npm run build
    

    Nuxt.js génère le site statique et le copie dans un dossier dist à la racine de votre répertoire de travail.

    Notes

    Ce dossier est listé dans le fichier .gitignore, car il doit être généré par CI/CD lors du déploiement.

Déployer votre site web statique

La procédure suivante vous indique comment lier Azure Static Web Apps à l’application que vous venez de transmettre à GitHub. Puis, une fois dans Azure, vous pourrez déployer l’application dans un environnement de production.

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 App Service 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. Au terme du workflow, actualisez 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.

Configurer des routages dynamiques

Accédez au site qui vient d’être déployé et sélectionnez l’un des logos d’infrastructure ou de bibliothèque. Au lieu d’obtenir une page détaillant des informations, vous obtenez une page d’erreur 404.

Erreur 404 sur les routages dynamiques

En effet, Nuxt.js n’a généré que la page d'accueil du site statique. Nuxt.js peut générer des fichiers statiques .html équivalents pour chaque fichier de page .vue, mais il existe une exception.

Si la page est une page dynamique, par exemple _id.vue, Nuxt.js n’aura pas assez d’informations pour générer un code HTML statique à partir de cette page dynamique. Vous devez alors fournir explicitement les chemins d’accès possibles pour les routages dynamiques.

Générer des pages statiques à partir de routages dynamiques

  1. Mettez à jour le fichier nuxt.config.js, pour que Nuxt.js utilise une liste de toutes les données disponibles afin de générer des pages statiques pour chaque infrastructure/bibliothèque :

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

    Notes

    routes est une fonction asynchrone. Vous pouvez donc effectuer une requête vers un API dans cette fonction, puis utiliser la liste retournée pour générer les chemins d’accès.

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.