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

  • Article

Dans ce tutoriel, apprenez à déployer un site web statique généré Next.js sur Azure Static Web Apps. Pour plus d’informations sur les Next.js spécifiques, consultez le fichier Lisez-moi du modèle de démarrage.

Prérequis

1. Configurer une application Next.js

Au lieu d’utiliser l’interface CLI Next.js pour créer une application, vous pouvez utiliser un référentiel de démarrage. Le référentiel de démarrage contient une application Next.js existante qui prend en charge les itinéraires dynamiques.

Pour commencer, créez un référentiel sous votre compte GitHub à partir d’un référentiel de modèles.

  1. Accédez à https://github.com/staticwebdev/nextjs-starter/generate

  2. Nommez le référentiel nextjs-starter

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

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

  4. Accédez à l’application Next.js qui vient d’être clonée.

    cd nextjs-starter

  5. Installez des dépendances.

    npm install

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

    npm run dev

  7. 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 Next.js

Lorsque vous sélectionnez 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

2. Créer une application statique

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

  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-nextjs-group
    Nom my-nextjs-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 si vous y êtes invité.

  8. Entrez les valeurs GitHub suivantes.

    Propriété Valeur
    Organisation Sélectionnez l’organisation GitHub appropriée.
    Dépôt Sélectionnez nextjs-starter.
    Branche Sélectionnez principal.

  9. Dans la section Détails de build, sélectionnez Personnalisé dans Présélections de build. Ajoutez les valeurs suivantes comme pour la configuration de build.

    Propriété Valeur
    Emplacement de l’application Entrez / dans la zone.
    Emplacement de l’API Laissez cette boîte vide.
    Emplacement de sortie Entrez sortie dans la boîte.

3. Vérifier 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 n’est pas chargé immédiatement, la build est toujours en cours d’exécution. Pour vérifier l’état du workflow Actions, accédez au tableau de bord Actions pour votre référentiel :

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

Une fois le workflow terminé, actualisez votre navigateur pour afficher votre application web.

Désormais, toutes les modifications apportées à la branche main démarrent une nouvelle build et un nouveau déploiement de votre site web.

4. Synchroniser les modifications

Une fois l’application créée, Azure Static Web Apps a créé un fichier GitHub Actions dans votre référentiel. Synchronisez avec le serveur en extrayant la dernière version de votre référentiel local.

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

Configuration du rendu statique

Par défaut, l’application est traitée comme une application de rendu hybride Next.js, mais pour continuer à l’utiliser comme générateur de site statique, vous devez mettre à jour la tâche de déploiement.

  1. Ouvrez le référentiel dans Visual Studio Code.

  2. Accédez au fichier GitHub Actions que Azure Static Web Apps a ajouté à votre référentiel dans .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Mettez à jour la tâche Générer et déployer pour que la variable d’environnement IS_STATIC_EXPORT soit définie sur true :

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Validez les modifications apportées à Git et envoyez-les à GitHub.

    git commit -am "Configuring static site generation" && git push

Une fois la génération terminée, le site est rendu statiquement.

Nettoyer les ressources

Si vous ne prévoyez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en effectuant les étapes suivantes.

  1. Ouvrez le portail Azure.
  2. Recherchez my-nextjs-group dans la barre de recherche supérieure.
  3. Sélectionnez le nom du groupe.
  4. Sélectionnez Supprimer.
  5. Sélectionnez Oui pour confirmer la suppression.

Étapes suivantes

Configurer un nom de domaine personnalisé