Commencer à utiliser Amplify Hosting

Pour vous aider à comprendre le fonctionnement d'Amplify Hosting, ce didacticiel vous explique comment créer et déployer une application Next.js à partir d'un référentiel Git.

Prérequis

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

Inscrivez-vous pour un Compte AWS

Si vous n'êtes pas encore AWS client, vous devez en créer un Compte AWS en suivant les instructions en ligne. L'inscription vous permet d'accéder à Amplify et à d'autres AWS services que vous pouvez utiliser avec votre application.

Création d’une application

Créez une application Next.js de base à utiliser pour ce didacticiel, en create-next-appsuivant les instructions de la documentation Next.js.

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

Amplify prend en charge GitHub Bitbucket, et GitLab. 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 application Next.js dans un dépôt Git à Amplify Hosting.

Pour connecter une application dans un dépôt 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 Amplifyservice.

   Choisissez Créer une nouvelle application en haut de la page.

3. Sur la page Commencer à créer avec Amplify, choisissez votre fournisseur de dépôt Git, puis choisissez Next.

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

   Note

   Après avoir autorisé la console Amplify avec Bitbucket, or GitLab, AWS CodeCommit Amplify récupère un jeton d'accès auprès du fournisseur de 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 à connecter.

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

   3. Choisissez Suivant.

Étape 2 : Confirmer les paramètres de construction

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 passez en revue et confirmez vos paramètres de compilation.

Pour confirmer les paramètres de génération 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 exemple d'application Next.js, 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 utilisez un nouveau rôle de service.

   • Pour utiliser un rôle existant :

     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 de 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 cela peut varier en fonction de la taille de l'application.

3. Lorsque le déploiement est 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 page Set-Cookie du Mozilla Developer Network.

Étape 4 : (Facultatif) nettoyer les ressources

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, sélectionnez 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 au moment 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 création. 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 que. https://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 par pull request

Les aperçus des pull requests Web permettent aux équipes de prévisualiser les modifications apportées par les pull requests (PR) avant de fusionner le code avec une branche de production ou d'intégration. Pour plus d'informations, consultez les aperçus Web pour les pull requests.

Gérer plusieurs environnements

Pour savoir comment Amplify utilise 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.