DEPLOIEMENT CI/CD D’APPLICATION WEB SUR AWS AMPLIFY

DEPLOIEMENT CI/CD D’APPLICATION WEB SUR AWS AMPLIFY
Contexte et objectifs
De nos jours, l’Intégration Continue (CI) et le Déploiement Continue (CD) sont des étapes primordiales et incontournables dans le cycle de vie de développement d’application. Plusieurs outils permettent de mettre en place ces différentes étapes, il sera question dans ce tutoriel d’utiliser AWS Amplify un outil très particulier qui nous permettra en plus de créer un pipeline CI/CD et aussi d’héberger notre application web.
AWS Amplify est un service du fournisseur Cloud AWS qui permet aux développeurs web et mobiles front-end de créer, d’expédier et d’héberger facilement des applications complètes sur AWS. Il a 3 principales fonctionnalités: Créer un backend d’application; Créer une interface utilisateur front-end; et enfin celle qui nous intéresse dans ce tutoriel Héberger une application web.
Il sera donc question dans ce tutoriel de mettre en place un pipeline CI/CD et de déployer notre application web sur AWS Amplify.
Durée: 25 minutes

0 – Mise en place et détails de l’environnement

Outils:

GitLab qui contiendra le code source de notre application web
Un compte AWS (les étapes de création d’un compte AWS ne feront pas l’objet de ce tutoriel)
AWS Amplify qui va héberger notre application web

Le code source de notre application web est disponible via ce lien react-app Les etapes de creation de projet sur GitLab ne seront pas pris en compte dans ce tutoriel
Infrastructure: vous n’avez aucune infrastructure à approvisionner, AWS Amplify se charge de tout.

1 – Se connecter sur la console de gestion AWS

Cliquez sur le lien AWS Management Console pour ouvrir la page de connexion à AWS.
Une fois sur cette page cochez sur Utilisateur IAM car il est recommandé de ne pas se connecter avec le compte racine pour effectuer les tâches d’administration sur AWS.
Saisir l’ID ou un alias de votre compte et cliquez sur suivant.
Sur cette page vous saisissez votre nom d’utilisateur IAM et votre mot de passe, puis cliquez sur connexion

Si vos identifiants sont exacts vous allez accéder la page de gestion de la console AWS ci-dessous

2 – Acceder a AWS Amplify

Étant sur la console de gestion AWS vous pouvez accéder au service AWS Amplify en allant sur la barre de recherche et saisir le nom du service ou bien en fonction de votre historique d’utilisation des services AWS il peut être présent sur votre tableau de bord.

Lorsque vous cliquez sur AWS Amplify vous accédez donc à la page de gestion du service. Une fois sur cette page cliquez sur Get started en dessous de Host your web app car c’est la fonctionnalité de AWS Amplify qui nous intéresse dans ce tutoriel

3 – Choix du référentiel Git

Après avoir cliqué sur Get started a l’étape précédente, une page dans laquelle vous devez choisir le référentiel git sur lequel se trouve le code source de notre application. Il faut noter qu’il est possible de choisir un fournisseur qui n’utilise pas git comme système de contrôle de version de code.

Cochez GitLab puis cliquez sur le bouton Continue.

Si C’est la première fois que vous faites ce processus de connexion de GitLab au service AWS Amplify il vous sera demandé de saisir vos identifiants de connexion a GitLab pour autoriser cette opération.

4 – Sélection du projet et de la branche qui contient le code source

Si la connexion de GitLab au service Amplify réussi, vous aurez un message de succès de connexion à GitLab suivi des options de sélection du projet et de la branche qui contient le code source de notre application web.

Une fois le choix du projet et de la branche fait cliquez sur Next

5 – Scripts de build du projet

Lorsque vous choisissez votre projet sur GitLab, Amplify détecte automatiquement le langage/framework que vous avez utilisé dans votre projet et vous propose un script basique écrit en YAML pour faire le build de l’application web.

Si ce script ne vous convient pas vous pouvez cliquer sur Edit pour le modifier et vous pouvez aussi cliquer sur Download pour télécharger le fichier script.

L’option Advanced settings permet de définir l’environnement de build de votre projet et aussi de définir les variables d’environnement qui peuvent être utiles. Cette option ne sera pas utile pour notre tutoriel

Cliquez sur Next

6 – Verification

Après avoir cliqué sur Next dans l’étape précédente, la page de vérification s’affiche dans laquelle vous pouvez vous assurer que le nom du projet est celui souhaité ainsi que la branche du dépôt de code.

Si les informations sont correctes cliquez sur Save and deploy

7 – deploiement ½

Après avoir cliqué sur Save and deploy a l’étape précédente, Amply lance le pipeline CI/CD avec 3 étapes:

provisionning de l’environnement de build: phase pendant laquelle le service Amplify met en place un environnement notamment un docker qui contient toutes les dépendances nécessaires pour faire le build de notre application
le build: étape de construction de l’artefact de notre application pour déploiement
le déploiement: en fonction du langage/framework utilisé dans le code, Amplify crée un environnement compatible à notre application, y compris la distribution de contenu, la création de certificats ssl, un nom de domaine par défaut. Amplify déploie donc l’artefact précédemment créé pendant la phase de build dans le nouvel environnement.