Héberger un site web statique avec AWS

TG
  • Tommy Gingras
    Studio Webux S.E.N.C
    21 Août 2019

Introduction

Header

L’objectif de cet article est de montrer comment afficher de la publicité sur votre site Web.

Le site en question sera hébergé sur un bucket S3 de AWS (Amazon Web Services) et sera distribué avec l’aide de cloudFront (un CDN offert par AWS)

Le registrar est Godaddy et le gestionnaire de DNS sera Route 53 (fournit par AWS)

Planning L’architecture pour AWS + GoDaddy + Google AdSense

Prérequis

  • Un nom de domaine (ex. example.com)
  • Avoir le droit de modifier les informations des nameservers
  • Optionnel, un sous-domaine (ex. www.example.com)
  • Un compte AWS et les accès aux services suivants
    • Route 53
    • CloudFront
    • S3
  • Un site Web (SPA, HTML, …) Tout ce qui ne nécessite pas de serveur, en résumé un site statique.

    Par exemple, un backend NodeJS ne fonctionne pas ou bien un site en PHP

  • Un Compte Google AdSense
  • Un Compte Google Search Console (ceci ne sera pas couvert dans cet article)

Étape 1 - Changer les nameservers

Sur la console AWS, aller dans le service Route 53, puis cliquer sur Create Hosted Zone

Create Hosted Zone avec Route 53

Dans le formulaire, entrez votre nom de domaine, puis laisser public comme type.

Lorsque cela est fait, vous allez voir 4 entrées à côté de l’entrée nommée NS. Il faut copier toutes ces lignes pour remplacer les informations que Godaddy utilise.

Sur votre compte Godaddy, naviguer jusqu’à la gestion DNS, pour le domaine désiré.

Allez dans la section Nameservers, puis éditez celui-ci en remplaçant les informations par celle de Route 53.

Ensuite, il faut attendre quelques heures pour que le tout soit appliqué. Vous pouvez tout de même continuer les autres étapes pendant ce temps.

Cette étape peut se faire beaucoup plus rapidement. Le temps est variable.

Étape 2 - Faire la demande d’un certificat SSL

Le certificat utilisé ici est émis par Amazon, pour que le tout fonctionne avec CloudFront, il faut utiliser la région US Virginia (US East (N. Virginia)).

Sinon vous ne pourrez pas associer de certificat SSL avec votre instance de CloudFront

rendez-vous sur le service Certificate Manager

Cliquer sur Request a certificate,

Request a certificate avec le Certificate Manager

Choisissez Public,

Request a public certificate avec le Certificate Manager

Entrer le nom de domaine, puis les sous domaines.

Nom de domaine et sous domaine avec le Certificate Manager

Pour le type de validation, laisser DNS Type.

Type de validation avec le Certificate Manager

Maintenant pour valider le tout, vous devriez être en mesure d’utiliser l’entrée automatique de Route 53

Create Record avec le Certificate Manager

Sinon il faut créer les CNAME appropriés, aller voir mon autre article dans ce cas: https://tommygingras.com/comment-faire-la-demande-dun-certificat-ssl-avec-aws-et-godaddy/

Étape 3 - Créer un bucket S3 pour héberger votre site Web

Aller dans le service S3 de AWS,

Cliquer sur Create Bucket

Create Bucket avec S3

Donnez-lui un nom et choisissez la région

Définir le bucket avec S3

Ensuite, appuyez sur Next, puis next encore et finaliser.

Les autres options seront configurées plus bas,

Allez dans votre bucket, puis cliquez sur permissions

Dans la section Block public Access, cliquez sur Edit et cocher seulement les deux premières cases.

Accès public du bucket avec S3

Attention !  Votre bucket est accessible de tout le monde.

Maintenant il faut créer une policy pour les accès au bucket.

Bucket policy avec S3

Cliquer sur le bouton en bas à gauche : Policy Generator

Les informations que vous devez entrer sont celles-ci:

Bucket policy generator avec S3

La partie au-dessus du Step 3, veuillez entrer les informations par rapport à votre bucket S3

Type of policy S3 Bucket Policy
Principal *
Effect Allow
Actions GetObject
ARN arn:aws:s3:::www.webuxlab.com/*

Pour l’ARN, changer <www.webuxlab.com> pour le nom de votre bucket

Ensuite, cliquer sur Generate Policy, puis copier-coller le contenu dans la boite de l’étape précédente.

La dernière étape est d’Activer le mode site web sur votre bucket,

Aller sur l’onglet properties puis cliquer sur Static Website Hosting

Site Web statique avec S3

Le code source est du code ReactJS donc il faut mettre index.html dans les deux cas.

Lorsqu’il y a une erreur (Ceci n’est pas une vraie erreur), le fichier index.html de React doit quand même être chargé. Car par défaut le routage de react va causer une erreur avec le code 403 Forbidden depuis le serveur de AWS.

Garder en tête que si vous voyez une erreur 403 c’est due à cette ligne : Error Document. (On va aussi devoir configurer la même chose pour CloudFront)

Vous avez maintenant un bucket S3 prêt à recevoir des fichiers pour offrir un service Web à petit coût.

Étape 4 - Pousser les fichiers sur le S3 Bucket

Cette étape-ci je vous recommande la documentation officielle pour ce qui est de l’installation de l’outil, je l’ai fait sur Mac, Linux et Windows et dans tous les cas ça c’est bien passé.

Lien pour installer le AWS CLI: AWS CLI

Après avoir installé l’outil, vous devez générer une clé API (API Key) et l’associer avec votre système/CLI (Vous devez utiliser un ordinateur sécurisé, car cette clé permet d’accéder à votre compte AWS, se qui est recommandé, c’est de faire ce dont vous avez besoin, puis de détruire la clé par la suite)

Pour créer une clé API, aller dans le menu en haut à gauche et cliquer sur le nom de votre compte, puis My Security Credentials

Sécurité du compte

Choisissez Continue to Security Credentials

Sécurité du compte - continuer

Cliquer sur Create new Access Key

Sécurité du compte - Créer une nouvelle clé API (access key)

Optionnel, Copier le access et le secret dans un endroit sécuritaire.

Vous devez entrer ces informations dans votre terminal,

Voici la documentation officielle pour le faire: Doc

Sinon en résumé:

Étapes en résumé

Ensuite, vous pouvez utiliser la commande suivante pour pousser vos données sur le serveur.

aws s3 sync <Votre-répertoire-contenant-vos-fichiers-static> s3://<NOM-DE-VOTRE-BUCKET>

Par exemple,

aws s3 sync ./ s3://test-webuxlab

À partir de ce point, vous pouvez accéder à votre site Web directement en utilisant l’adresse que AWS a générée. Cette adresse ce trouve dans l’onglet Static Web Hosting

Étape 5 - Ajouter CloudFront

Avant de commencer cette étape, valider que votre certificat SSL a bien été émis et que le tout a été validé.

Aller dans le service CloudFront,

Puis cliquer sur Create Distribution.

Choisissez l’option Web

Cloudfront Web

Choisissez le bucket précédemment créé pour le domain name, puis spécifiez / comme path d’origin

Cloudfront path

Choisissez redirect HTTP to HTTPS

Cloudfront rediriger le HTTP vers HTTPS

Tout ce dont vous ne voyez pas sur les photos a été laissé par défaut.

Choisissez le type de price Class, les nom de domains (CNAMEs) et le certificat précédemment créés. (Si vous ne voyez pas votre certificat, vérifier qu’il a été créé en virginie et qu’il a été issue)

Cloudfront configurer la distribution

Puis spécifier encore une fois le index.html

Cloudfront configurer le fichier par défaut

Maintenant il faut être patient avant que le tout fonctionne et soit disponible.

Mais pendant ce temps, nous pouvons configurer les subtilités de CloudFront et ReactJS.

Aller dans votre Distribution, puis aller sur l’onglet Error Pages

Cloudfront page d'erreurs

Cliquer sur Create Custom Error Response puis créer une entrée comme montrée sur l’image ci-dessus.

Pour votre information Les builds de ReactJS utilisent des chunks, ce qui peut causer des troubles lorsque vous développez. Pour tout supprimer les caches vous pouvez créer une invalidation, le object type peut être égal à : /* pour tout supprimer ou un/des paths que vous avez besoin, comme ça en quelque seconde, votre cache est supprimée.

Étape 6 - Configuré Route 53 pour pointer sur votre site

Aller dans votre hosted zone, puis cliquer sur Create Record Set

Route 53 hosted zone

Choisissez un type A, puis cliquer sur Alias = Yes Le alias target doit être votre instance Cloudfront.

Route 53 alias

Si vous avez entré plusieurs sous domaines, vous pouvez faire la même chose pour chaque élément. Mais cette fois-ci, ajouter le nom de votre sous-domaine.

Maintenant il suffit d’attendre environ 1 heure pour que le tout soit opérationnel.

Étape 7 - Demander l’autorisation d’afficher de la publicité sur le site

Dès que tout fonctionne et que Google Search Console est en mesure de crawler le site, vous pouvez faire la demande sur Google AdSense pour afficher de la publicité sur votre site.

Je vous recommande de suivre la documentation officielle de Google pour cette partie, mais en résumé

Aller dans l’onglet Site,

Cliquer sur Ajouter un Site et entrer votre nom de domaine.

Puis copier les scripts comme mentionnés par Google sur votre site Web. Dès que c’est fait, cela peut prendre plusieurs jours, car Google va valider que le site est conforme à leur politique.

Conclusion

Pour déployer un site Web statique en utilisant les services de AWS tels que S3, CloudFront, Certificate Manager et Route 53.

De plus, faciliter la combinaison de Godaddy et de Route 53 pour obtenir un DNS fonctionnel et compatible avec les requis de Google AdSense.

N’hésitez pas à poser vos questions et à soumettre vos commentaires, suggestions et améliorations