Déployer un site web statique en utilisant Amazon S3, CloudFront, Certificat Manager, Route 53 , CodePipeline et GitHub
Pour mon premier projet de cloud computing, j’ai décidé de déployer mon portfolio sur AWS. Je vais vous décrire les étapes que j’ai suivi pour y arriver.
Tout d’abord vous trouverez ci-dessous le diagramme architectural du projet, C’est une représentation visuelle des services utilisés.
Partie 1 : Créé un site web qui vous correspond
Ayant de l’expérience avec HTML, CSS et JavaScript j’ai pu construire mon portfolio en utilisant des patrons de site web trouvé sur internet.
Partie 2 : Déployer son site web avec Amazon S3 ET CloudFront
Pour cela, j’ai suivi plusieurs étapes :
Etape 1 : Créer un Bucket S3 et lui donner un nom, de préférence le même que le futur site web. Ce bucket sert de stockage pour les fichiers. L’avantage de ce service est qu’il est sécurisé et c’est le meilleur choix pour héberger un site web statique. On peut accéder aux fichiers à travers une URL. En créant le bucket on garde l’option par défaut qui bloque l’accès aux fichiers au public, seul CloudFront aura les permissions nécessaires pour y accéder. De même, on garde l’option hébergement de site web static désactivé car CloudFront se charge du reste.
Etape 2 : Configurer CloudFront
CloudFront est un service qui permet de distribuer du contenu rapidement en mettant en cache les données dans des locations proche des utilisateurs. Il permet d’améliorer les performances et offre une haute disponibilité.
Pour configurer CloudFornt, d’abord on crée une nouvelle distribution. Dans le menu de création, pour origin access, on choisit l’option recommandé soit origin access control settings, on choisit ensuite l’origine des fichiers qui dans notre cas est un bucket S3.
Pour autoriser l’accès de CloudFront à notre bucket, il faut copier la bucket policy généréz après la création de la distribution et ensuite la copier dans la section bucket policy de notre bucket S3. Cette policy permet de s’assurer que seul CloudFront a accès à nos fichiers.
L’objet racine par défaut est le fichier index.html car c’est le point d’entré de notre site web. C’est aussi une bonne pratique de le nommer de cette façon. On peut ensuite créer la distribution.
Etape 3 : Configurer le nom de domaine et le certificat SSL
Une fois la distribution crée, une URL est générée à travers laquelle on peut accéder au site web statique. Cependant on aimerait y accéder en utilisant un nom de domaine personnalisé, dans mon cas c’est www.aka-lynda.com, on va doute enregistrer un nom de domaine avec le service Route 53. Cette étape est payante et le prix varie en fonction du domaine top level (.com, .io, .net ect).
Une fois le nom de domaine payé, on va demander un certificat SSL qui nous permettra de sécuriser notre site web. Pour cela on utilise le service AWS Certificate Manager (ACM). Le certificat demandé est public et couvre mon nom de domaine avec et sans www donc www.aka-lynda.com et aka-lynda.com.
Etape 4 : Intégrer CloudFront avec le certificat SSL et le nom de domaine
Après qu’Amazon ait validé le certificat, on peut rediriger notre nom de domaine vers la distribution cloudfront. Pour se faire il faut créer une zone d’hébergement dans Route 53. Une zone d’hébergement permet de configurer comment le trafic sera distribué. Après avoir créer la zone d’hébergement, il faut créer deux enregistrements. Un qui fera office de domaine racine : aka-lynda.com et un sous-domaine www.aka-lynda.com. On peut ensuite rediriger le trafic vers cloudFront en utilisant Alias to CloudFront distribution.
Après avoir configuré Route 53, on peut retourner vers CloudFront et ajouter les noms de domaines alternatifs pour accéder à la distribution. Ces noms de domaine sont ceux précédemment enregistré avec Route 53.
A partir de cet instant on peut accéder à notre site web en utilisant le nom de domaine.
Partie 3 : Implémenter un compteur de vues du site
Sur le site, on aimerait que le nombre de visiteur s’affiche, pour cela on va utiliser une fonction Lambda pour abriter le code qui permettra d’incrémenter et de retourner le nom de vues et la base de données DynamoDB pour stocker le nombre de vues.
Etape 1 : Configurer Dynamo DB
DynamoDB est un service de base de données NOSQL, qui fonctionne avec clé-valeur. On crée une table qu’on va nommer portfolio-site-views pour stocker le nombre de vues, la clé primaire sera « id ». Après avoir créé la table on crée un nouvel item « views » de type nombre, de la valeur 1 et qui sera incrémenter de 1 à chaque fois que le site est visité.
Etape 2 : Créer une fonction Lambda
Dans la barre de recherche on sélectionne Lambda, on clique ensuite sur créer une fonction, on nomme la fonction, dans mon cas elle s’appelle portfolio-profesionnel-view-count-api. J’ai choisi Python pour le runtime.
On active ensuite l’option Fonction URL afin d’autoriser l’interaction avec la fonction à travers des requêtes http. De plus, on active le Cross Origin Ressource Sharing qui nous permet de contrôler qui a accès à nos ressources et on liste le site web (www.aka-lynda.com) comme seul site ayant accès.
Etape 3 : Ajouter des permissions à la fonction Lambda
Pour que La fonction Lambda ait accès à la base de données DynamoDB il faut lui ajouter les permissions nécessaires. Dans l’onglet permissions de la fonction on click sur le rôle, cela va nous rédiger vers IAM (Identity Access Manager) où on pourra ajouter la permission “AmazonDynamoDBFullAccess”.
Etape 4 : Ajouter le code à la fonction Lambda
Après avoir ajouté toutes les permissions nécessaires, on écrit le code python pour obtenir l’attribut views de la table. Le code est le suivant :
Le programme interroge la base de données pour avoir le nombre de vues, augmente ce nombre de vues de 1, met à jour la base de données et enfin retourne la valeur.
Etape 5 : Ajouter le nombre de vues au site web
Après avoir configurer la fonction lambda, on a une URL qui nous permet d’accéder au nombre de vues, on utilisera cette URL dans le code JavaScript pour insérer le nombre de nombre de vues dans la page HTML.
D’abord on crée sur la page HTML un bloc div avec un nom de classe unique, dans mon cas c’est counter-number. Ensuite dans le code JavaScript, on sélectionne ce bloc, on crée ensuite une fonction pour avoir le nombre de vues, cette fonction utilisera l’URL de la fonction Lambda et on insère ce dernier dans la page HTML en utilisant innerHTML.
Le code JavaScript est le suivant :
Attention, il est important d’ajoute le fichier JavaScriot à la fin du code avec une balise <script> pour que le code soit pris en charge, vous trouverez un exemple de comment s’y prendre ci-dessous. Mon fichier JavaScript s’appelle index. Js et ce situe dans un dossier assets/js .
Partie 4 : Implémenter un pipeline CI/CD avec CodePipeline
Une fois notre site web mis en ligne, on voudra surement y apporter des changements ou ajouter des projets au fur et à mesure. Il nous faut donc un moyen de déployer les changements effectués sans avoir à recharger ficher dans le bucket S3 manuellement. Pour cela on va utiliser git, github et AWS CodePipeline.
Etape 1: Créer un GitHub repository
Pour cela il faut un compte github, une fois que le compte github est activé, on crée ensuite un repository dans mon cas il s’appelle portfolio-professionnel.
Etape 2 : Installer git sur son ordinateur
Après la création du repository, on a des commandes à entrer dans le terminal de notre ordinateur pour relier ce repository à notre projet local mais ces commandes de fonctionneront que si a déjà git sur notre ordinateur personnel, il faut donc télécharger le logiciel.
Une fois que git est téléchargé et installé, on va se rendre dans le dossier racine de notre projet entrer la commande git init pour initialiser le projet on va ensuite entrer à la suite git add . et git commit -m « Message » pour enregistrer l’état actuel des fichiers. On va ensuite entrer git add remote origin suivi du lien vers le repository créer pour relier le repository local et celui remote. De cette manière quand on entrera la commande git push dans le terminal du projet local, le repository portfolio-professionnel sera mis à jour automatiquement.
Attention, il faut s’assurer d’être bien connecter à son compte GitHub depuis le terminal, j’utilise l’extension Vscode github codespaces pour faire la connexion.
Etape 3: Configurer CodePipeline sur Amazon Web Services
Dans CodePipeline, on créer un nouveau pipeline, un nouveau rôle sera automatiquement créé. On choisit ensuite la source dans mon cas c’est github version 2 car c’est la plus récente. On se connecte ensuite à son compte github, on choisit le repository souhaité ici c’est portfolio-professionnel le nom de la branche qui est main pour moi car je n’ai qu’une seule branche, on clique sur next et on passe le build stage car il s’agit d’un site web statique donc pas besoin de build stage pour le moment.
On choisit ensuite où on souhaite déployer les changements ici c’est le bucket www.aka-lynda.com et on valide la création. Un pipeline CID/CD sera ensuite mise en place de sorte que lorsqu’on pousse un changement de code il est automatique déployé dans le bucket S3.
Ceci est la fin de mon projet, je vous remercie d’avoir suivi jusqu’au bout. Vous pouvez visiter mon site web sur www.aka-lynda.com.
