View a markdown version of this page

Déployez une Next.js application pour Amplify Hosting - AWS Amplify Hébergement
Étape 1 : connecter un référentielÉtape 2 : Confirmez les paramètres de compilationÉtape 3 : déployer l'applicationÉtape 4 : nettoyage des ressources (facultatif)Ajoutez des fonctionnalités à votre application

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Déployez une Next.js application pour Amplify Hosting

Ce didacticiel explique comment créer et déployer une Next.js application à partir d'un dépôt Git.

Avant de commencer ce didacticiel, remplissez les conditions préalables suivantes.

Création d’une application

Créez une Next.js application de base à utiliser pour ce didacticiel, en suivant les instructions de création d'une application suivante dans la documentation. Next.js

Création d'un dépôt Git

Amplify prend GitHub en charge Bitbucket GitLab, et. AWS CodeCommit Transférez votre create-next-app application vers votre dépôt Git.

Étape 1 : connecter un dépôt Git

Au cours de cette étape, vous connectez votre Next.js application dans un référentiel Git à Amplify Hosting.

Pour connecter une application dans un référentiel Git

  1. Ouvrez la console Amplify.

  2. Si vous déployez votre première application dans la région actuelle, vous partirez par défaut de la page de AWS Amplify service.

    Choisissez Déployer une application en haut de la page.

  3. Sur la page Commencer à créer avec Amplify, choisissez votre fournisseur de référentiel Git, puis choisissez Next.

    Pour les GitHub référentiels, Amplify utilise la fonction GitHub Apps pour autoriser l'accès à Amplify. Pour plus d'informations sur l'installation et l'autorisation de l' GitHubapplication, consultezConfiguration de l'accès d'Amplify aux référentiels GitHub.

    Note

    Une fois que vous avez autorisé la console Amplify avec Bitbucket GitLab, ou AWS CodeCommit, Amplify récupère un jeton d'accès auprès du fournisseur du référentiel, mais ne le stocke pas sur les serveurs. AWS Amplify accède à votre référentiel à l'aide de clés de déploiement installées dans un référentiel spécifique.

  4. Sur la page Ajouter une branche de référentiel, procédez comme suit :

    1. Sélectionnez le nom du référentiel auquel vous souhaitez vous connecter.

    2. Sélectionnez le nom de la branche du référentiel à connecter.

    3. Choisissez Suivant.

Étape 2 : Confirmez les paramètres de compilation

Amplify détecte automatiquement la séquence de commandes de génération à exécuter pour la branche que vous déployez. Au cours de cette étape, vous vérifiez et confirmez vos paramètres de compilation.

Pour confirmer les paramètres de création d'une application

  1. Sur la page des paramètres de l'application, recherchez la section Paramètres de création.

    Vérifiez que la commande Frontend build et le répertoire de sortie Build sont corrects. Pour cet Next.js exemple d'application, le répertoire de sortie Build est défini sur.next.

  2. La procédure d'ajout d'un rôle de service varie selon que vous souhaitez créer un nouveau rôle ou utiliser un rôle existant.

    • Pour créer un nouveau rôle :

      1. Choisissez Créer et utiliser un nouveau rôle de service.

    • Pour utiliser un rôle existant, procédez comme suit :

      1. Choisissez Utiliser un rôle existant.

      2. Dans la liste des rôles de service, sélectionnez le rôle à utiliser.

  3. Choisissez Suivant.

Étape 3 : déployer l'application

Au cours de cette étape, vous déployez votre application sur le réseau AWS mondial de diffusion de contenu (CDN).

Pour enregistrer et déployer une application

  1. Sur la page Révision, vérifiez que les détails de votre référentiel et les paramètres de l'application sont corrects.

  2. Choisissez Save and deploy (Enregistrer et déployer). La création de votre interface prend généralement 1 à 2 minutes, mais peut varier en fonction de la taille de l'application.

  3. Une fois le déploiement terminé, vous pouvez consulter votre application à l'aide du lien vers le domaine amplifyapp.com par défaut.

Note

Pour renforcer la sécurité de vos applications Amplify, le domaine amplifyapp.com est enregistré dans la liste des suffixes publics (PSL). Pour plus de sécurité, nous vous recommandons d'utiliser des cookies avec un __Host- préfixe si vous devez définir des cookies sensibles dans le nom de domaine par défaut de vos applications Amplify. Cette pratique vous aidera à protéger votre domaine contre les tentatives de falsification de requêtes intersites (CSRF). Pour plus d'informations, consultez la Set-Cookie page du Mozilla Developer Network.

Étape 4 : nettoyage des ressources (facultatif)

Si vous n'avez plus besoin de l'application que vous avez déployée pour le didacticiel, vous pouvez la supprimer. Cette étape permet de vous assurer de ne pas être facturé pour des ressources que vous n’utilisez pas.

Pour supprimer une application

  1. Dans le menu des paramètres de l'application du volet de navigation, choisissez Paramètres généraux.

  2. Sur la page des paramètres généraux, choisissez Supprimer l'application.

  3. Dans la fenêtre de confirmation, entrezdelete. Choisissez ensuite Supprimer l'application.

Ajoutez des fonctionnalités à votre application

Maintenant qu'une application est déployée sur Amplify, vous pouvez explorer certaines des fonctionnalités suivantes disponibles pour votre application hébergée.

Variables d’environnement

Les applications ont souvent besoin d'informations de configuration lors de l'exécution. Ces configurations peuvent être des détails de connexion à la base de données, des clés d'API ou des paramètres. Les variables d'environnement permettent d'exposer ces configurations au moment de la génération. Pour plus d’informations, consultez la section Variables d’environnement.

Domaines personnalisés

Dans ce didacticiel, Amplify héberge votre application pour vous sur le amplifyapp.com domaine par défaut avec une URL telle quehttps://branch-name.d1m7bkiki6tdw1.amplifyapp.com. Lorsque vous connectez votre application à un domaine personnalisé, les utilisateurs voient que votre application est hébergée sur une URL personnalisée, telle quehttps://www.example.com. Pour plus d'informations, consultez la section Configuration de domaines personnalisés.

Aperçus des Pull Request

Les aperçus des demandes d'extraction Web offrent aux équipes un moyen de prévisualiser les modifications apportées par les demandes d'extraction (PR) avant de fusionner le code dans une branche de production ou d'intégration. Pour plus d'informations, consultez la section Aperçus Web pour les pull requests.

Gérer plusieurs environnements

Pour savoir comment Amplify fonctionne avec les branches de fonctionnalités et les GitFlow flux de travail pour prendre en charge plusieurs déploiements, voir Déploiements de branches de fonctionnalités et flux de travail d'équipe.