Intégration de Google Adsense avec Godaddy et AWS

Introduction

L’objectif de cet article est de vous 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 suivant
    • Route 53
    • CloudFront
    • S3
  • Un site web (SPA, HTML, …) Tout ce qui ne nécessite pas de serveur, en résumé un site static.
    • 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és à côté de l’entré nommé NS.
Il faut copier toute 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 remplacent 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.

É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,

Demande de certificat SSL avec AWS

Choisissez Public,

Public certificate avec AWS

Entrer le nom de domaine, puis les sous domaines.

nom de domaine pour certificat SSL

Pour le type de validation, laisser DNS Type.

DNS validation pour SSL avec AWS

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

Route 53 automatique DNS validation

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 S3 Bucket

Donner lui un nom et choisissez la région

Nom et région pour le bucket S3

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

Les autres options seront configurés plus bas,

Aller dans votre bucket, puis cliquez sur permissions

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

S3 Bucket public pour un site web static

Attention !

Votre bucket est accessible de tout le monde.

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

Bucket policy

Cliquer sur le bouton en bas à gauche : Policy Generator

Les informations que vous devez entrer sont celles-ci:

Policy Generator avec AWS

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

Type of policyS3 Bucket Policy
Principal*
EffectAllow
ActionsGetObject
ARNarn:aws:s3:::www.webuxlab.com/*

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

Ensuite cliquez 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

Static Website hosting avec AWS et un S3 bucket

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 du à 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 a petit coût.

Étape 3 – Pousser les fichiers sur le S3 Bucket

Cette étape ci je vous recommande la documentation officiel 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: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html

Après avoir installé l’outil, vous devez générer une clé API 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 que 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

Accéder à la page pour créer une clé API

Choissisez Continue to Security Credentials

Continue to security credentials

Cliquer sur Create new Access Key

Create new Access Key avec AWS

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

Vous devez entrer ces informations dans votre terminal,

Voici la documentation officiel pour le faire: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html

Sinon en résumé:

Ajouter ses credentials avec AWS CLI

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 example,

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é. Cette adresse ce trouve dans l’onglet Static Web Hosting

Étape 4 – Ajouter CloudFront

Avant de commencer cette étape, valider que votre certificat SSL à 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 de type Web

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

CloudFront choix du Bucket S3

Choississez redirect HTTP to HTTPS

redirect HTTP to HTTPS cloudFront

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éé. (Si vous ne voyez pas votre certificat, vérifier qu’il a été créé en virginie et qu’il a été issue)

Configuration du SSL et du DNS pour CloudFront

Puis spécifier encore une fois le index.html

index.html dans CloudFront

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

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

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

Custom Error CloudFront, S3 et ReactJS

Cliquer sur Create Custom Error Response puis créer une entrée comme montré 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 invalidations,
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 5 – Configurer 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 6 – 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 officiel 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é 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

J’espère que ce tutoriel va vous simplifier la vie pour déployer un site web statique en utilisant les services de AWS tel que S3, CloudFront, Certificate Manager et Route 53.

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

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

Laisser un commentaire