Déployer des sites web Nuxt.js au rendu statique sur Azure Static Web Apps

Ce tutoriel permet d’apprendre à déployer un site web statique généré Nuxt.js sur Azure Static Web Apps. Pour commencer, vous apprendrez à créer, configurer et déployer une application Nuxt.js. Au cours de ce processus, vous apprendrez aussi à gérer les problèmes courants rencontrés lors de la génération de pages statiques avec Nuxt.js

Prérequis

Créer une application Nuxt.js

Pour créer un projet Nuxt.js, utilisez create-nuxt-app. Dans ce tutoriel, au lieu de partir à zéro, vous clonez un référentiel existant. Ce référentiel est créé de telle sorte qu’il constitue un parfait exemple de déploiement d’une application Nuxt.js dynamique en tant que site statique.

  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/nuxtjs-starter/generate.

  3. Nommez le référentiel nuxtjs-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>/nuxtjs-starter
    
  5. Accédez à l’application Nuxt.js nouvellement clonée :

    cd nuxtjs-starter
    
  6. Installez des dépendances :

    npm install
    
  7. Démarrez l’application Nuxt.js dans l’environnement de développement :

    npm run dev
    

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 cliquez sur une infrastructure ou une bibliothèque, vous devez voir une page détaillant des informations 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-nuxtjs-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 ./ .

  11. Laissez la zone Emplacement de l’API vide.

  12. Dans la zone Emplacement de la sortie, entrez dist.

Examiner et créer

  1. Pour vérifier que les informations sont correctes, sélectionnez le bouton Vérifier + créer.

  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é, cliquez sur Accéder à la ressource.

  4. Dans la fenêtre Overview (Présentation), 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. Lorsqu’il sera terminé, 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>/nuxtjs-starter/actions

Synchroniser les modifications

Une fois l’application créée, Azure Static Web Apps a créé un fichier de workflow GitHub Actions dans votre référentiel. Vous devez placer ce fichier dans votre référentiel local pour synchroniser votre historique git.

Revenez au terminal et exécutez la commande suivante : git pull origin main.

Configurer des routages dynamiques

Accédez au site qui vient d’être déployé et cliquez sur l’un des logos de l’infrastructure ou de la 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.

  2. Transmettez les nouvelles modifications à votre référentiel GitHub, puis patientez quelques minutes pendant que GitHub Actions génère à nouveau votre site. Une fois la génération terminée, l’erreur 404 disparaît.

    Résolution de l’erreur 404 sur les routages dynamiques