Introduction

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)

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

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,

Choisissez Public,

Entrer le nom de domaine, puis les sous domaines.

Pour le type de validation, laisser DNS Type.

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

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

Donnez-lui un nom et choisissez la région

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.

Attention !  Votre bucket est accessible de tout le monde.

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

Cliquer sur le bouton en bas à gauche : Policy Generator

Les informations que vous devez entrer sont celles-ci:

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

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

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

Choisissez Continue to Security Credentials

Cliquer sur Create new 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é:

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

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

Choisissez redirect HTTP to 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)

Puis spécifier encore une fois le index.html

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

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

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

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