Déployer une application ReactJS sur AWS Amplify

Pour suivre ce tutoriel, il vous faut :

• Un compte AWS.
• Un compte GitHub pour héberger les dépôts Git.
• Des notions de base sur l'utilisation de la CLI Git pour pousser des commits vers un dépôt distant.
• Un domaine personnalisé (facultatif).

AWS Cloud9 est un IDE cloud puissant qui permet aux développeurs de coder, exécuter et déboguer directement dans le navigateur. Idéal pour les applications serverless et ReactJS, il prend en charge plusieurs langages sans aucune installation locale.

Dans cette étape, nous allons créer un environnement AWS Cloud9 et l'utiliser pour développer une application ReactJS en local.

Ouvrez la console AWS Cloud9 à l'adresse https://console.aws.amazon.com/cloud9/.

Commençons par créer un environnement Cloud9. Il s'exécutera sur une instance T3.small Amazon Linux 2. Nous configurerons l'accès à l'instance sous-jacente via AWS Systems Manager. Cela nous permettra de nous y connecter en SSH sans avoir à ouvrir de ports entrants dans le groupe de sécurité de l'instance. Lors de la configuration, Cloud9 crée des rôles IAM pour accéder aux services AWS en votre nom.

Depuis la page de l'environnement, sélectionnez votre instance Cloud9 et cliquez sur le lien Open. Vous voilà connecté à votre IDE Cloud9.

Avant de créer l'application ReactJS, vérifiez que votre instance utilise Node.js 12.x et npm 6.x ou version ultérieure.

React s'appuie sur ces versions pour offrir des performances et une compatibilité optimales lors de la création d'interfaces utilisateur.

Mettons en place une application React dans AWS Cloud9 pour effectuer des tests en local. Depuis le répertoire '~/environment', créons un nouveau projet React nommé cloud-wanderer-blog. Exécutez les commandes suivantes :

$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start

Pour démarrer l'application React, placez-vous dans le répertoire du projet cloud-wander-blog et lancez la commande 'npm start'.

AWS Cloud9 ne passe pas par localhost pour accéder à vos applications en cours d'exécution. Il propose à la place une fonctionnalité d'aperçu intégrée à l'IDE Cloud9.

Dans le menu supérieur de l'IDE AWS Cloud9, sélectionnez Preview > Preview Running Application. Un nouvel onglet s'ouvrira dans votre environnement, affichant l'application React en cours d'exécution.

Connectez-vous à votre compte GitHub et sélectionnez 'New repository' via le bouton '+' en haut à droite. Ce dépôt accueillera les fichiers et la configuration de l'application React. J'ai nommé le mien cloud-wanderer.

Ne cochez pas 'Add a README file', car l'installation de React sur Cloud9 a déjà créé ce fichier.

Téléversez votre application React depuis Cloud9 vers le nouveau dépôt distant sur GitHub. Vous pouvez ajouter les fichiers depuis GitHub ou utiliser la CLI Git sur votre instance Cloud9.

Consultez la documentation GitHub pour savoir comment téléverser des fichiers : https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository

À noter : lorsque j'ai initialisé mon dépôt Git local dans Cloud9, une branche 'master' a été créée. Pour rester cohérent et compatible avec mon dépôt GitHub distant, j'ai renommé ma branche locale 'master' en 'main'. Ce passage de 'master' à 'main' s'inscrit dans une démarche plus large visant à promouvoir un langage plus inclusif.

Notre environnement de staging étant prêt sur Cloud9, passons à la mise en place de l'environnement de production sur AWS Amplify. Pour configurer l'application Amplify, j'ai installé la CLI Amplify depuis '~/home/ec2-user' sur mon instance Cloud9. Pour permettre à la CLI Amplify d'ouvrir des fichiers et des liens vers la console de gestion AWS, j'ai également installé xdg-utils.

$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli

Pour configurer la CLI Amplify sur votre machine locale, vous devez la connecter à votre compte AWS. Pour cela, on utilise la commande 'amplify configure'. Cliquez sur le lien fourni pour vous connecter à la console AWS.

Revenez au terminal Cloud9 et indiquez la région AWS. J'ai choisi eu-west-1.

La CLI Amplify vous demandera de créer un utilisateur IAM. Cliquez sur le lien de création d'utilisateur pour ouvrir la page de création d'utilisateur IAM. Saisissez un nom d'utilisateur et cliquez sur Next. Le nom est libre ; pour ma part, j'ai choisi amplify-cli-admin. Cliquez ensuite sur Next.

Sélectionnez Attach policies directly et choisissez AdministratorAccess-Amplify comme stratégie d'autorisations.

Sur la page Review, vérifiez que tout est correct, puis cliquez sur Create user.

Vous serez redirigé vers la liste des utilisateurs. Sélectionnez l'utilisateur que vous venez de créer. Sur sa page de détails, ouvrez l'onglet Security credentials. Faites défiler jusqu'à Access keys et cliquez sur Create access keys.

Pour le cas d'usage, choisissez l'option Command Line Interface (CLI). Acceptez l'avertissement et cliquez sur Next.

Téléchargez le fichier CSV contenant les clés d'accès de l'utilisateur IAM et stockez-le dans un emplacement sécurisé.

Revenez à la console Cloud9 et appuyez sur Entrée. Saisissez les valeurs de l'Access key et de la Secret access key. Conservez la valeur par défaut pour le nom de profil. La CLI Amplify est désormais configurée dans la région choisie avec les identifiants de sécurité.

Exécutez la commande 'amplify init' pour créer un nouveau projet Amplify. Cela prépare l'application React pour Amplify. Amplify sait suggérer des paramètres par défaut adaptés au répertoire cloud-wanderer-blog. Vous pouvez les accepter en appuyant sur 'Y' ou les refuser et définir vos propres préférences en appuyant sur 'N'.

$ cd ~/environment/cloud-wanderer-blog/
$ amplify init

Pour l'authentification, choisissez AWS Profile, puis sélectionnez le profil par défaut configuré à l'étape précédente. Vous pouvez aussi opter pour Access Keys et saisir manuellement les identifiants Access Key et Secret Access Key.

Rendez-vous ensuite sur la console Amplify pour visualiser l'application déployée via la CLI Amplify.

Connectons à présent notre application Amplify au dépôt GitHub. Cela simplifie considérablement le pipeline CI/CD.

Depuis la console Amplify, ouvrez l'onglet hosting environment de l'application Amplify.

Autorisez Amplify à se connecter à votre dépôt GitHub. Ajoutez votre dépôt et la branche concernée.

Sous Build settings, sélectionnez 'dev' comme environnement. Créez un rôle IAM permettant à Amplify d'accéder à vos ressources. Amplify détecte les paramètres de build par défaut. Si votre configuration diffère, vous pouvez modifier le script Yaml.

Une fois cette étape terminée, vérifiez les paramètres puis cliquez sur Save and deploy pour finaliser le déploiement de l'application.

Le provisionnement, le build et le déploiement prennent quelques minutes.

L'application Amplify est ensuite accessible via le lien du endpoint.

Passons maintenant au test du déploiement continu. Pour cette étape, j'ai modifié la page d'accueil React App.js en y ajoutant un lien vers une seconde page. J'ai prévisualisé la page pour valider la modification en local.

Avec la CLI Git sur Cloud9, j'ai poussé les modifications vers le dépôt GitHub. AWS Amplify les a détectées automatiquement et a lancé un nouveau processus de build et de déploiement.

Une fois l'opération terminée, rafraîchissez l'application Amplify dans le navigateur pour constater le résultat.

Le bouton VISIT Cloud Wanderer BLOG redirigeait bien vers la nouvelle page.

Amazon CloudFront est essentiel pour la rapidité de votre site. CloudFront met en cache vos contenus dans les emplacements Edge AWS afin de les servir plus rapidement à vos utilisateurs.

CloudFront peut être ajouté depuis Amplify, avec S3 comme serveur d'origine. Une réserve toutefois : il n'est pas possible de modifier la distribution CloudFront, car la console Amplify déploie les ressources dans un compte AWS managé.

Une autre option consiste à déployer CloudFront depuis la CLI Amplify.

La commande 'amplify add hosting' configure un bucket S3 et une distribution CloudFront pour mettre votre contenu statique en cache. Vous pourrez accéder au bucket S3 et à la distribution CloudFront, et les gérer depuis votre compte AWS.

Exécutez la commande 'amplify add hosting'. Sélectionnez Amazon CloudFront and S3, puis saisissez un nom pour le bucket S3.

Poussez vos modifications avec 'amplify publish'. Cette commande téléverse les artefacts de build et le contenu statique vers le nouveau bucket S3. CloudFront servira ensuite ce contenu statique depuis les emplacements Edge pour réduire les temps de chargement.

La CLI AWS permet de lister les objets du bucket S3 nouvellement créé :

$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1

Le déploiement de CloudFront et de S3 ajoute de nouvelles configurations dans le répertoire Amplify. Pensez à les commiter et à les pousser vers votre dépôt GitHub distant.

Utilisez Curl pour vérifier que CloudFront met bien en cache le contenu statique.

Dans la sortie de Curl, examinez l'en-tête x-cache. La valeur 'Hit from cloudfront' indique que CloudFront met le contenu en cache, tandis que 'Miss from cloudfront' signifie que ce n'est pas encore le cas.

Pas d'inquiétude si vous obtenez un 'Miss from cloudfront' au premier essai : le contenu doit avoir été consulté au moins une fois pour être mis en cache.

Le endpoint Amplify par défaut ressemble à ceci : https://main.d335ddgrzlw9s5.amplifyapp.com/

Pour faciliter l'accès à votre application Amplify, nous allons l'associer à un domaine personnalisé.

Dans cette étape, je vais ajouter le domaine cloudwanderer.life à mon application Amplify. J'ai acheté ce domaine chez GoDaddy.

Ouvrez la console Route 53 à l'adresse https://console.aws.amazon.com/route53/

Cliquez sur Hosted Zones, puis sur Create Hosted Zone. Saisissez votre nom de domaine et cliquez sur Create. À la création de la zone hébergée, Route 53 lui attribue automatiquement quatre serveurs de noms.

Dans votre compte d'hébergement (GoDaddy, Google Domains), mettez à jour les DNS avec les serveurs de noms Route 53. Route 53 prend ainsi le contrôle DNS du domaine.

Notez que la propagation DNS peut prendre jusqu'à 48 heures pour être pleinement effective sur Internet, en raison des valeurs TTL (Time to Live) configurées sur les serveurs DNS dans le monde.

Depuis la console Amplify, nous pouvons désormais servir notre application via le domaine personnalisé cloudwanderer.life.

Dans la console Amplify, cliquez sur Domain Management dans le menu de gauche, puis sur le bouton Add Domain.

Le menu déroulant affiche le domaine hébergé sur Route53. Sélectionnez-le et cliquez sur Configure domain.

Amplify créera des enregistrements CNAME dans Route53 pour vérifier la propriété du domaine.

L'application Amplify sera ensuite associée à votre domaine (l'opération prend entre 5 et 20 minutes).

Une fois la configuration terminée, vous pourrez accéder à votre application Amplify via votre domaine personnalisé.