Partager via

Déployer des sites web Next.js rendus statiques sur Azure Static Web Apps

Dans ce tutoriel, découvrez comment 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.

Prerequisites

1. Configurer une application Next.js

Au lieu d’utiliser l’interface CLI Next.js pour créer votre application, vous pouvez utiliser un dépôt 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 dépôt 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 dépôt sur votre ordinateur. Veillez à remplacer <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 nouvellement clonée.

    cd nextjs-starter

  5. Installez les dépendances.

    npm install

  6. Démarrez l'application Next.js en mode développement.

    npm run dev

  7. Allez à http://localhost:3000 pour ouvrir l'application ; vous verrez alors le site web suivant s'ouvrir dans votre navigateur préféré :

Démarrer Next.js application

Lorsque vous sélectionnez une infrastructure ou une bibliothèque, vous voyez une page de détails sur l’élément sélectionné :

Page Détails

2. Créer une application statique

Les étapes suivantes montrent comment lier votre application à Azure Static Web Apps. Une fois dans Azure, vous pouvez 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 App.

  5. Cliquez sur Créer.

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

    Propriété Valeur
    Subscription 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 s’authentifier 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.
    Référentiel Sélectionnez nextjs-starter.
    Branche Sélectionnez principal.

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

    Propriété Valeur
    Emplacement de l’application Entrez / dans le champ.
    Emplacement de l’API Laissez cette zone vide.
    Emplacement de sortie Entrez out dans la case.

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 , sélectionnez le lien URL pour ouvrir votre application déployée.

Si le site web ne se charge pas immédiatement, la build est toujours en cours d’exécution. Pour vérifier l’état du flux de travail Actions, accédez au tableau de bord Actions de votre référentiel :

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

Une fois le flux de travail terminé, vous pouvez actualiser le navigateur pour afficher votre application web.

À présent, toutes les modifications apportées sur la branche main démarrent une nouvelle construction et le déploiement de votre site web.

4. Synchroniser les modifications

Lorsque vous avez créé l’application, Azure Static Web Apps a créé un fichier GitHub Actions dans votre dépôt. Synchronisez avec le serveur en téléchargeant la dernière version sur votre dépôt local.

Revenez au terminal et exécutez la commande git pull origin mainsuivante.

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 à l’adresse .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Mettez à jour la tâche Build and Deploy pour avoir une variable d’environnement définie comme suit : IS_STATIC_EXPORTtrue.

        - 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 compilation terminée, le site sera rendu sous forme statique.

Nettoyer les ressources

Si vous ne souhaitez pas continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en procédant comme suit.

  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 l’action de suppression.

Étapes suivantes

Configurer un domaine personnalisé

  • Last updated on