Héberger une application statique sur AWS avec le CICD impliquant AWS AWS CodeCommit, CodePipeline et S3

Contexte et objectifs

L’hébergement d’un site statique sur Amazon S3 (Simple Storage Service) est une pratique courante dans le développement web moderne. Les sites statiques sont de plus en plus populaires car ils offrent une alternative légère, rapide et sécurisée aux sites web dynamiques. Amazon S3 est un service cloud hautement évolutif et rentable qui permet de stocker et de diffuser des contenus statiques sur le web de manière efficace.

L’objectif de cet article est de vous guider à travers le processus de déploiement d’un site web statique sur Amazon S3 en utilisant des pratiques de Continuous Integration and Continuous Deployment (CICD). Le CICD est une méthodologie de développement logiciel qui automatise le processus de construction, de test et de déploiement des applications. En utilisant des outils comme AWS CodePipeline, AWS CodeBuild et AWS CodeDeploy, les développeurs peuvent mettre en place un pipeline automatisé pour déployer leur site statique sur S3 chaque fois qu’ils effectuent des changements dans le code source. Dans la suite de cet article, nous expliquons étape par étape comment configurer un tel pipeline, depuis la création d’un référentiel de code source (AWS CodeCommit) jusqu’à la mise en place de déclencheurs automatiques (AWS CodePipeline) pour le déploiement continu. A la fin, vous devriez être en mesure de comprendre les avantages du CICD dans le déploiement de sites statiques sur Amazon S3 et d’appliquer ces connaissances à vos propres projets de développement web.

Durée: 20 minutes

Mise en place de l’environnement de travail

Listes des outils et plateforme

Un ordinateur
Un compte AWS

Liste des services utilisés:

AWS CodeCommit
AWS CodePipeline
Amazon S3

NB: avoir une application statique à disposition, pour notre cas ça sera une application HTML, CSS et Javascript

Avant d’entrer dans l’aspect technique du processus de déploiement d’une application statique sur S3 en adoptant l’approche CICD, nous allons présenter les avantages de mettre en place un CICD.

Avantages d’un CICD

Automatisation du processus de déploiement : Le CICD permet d’automatiser l’ensemble du processus de déploiement, depuis la construction jusqu’à la mise en ligne de l’application sur S3. Cela réduit considérablement les efforts manuels nécessaires pour déployer chaque mise à jour, ce qui permet aux développeurs de se concentrer sur d’autres tâches importantes
Réduction des erreurs : En automatisant les étapes de déploiement, le CICD réduit le risque d’erreurs humaines lors des déploiements manuels. Les processus automatisés sont plus fiables et moins susceptibles de causer des problèmes de configuration ou des erreurs de déploiement.
Rapidité et efficacité : Grâce à l’automatisation, les déploiements deviennent plus rapides et plus efficaces. Les développeurs peuvent déployer de nouvelles fonctionnalités ou corriger des bugs en quelques minutes plutôt qu’en plusieurs heures ou jours, ce qui accélère le cycle de développement et améliore la réactivité de l’application.
Consistance de l’environnement : En utilisant des outils de CICD, les développeurs peuvent garantir que chaque déploiement est réalisé dans un environnement cohérent et reproductible. Cela réduit les problèmes liés aux différences d’environnement entre les développeurs et les différentes étapes du cycle de développement.
Contrôle des versions et traçabilité : Le CICD permet de suivre et de contrôler les versions de l’application de manière transparente. Chaque déploiement est associé à un ensemble spécifique de modifications de code, ce qui facilite la traçabilité des problèmes et des corrections.
Facilité de collaboration : En adoptant des pratiques de développement basées sur le CICD, les équipes de développement peuvent collaborer plus efficacement. Les processus automatisés permettent de partager facilement les modifications de code et de coordonner les déploiements entre les membres de l’équipe.

En résumé, le CICD offre une approche plus efficace, fiable et agile pour le déploiement d’applications statiques sur Amazon S3, ce qui permet aux équipes de développement de livrer plus rapidement des fonctionnalités de haute qualité à leurs utilisateurs. Passons donc à la réalisation.

Connectez vous à votre console AWS

Ouvrez la console AWS Codecommit et choisissez de créer un dépôt.

Sur la page Créer un référentiel, dans Nom du référentiel, saisissez un nom pour votre référentiel (par exemple, EAZYrepo). Sélectionnez ensuite Créer.

2) Sur l’écran suivant, cliquez sur Copy à côté de Step3 : Clone the Repository (Nous l’utiliserons pour cloner ce dépôt vierge dans l’étape suivante).

3). Ajouter un exemple de code à votre dépôt CodeCommit

Exécutez la commande suivante pour cloner le dépôt, en remplaçant l’adresse de clonage GIT par celle que vous avez copiée dans l’étape précédente.

git clone <GIT Clone Address> puis entrez le nom d’utilisateur et le mot de passe des utilisateurs IAM HTTPS Git Credentials que nous avons déjà téléchargés. Toutes ces étapes sont décrites en capture.

4). Création d’un compartiment S3

Entrez dans votre bucket et configurez les permissions

configuration des permissions

Configuration du bucket pour héberger un site web static

7). Création et configuration du pipeline avec CodePipeline

Spécification du nom de votre pipeline

Cliquez sur next pour avancer

Au niveau d’ajout de la source, choisissez CodeCommit comme source

Passez l’étape de build

Au niveau de la phase de déploiement, choisir Amazon S3. Choisissez la région dans laquelle votre S3 bucket a été créé, puis sélectionnez le S3 bucket que vous venez de créer pour votre projet. Assurez-vous de sélectionner Extraire le fichier avant le déploiement car Codepipleline compresse l’artefact.

Faites la revue et créez votre pipeline

8). Phase de test de notre déploiement.

Pour cela, se rendre dans S3, ouvrir notre bucket et vérifier si effectivement notre application s’y trouve et aussi vérifier la présence de l’artefact de votre déploiement. Et si c’est le cas, entrez dans properties pour copier le l’url de votre application et coller sur votre navigateur pour visualiser votre application.

Ouvrir votre bucket, dans notre cas c’est alphhosting et vérifier la présence de notre application

Naviguer au niveau de properties, scroller et s’arrêter au niveau de website hosting, ensuite copier l’url d’accès à votre application

Et vous pouvez visualiser votre site web statique

Conclusion

En conclusion, l’hébergement d’un site statique sur Amazon S3 avec l’intégration continue et le déploiement continu (CICD) offre une solution puissante pour les développeurs cherchant à optimiser le processus de déploiement de leurs applications web. En combinant la fiabilité et l’évolutivité de S3 avec l’automatisation du CICD, les équipes de développement peuvent réaliser des déploiements plus rapides, plus cohérents et plus fiables, tout en réduisant les risques d’erreurs humaines.

Ce processus automatisé libère du temps et des ressources précieuses pour les développeurs, leur permettant de se concentrer sur l’innovation et l’amélioration continue de leur application. De plus, la traçabilité et le contrôle des versions facilitent la collaboration au sein des équipes et la résolution des problèmes.

En adoptant le CICD pour le déploiement de sites statiques sur S3, les développeurs peuvent réaliser des gains d’efficacité significatifs, améliorer la qualité de leurs déploiements et offrir une expérience utilisateur optimale à leurs utilisateurs. En définitive, cette approche représente un moyen essentiel pour les entreprises de rester compétitives dans un environnement numérique en constante évolution.