Déployer une application web sur Amazon Amplify

GUIDE DE DÉMARRAGE

Module 3 : Automatiser le déploiement

Dans ce module, vous déployez votre application web à l'aide du pipeline CI/CD intégré d'Amplify.

Introduction

Dans ce module, vous stockez votre application dans un référentiel GitHub, puis configurez le déploiement continu à l'aide de la console Amplify.

Qu'allez-vous apprendre ?

  • Connecter un référentiel Github à Amplify
  • Configurer le déploiement continu à l'aide d'Amplify

 Durée

5 minutes

 Prérequis du module

  • Compte AWS avec accès administrateur**
  • Dernière version de Chrome ou de Firefox (recommandé)

[**] Il est possible que les comptes créés au cours des dernières 24 heures n'aient pas encore accès aux services nécessaires à ce tutoriel.

Implémentation

Stocker le projet sur GitHub

Avant de configurer votre projet en vue d'un déploiement automatique des mises à jour, vous devez l'héberger dans un emplacement. Ce guide repose sur l'hypothèse que vous maîtrisez GitHub, y avez un compte et savez comment créer un nouveau référentiel privé. Créez un référentiel privé, puis transférez-y le code que vous avez créé précédemment.

Configurer le déploiement continu

Pour configurer Amplify afin de déployer votre code, vous devez le connecter à votre compte GitHub. Utilisez la console AWS à cet effet, car vous devez utiliser cette dernière pour générer un jeton GitHub pour l'accès à votre référentiel privé. Stockez le jeton dans votre compte AWS. Pour ce faire, dans le répertoire amplify-app, exécutez l'action amplify ajoute l'hébergement. Amplify présente une liste de questions sur l'hébergement. Veuillez sélectionner les options qui s'affichent ci-dessous :

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

Cette opération entraîne le lancement d'une nouvelle fenêtre dans votre navigateur, ainsi que l'ouverture de la console Amplify pour vous permettre de configurer l'hébergement sur votre projet. Dans la page d'application de la console Amplify, cliquez sur l'onglet Environnements frontend et sélectionnez GitHub, puis cliquez sur le bouton Connecter la branche.

gsg-build-amplify-4.png

Ceci vous redirige vers GitHub. Vous donnez à présent à la console Amplify l'accès à votre compteGitHub, de sorte à déployer le code source que vous y hébergez. Pour ce faire, cliquez sur le bouton vert Autoriser aws-amplify-console.

gsg-build-amplify-5

Vous connectez maintenant votre référentiel GitHub à votre application Amplify. Sur la page Ajouter la branche du référentiel, sélectionnez le référentiel amplify-web-app et la branche principale. Puis, cliquez sur Next (Suivant).

gsg-build-amplify-6

La prochaine étape consiste à configurer les paramètres de création de votre application. Vous aurez besoin d'une fonction du service IAM qui autorise Amplify à accéder à vos ressources AWS au sein de votre compte pour un déploiement automatique. Sur la page Configurer les paramètres de création, cliquez sur le bouton Créer un nouveau rôle dans la zone bleue.

gsg-build-amplify-7

Cela entraîne l'ouverture de la console IAM dans un nouvel onglet. Elle est renseignée avec les valeurs requises. Cliquez sur Créer un rôle :

  • Type d'entité de confiance : service AWS
  • Service : Amplify
  • Cas d'utilisation : Amplify – Déploiement de backend
  • Politique d'autorisation : AdministratorAccess-Amplify
gsg-build-amplify-8

Une fois le rôle créé, vous pouvez fermer cet onglet dans votre navigateur et retourner à la page Configurer les paramètres de création. Cliquez sur le bouton Rafraîchir les rôles existants, puis sélectionnez dans le menu déroulant le rôle que vous venez de créer. Ensuite, sélectionnez développement dans le menu déroulant Environnement. Il s'agit de l'environnement que vous avez créé lors de la configuration d'Amplify sur votre projet, après l'exécution de l'action initialisation d'amplify.

Laissez les autres paramètres avec leurs valeurs par défaut, puis cliquez sur Next (Suivant).

gsg-build-amplify-9

Passez en revue les valeurs que vous avez configurées, puis cliquez sur Save and deploy (Enregistrer et déployer). Amplify redémarre à présent pour déployer automatiquement votre application React sur les modifications du référentiel source.

gsg-build-amplify-10

Vous pouvez à présent revenir à votre console pour suivre la progression. Pour ce faire, saisissez :

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

Au terme du déploiement, votre application sera disponible au niveau de l'imprimé URL ; elle sera accessible pour tout le monde via cette URL.

Conclusion

Dans ce module, vous avez appris comment connecter votre référentiel GitHub privé au code de l'application web afin de configurer le déploiement automatique sur Amplify. Dans le prochain module, vous découvrirez comment supprimer l'application que vous venez de déployer, ainsi que toutes les ressources AWS que vous avez créées à cet effet.

À suivre : nettoyage des ressources

Dites-nous si nous avons répondu à vos attentes.

Nous vous remercions pour votre commentaire
Nous sommes ravis que cette page vous ait été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer
Nous vous remercions pour votre commentaire
Nous sommes désolés que cette page ne vous ait pas été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer