/ développement-web

Héberger son site statique sur AWS S3

Débuter sur AWS

AWS_fig02_desktop-1

Avec les offres gratuites d'Amazon Cloud, il est tout à fait possible de démarrer quelques instances de test pour démarrer.

Le cours de Mathieu Nebra sur Openclassrooms est vraiment d'une grande aide pour démarrer, je l'ai terminé hier soir et il faut avouer que cela permet d'avoir de réels éclaircissements sur une plate-forme qui n'a de cesse d'évoluer et de se densifier, notamment en terme de services disponibles.

Démarrer quelques serveurs/instances de test, des VPS ou VPC n'est pas le plus difficile. Avec l'offre gratuite d'un an nous bénéficions d'une instance EC2 t2.micro, le serveur virtuel de base donc.

Capture-d-e-cran-2018-02-14-a--15.53.54

Capture-d-e-cran-2018-02-14-a--19.22.35

Capture-d-e-cran-2018-04-12-a--15.12.25

Autrement voyons ensemble comment déployer simplement son site (statique) sur S3.

S3 et c'est parti

Imaginons que vous ayez un site HTML à héberger, soit issu de la génération d’un outil, soit parce que vous écrivez directement vos pages HTML. Comment l’héberger simplement ?

Vous n’avez pas envie d’aller configurer un Nginx, encore moins Apache, ni même de prendre un serveur spécialement pour ça, S3 est fait pour vous.

On démarre en se rendant sur AWS, en créant un compte et ensuite en se rendant dans S3 (tout est détaillé dans le cours de Mathieu Nebra, je vous épargne cela).

Créer un bucket S3

Partons à l’abordage de l’austère interface d’AWS.

Capture-d-e-cran-2018-04-13-a--15.36.16

Maintenant créons un bucket en utilisant comme nom celui de notre site, dans mon cas gabrielsagnard.fr. Il est important d’utiliser le DNS exact. Libre à vous de choisir la région, j’ai gardé l’Ohio qui est le choix par défaut sur mon compte.

On n’active aucune des propriétés type versioning, journalisation, etc.

Créer un utilisateur dédié

Amazon Web Services nous recommande la création d'un utilisateur dédié afin de restreindre au maximum les risques vers votre instance de stockage. Nous nous rendons cette fois dans le service IAM de gestion d’identité de l’interface.

On crée un utilisateur qui n’aura accès à AWS que par le biais de l’API, il ne pourra pas se connecter directement à l’interface web.

Si vous êtes sur Mac ou Linux voici comment installer l'API AWS :

Sur MacOS :

brew install awscli

sur Linux et autres c'est ici

Capture-d-e-cran-2018-04-12-a--15.12.25-1

Une fois le nom de votre utilisateur renseigné, il faudra cocher la case "accès par programmation". En termes d’autorisation, on attache directement une stratégie existante.

En fait ma stratégie n’existe pas encore, donc je vais la créer via le bouton dédié. Je souhaite ajouter une police d’utilisation permettant à cet utilisateur d’accéder à ce bucket.

Dans le nouvel onglet on choisit « Créer votre propre stratégie ».

04-iam-custom-policy_thumb_450

Vous pouvez nommer votre stratégie comme bon vous semble, j’ai choisi MyWebsite.

{
  "Version": "2012-10-17",
    "Statement": [
    {
        "Effect": "Allow",
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::gabrielsagnard.fr"
    },
    {
        "Effect": "Allow",
        "Action": "s3:*",
        "Resource": "arn:aws:s3:::gabrielsagnard.fr/*"
    }
    ]
}

Cette police me donne accès à la racine du bucket et au reste. Je vous conseille de la tester avec le bouton « Valider la stratégie » avant de la créer. Une fois terminé, revenez sur l’écran de création de l’utilisateur et rafraîchissez la liste des stratégies.

05-refresh-policies_thumb_450

Je vois maintenant apparaître la police que je viens de créer, je la choisis et je passe à la suite. L’écran suivant est capital, il vous donne les informations de connexion relatives à votre utilisateur ; conservez-les précieusement elles ne seront plus accessibles une fois la page fermée.

Configuration du profil et utilisation du client AWS

Nous allons maintenant installer le client AWS. Vous pouvez l’installer via brew install awscli sur OSX ou encore en utilisant pip, le gestionnaire de paquets de python.

Il est temps de configurer nos credentials (ID de clé d’accès et clé d’accès secrète) que nous avons récupéré de l’interface AWS.

Pour ce faire nous allons configurer notre profil:

MBP-de-admin:~ admin$ aws configure --profile nomdel'utilisateuraws
AWS Access Key ID [None]: secret
AWS Secret Access Key [None]: secret
Default region name [None]: préciser votre zone
Default output format [None]: json

Si tout se passe bien, la commande ne renverra… rien. C’est normal notre bucket est vide. Poussons-y un fichier pour nous assurer que tout fonctionne.

MBP-de-admin:~ admin$ touch /tmp/foo
MBP-de-admin:~ admin$ aws s3 cp /tmp/foo s3://gabrielsagnard.fr --profile sagnard
upload: ../../tmp/foo to s3://gabrielsagnard.fr/foo
MBP-de-admin:~ admin$ aws s3 ls s3://gabrielsagnard.fr --profile sagnard
2018-04-12 15:07:53          0 foo
MBP-de-admin:~ admin$ 

A priori tout est en ordre, si vous relancez la commande pour lister le contenu de votre bucket vous y verrez votre fichier foo. Sur le même principe mettons-y notre fichier index.html de test, pour ma part je me servirai de ce portfolio pour mes tests.

<html>
  <body>Hello World !</body>
</html>

Activer l’hébergement sur le bucket S3

Nous savons dorénavant mettre des fichiers dans un bucket, activons l’hébergement de site avec S3. Pour ce faire, retour dans l’interface AWS, service S3, on clique sur notre bucket, onglet propriété.

Capture-d-e-cran-2018-04-30-a--17.55.26

On active la propriété « Hébergement de site Web statique » en indiquant que le document d’index sera index.html.

Capture-d-e-cran-2018-05-01-a--16.02.45

En suivant le point de terminaison donné par AWS (dans mon cas http://gabriel-sagnard.com.s3-website-eu-east-2.amazonaws.com/), on aura droit à une 403. C’est normal, de base le reste du monde n’a pas accès à notre bucket, fort heureusement.

Il faut donc ajouter une police au niveau du bucket cette fois, dans l’onglet « Autorisations » :

{
  "Version":"2012-10-17",
    "Statement":[{
      "Sid":"PublicReadGetObject",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::nomdubucket/*"]
    }
  ]
}

Celle-ci permet à n’importe qui de lire les fichiers dans le bucket. En rafraîchissant on a maintenant notre portfolio.

Capture-d-e-cran-2018-04-13-a--14.13.10

Mettre en place un certificat SSL gratuitement

C’est bien, mais on souhaite que le site soit disponible à travers HTTPS, sans avoir à acheter de certificats ni à gérer le renouvellement.

Chez AWS il y a un service pour ça : Certificate Manager. Avant de démarrer le processus assurez-vous de basculer sur la région «Virginie du Nord» ou us-east-2 car c’est un pré-requis du service dans lequel nous allons utiliser notre certificat.

On suit le processus, qui nous enverra une confirmation par email pour vérifier que nous sommes bien propriétaires du site, en sachant que si le nom de domaine a été acheté chez AWS avec le service Route 53, les choses seront bien plus simples, j'en ai fait les frais pour au final, choisir cette solution.

Capture-d-e-cran-2018-05-03-a--11.01.36

Une fois la requête approuvée, notre certificat est prêt. Le problème de ces certificats est qu’on ne peut pas les récupérer pour les utiliser à l’extérieur d’AWS...dommage.

Nous allons donc devoir le rattacher à une distribution CloudFront.

Utilisation de CloudFront avec un certificat SSL

CloudFront est un CDN, c’est-à-dire qu’il permet de diffuser des contenus au plus près des utilisateurs, en les répliquant dans différents points de présence dans le monde.

Cela permet de limiter la latence et les temps d’affichage quel que soit l’endroit dans le monde où se situent nos utilisateurs.

Nous créons donc une distribution de type web.

11-cm-web-distribution_thumb_450

Pas d’inquiétude devant ce formulaire copieux, allons-y pas à pas. Dans le nom du domaine d’origine nous choisissons notre bucket qui doit être listé.

Niveau stratégie de protocole on choisit de rediriger automatiquement HTTP vers HTTPS.

Plus bas dans les paramètres de distribution ont saisit comme domaine alternatif gabriel-sagnard.com, on choisit le certificat précédemment créé et on crée la distribution.

Capture-d-e-cran-2018-05-03-a--11.01.36-1

Enfin nous définissons index.html comme objet racine par défaut.

Le processus de création de la distribution prend un peu de temps, notez toutefois dans un coin le DNS de la distribution CloudFront.

Configurer votre nom de domaine

Il ne reste plus qu’à faire pointer votre nom de domaine sur la distribution CloudFront, pour cela il vous suffit d’enregistrer votre nom de domaine en tant que CNAME de la distribution CloudFront. Pour ma part comme je le disais précédemment, cela n'a pas fonctionné avec mon nom de domaine OVH, je propose donc d'utiliser le service dédié AWS, Route53.

Si vous utilisez Route53 (le service de DNS d’Amazon Web Services), c’est un peu différent, créez un enregistrement de type A. Choisissez oui par Alias et vous devriez maintenant pouvoir choisir la distribution CloudFront dessous, comme ceci :

Capture-d-e-cran-2018-05-07-a--12.12.19

Voilà c’est terminé !

Désormais vous devriez trouver ceci en vous rendant sur votre nom de domaine :

Capture-d-e-cran-2018-04-13-a--15.02.30

avec un joli certificat :

Capture-d-e-cran-2018-04-21-a--11.48.30

aws s3 sync . s3://nomdubucket --profile votrenom

Cette commande va copier uniquement les fichiers modifiés vers votre bucket. Temps de déploiement : 3 secondes !

La suite au prochain épisode :)

Héberger son site statique sur AWS S3
Share this