Demo Instructions : Héberger un site web statique avec Amazon S3
Instruction de Labs
Héberger un site web statique avec Amazon S3
Présentation
Amazon S3 peut être utilisé pour héberger un site web statique composé de fichiers tels que :
- HTML ;
- CSS ;
- JavaScript ;
- images.
Un site statique ne nécessite pas de serveur applicatif pour générer dynamiquement les pages. Dans ce lab, vous allez créer un bucket Amazon S3, y charger une page HTML, activer l’hébergement de site web statique et rendre cette page accessible depuis Internet.
Niveau : Débutant
Difficulté : Modérée
Durée estimée : 15 à 20 minutes
Région AWS : Europe (Ireland) — eu-west-1
Service AWS utilisé
- Amazon S3
Notions CLF-C02 couvertes
Cloud Technology and Services : Storage et hébergement de contenu statique
Impact coût : Très faible ; stockage et requêtes S3 limités au lab.
Nettoyage manuel requis : Oui
Environnement du lab
Ressources préinitialisées
Aucune ressource AWS spécifique n’est préinitialisée pour ce lab. Vous allez créer le bucket et le site statique vous-même.
Le compte de lab doit autoriser la désactivation de Block Public Access au niveau du bucket et l’ajout d’une bucket policy publique. Un contrôle Block Public Access imposé au niveau du compte ou de l’organisation peut empêcher la réalisation de ce lab.
Vérification avant de démarrer :
Avant de poursuivre :
- vérifiez que la Région est Europe (Ireland) — `eu-west-1` ;
- vérifiez que votre environnement autorise la création et la suppression de buckets S3 ;
- vérifiez que les permissions du lab permettent de modifier Block Public Access et la bucket policy ;
- préparez le fichier local index.html demandé à l’étape 1.
Attention sécurité
Ce lab rend volontairement le contenu du bucket public afin d’illustrer l’hébergement statique S3. Cette configuration est uniquement destinée à l’exercice. Pour un site public réel, une architecture avec CloudFront et HTTPS est préférable.
Objectifs pédagogiques
À la fin de ce lab, vous serez capable de :
- créer un bucket Amazon S3 ;
- charger une page HTML dans un bucket ;
- activer l’hébergement de site web statique ;
- configurer un document d’index ;
- comprendre le rôle de Block Public Access ;
- utiliser une bucket policy pour autoriser la lecture publique des objets ;
- accéder à un site web hébergé sur Amazon S3 ;
- identifier le Website endpoint d’un bucket ;
- supprimer les ressources créées pendant le lab.
Étape 1 — Créer la page web
Avant de commencer, créez sur votre ordinateur un fichier nommé :
index.html
Ouvrez ce fichier avec un éditeur de texte et ajoutez le contenu suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site sur Amazon S3</title>
</head>
<body data-rsssl=1>
<h1>Bienvenue sur mon site Amazon S3 !</h1>
<p>Cette page web est hébergée dans un bucket Amazon S3.</p>
</body>
</html>
Enregistrez le fichier.
À retenir
index.html sera la page d’accueil de votre site web.
Étape 2 — Accéder à Amazon S3
- Connectez-vous à la console AWS.
- Dans la barre de recherche située en haut de la console, saisissez :
S3
- Sélectionnez :
S3
Vous arrivez sur la console Amazon S3.
Étape 3 — Créer un bucket
Dans le menu de gauche, sélectionnez :
General purpose buckets
Cliquez sur :
Create bucket
Étape 4 — Choisir la Région
Dans :
AWS Region
sélectionnez :
Europe (Ireland) — eu-west-1
Étape 5 — Donner un nom au bucket
Dans :
Bucket name
saisissez un nom unique. Par exemple :
lab-static-site-123456
Remplacez 123456 par quelques chiffres permettant de rendre votre nom unique. Par exemple :
lab-static-site-847291
À retenir
Le nom d’un bucket Amazon S3 doit être unique.
Notez le nom de votre bucket. Vous l’utiliserez plus tard dans le lab.
Étape 6 — Conserver Object Ownership par défaut
Repérez :
Object Ownership
Conservez :
ACLs disabled
et :
Bucket owner enforced
Aucune modification n’est nécessaire.
Étape 7 — Conserver Block Public Access pour le moment
Repérez :
Block Public Access settings for this bucket
Conservez :
Block all public access
activé pour le moment. Vous modifierez ce paramètre plus tard, au moment de rendre le site accessible publiquement.
Étape 8 — Conserver les autres paramètres par défaut
Conservez les valeurs par défaut pour :
- Bucket Versioning ;
- Tags ;
- Default encryption ;
- Advanced settings.
Cliquez ensuite sur :
Create bucket
Votre bucket est créé.
Étape 9 — Ouvrir le bucket
Dans :
General purpose buckets
recherchez le bucket que vous venez de créer. Par exemple :
lab-static-site-847291
Cliquez sur son nom. Le bucket est actuellement vide.
Étape 10 — Charger la page HTML
Dans l’onglet :
Objects
cliquez sur :
Upload
Cliquez ensuite sur :
Add files
Sélectionnez :
index.html
Cliquez sur :
Open
Puis sur :
Upload
Attendez que l’upload soit terminé. Cliquez sur :
Close
Étape 11 — Vérifier l’objet
Dans l’onglet :
Objects
vous devriez maintenant voir :
index.html
Votre bucket contient la page qui servira de page d’accueil au site.
Étape 12 — Activer l’hébergement de site web statique
Ouvrez l’onglet :
Properties
Faites défiler la page jusqu’à la section :
Static website hosting
Cliquez sur :
Edit
Étape 13 — Activer Static website hosting
Dans :
Static website hosting
sélectionnez :
Enable
Puis sélectionnez :
Host a static website
ou :
Use this bucket to host a website
selon l’intitulé affiché dans la console.
Étape 14 — Configurer le document d’index
Dans :
Index document
saisissez :
index.html
Le nom doit correspondre exactement au fichier chargé dans le bucket. Conservez les autres paramètres par défaut. Cliquez sur :
Save changes
À retenir
Le document d’index est la page qu’Amazon S3 retourne lorsqu’un utilisateur accède à la racine du site.
Le nom est sensible à la casse :
index.html
et
Index.html
sont considérés comme deux noms différents.
Étape 15 — Identifier le Website endpoint
Vous revenez dans l’onglet :
Properties
Descendez jusqu’à :
Static website hosting
Vous devriez maintenant voir :
Bucket website endpoint
L’adresse ressemble à :
http://NOM-DU-BUCKET.s3-website-eu-west-1.amazonaws.com
ou à une forme équivalente correspondant à la Région. Copiez cette adresse. Vous allez l’utiliser pour accéder à votre site.
Étape 16 — Tester le site
Ouvrez un nouvel onglet dans votre navigateur. Collez le :
Bucket website endpoint
Vous devriez obtenir un message de type :
403 Forbidden
ou :
Access Denied
C’est normal. Vous avez activé l’hébergement du site, mais les objets du bucket sont toujours privés.
À retenir
Activer Static website hosting ne rend pas automatiquement le contenu du bucket public.
Étape 17 — Modifier Block Public Access
Retournez dans votre bucket. Ouvrez l’onglet :
Permissions
Repérez :
Block public access (bucket settings)
Cliquez sur :
Edit
Étape 18 — Désactiver Block Public Access pour ce bucket
Décochez :
Block all public access
Les quatre options associées sont désactivées. Cliquez sur :
Save changes
AWS affiche un avertissement indiquant que le bucket pourra recevoir des configurations autorisant un accès public. Confirmez la modification selon les instructions affichées dans la console.
Attention
Cette modification est effectuée volontairement dans ce lab afin de rendre le site accessible depuis Internet.
Il ne faut pas rendre un bucket public lorsqu’un cas d’usage ne l’exige pas.
Étape 19 — Observer le statut du bucket
Après avoir désactivé Block Public Access, le bucket n’est pas encore nécessairement accessible publiquement. Vous avez seulement autorisé la possibilité de définir des permissions publiques. Vous devez maintenant ajouter une bucket policy autorisant la lecture des objets.
Étape 20 — Accéder à Bucket policy
Toujours dans l’onglet :
Permissions
faites défiler jusqu’à :
Bucket policy
Cliquez sur :
Edit
Un éditeur JSON apparaît.
Étape 21 — Ajouter la Bucket policy
Copiez la policy suivante :
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::NOM-DU-BUCKET/*"
}
]
}
Remplacez :
NOM-DU-BUCKET
par le nom exact de votre bucket. Par exemple, si votre bucket s’appelle :
lab-static-site-847291
la ligne devient :
"Resource": "arn:aws:s3:::lab-static-site-847291/*"
Étape 22 — Vérifier la Bucket policy
Votre policy doit ressembler à ceci :
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::lab-static-site-847291/*"
}
]
}
Ne recopiez pas cet exemple tel quel si votre bucket porte un autre nom. Cliquez sur :
Save changes
Étape 23 — Comprendre la Bucket policy
Cette policy autorise l’action :
s3:GetObject
pour :
Principal: "*"
Cela signifie que les objets du bucket peuvent être lus publiquement. Elle n’accorde pas :
- s3:PutObject ;
- s3:DeleteObject ;
- les droits d’administration du bucket.
À retenir
Une bucket policy permet de définir des autorisations applicables à un bucket Amazon S3 et à ses objets.
Ici, nous autorisons uniquement la lecture publique des objets.
Étape 24 — Observer le statut Public
Revenez au niveau de votre bucket. La console peut maintenant afficher une indication telle que :
Public
ou :
Publicly accessible
Cela indique que la configuration du bucket permet un accès public. C’est le comportement attendu pour ce lab.
Étape 25 — Tester de nouveau le site
Retournez dans l’onglet du navigateur contenant le :
Bucket website endpoint
Actualisez la page. Vous devriez maintenant voir :
Bienvenue sur mon site Amazon S3 !
et :
Cette page web est hébergée dans un bucket Amazon S3.
Votre site web statique est maintenant accessible depuis Internet.
Étape 26 — Comprendre ce qui vient de se passer
Pour rendre cette page disponible depuis le Website endpoint, plusieurs éléments ont été nécessaires :
- créer le bucket ;
- charger index.html ;
- activer Static website hosting ;
- définir index.html comme document d’index ;
- autoriser la configuration d’un accès public ;
- ajouter une bucket policy autorisant s3:GetObject.
Étape 27 — Modifier la page web
Vous allez maintenant observer comment mettre à jour votre site. Sur votre ordinateur, ouvrez :
index.html
Modifiez son contenu pour obtenir par exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site sur Amazon S3</title>
</head>
<body data-rsssl=1>
<h1>Mon site fonctionne !</h1>
<p>Cette nouvelle version est toujours hébergée sur Amazon S3.</p>
</body>
</html>
Enregistrez le fichier.
Étape 28 — Charger la nouvelle version
Retournez dans votre bucket. Ouvrez :
Objects
Cliquez sur :
Upload
Puis :
Add files
Sélectionnez de nouveau :
index.html
Cliquez sur :
Upload
Amazon S3 vous informe que l’objet portant la même clé existe déjà. Confirmez l’upload. Le nouveau fichier remplace la version précédente puisque le versioning du bucket n’est pas activé.
Étape 29 — Vérifier la mise à jour du site
Retournez sur le :
Bucket website endpoint
Actualisez la page. Vous devriez maintenant voir :
Mon site fonctionne !
et :
Cette nouvelle version est toujours hébergée sur Amazon S3.
Vous venez de mettre à jour votre site web en remplaçant simplement le fichier HTML stocké dans Amazon S3.
Étape 30 — Comprendre ce qu’est un site web statique
Amazon S3 peut héberger des fichiers qui sont envoyés directement au navigateur. Par exemple :
- HTML ;
- CSS ;
- JavaScript ;
- images.
Il ne fournit pas, dans ce mode, un serveur applicatif exécutant du code côté serveur comme :
- PHP ;
- Java ;
- Python ;
- Node.js.
À retenir
Amazon S3 est adapté à l’hébergement de contenu web statique.
Étape 31 — Observer le protocole utilisé
Regardez l’adresse de votre :
Bucket website endpoint
Elle commence par :
http://
Les endpoints natifs d’hébergement de sites web Amazon S3 ne prennent pas en charge HTTPS. Dans une architecture réelle nécessitant HTTPS, Amazon CloudFront peut être placé devant Amazon S3. Cette configuration n’est pas nécessaire dans ce lab.
Nettoyage du lab :
- Dans S3 → votre bucket → Objects, supprimez index.html.
- Vérifiez que le bucket est vide.
- Revenez dans General purpose buckets.
- Sélectionnez votre bucket lab-static-site-XXXXXX et choisissez Delete.
- Saisissez le nom exact du bucket lorsque la console le demande et confirmez.
La suppression du bucket supprime également sa configuration de Static website hosting et sa bucket policy.
Validation du lab :
Vous avez terminé le lab si vous avez réussi à :
- créer un bucket Amazon S3 ;
- charger un fichier index.html ;
- activer Static website hosting ;
- configurer index.html comme document d’index ;
- identifier le Bucket website endpoint ;
- constater que le site n’est initialement pas accessible publiquement ;
- désactiver Block Public Access pour le bucket ;
- ajouter une bucket policy autorisant s3:GetObject ;
- accéder au site depuis un navigateur ;
- modifier puis recharger index.html ;
- constater la mise à jour du site ;
- supprimer l’objet ;
- supprimer le bucket.
En cas de problème
Le nom du bucket est déjà utilisé
Les noms de buckets Amazon S3 doivent être uniques. Ajoutez des chiffres supplémentaires. Par exemple :
lab-static-site-839247
Je ne trouve pas Static website hosting
Ouvrez votre bucket. Sélectionnez :
Properties
Descendez jusqu’à :
Static website hosting
puis cliquez sur :
Edit
Mon site affiche Access Denied
Vérifiez les trois éléments suivants.
1. Block Public Access
Dans :
Permissions → Block public access
vérifiez que Block Public Access est désactivé pour le bucket.
2. Bucket policy
Vérifiez que la policy autorise :
s3:GetObject
sur :
arn:aws:s3:::NOM-DU-BUCKET/*
3. Nom du document d’index
Vérifiez que :
Index document
est exactement :
index.html
et que l’objet chargé porte exactement le même nom.
La Bucket policy est refusée
Vérifiez :
- que le nom du bucket dans la policy est correct ;
- que vous avez conservé /* après le nom du bucket ;
- que Block Public Access a été désactivé pour le bucket ;
- que votre environnement de lab autorise les bucket policies publiques.
Je vois le fichier dans S3 mais pas le site
N’utilisez pas simplement l’Object URL. Retournez dans :
Properties → Static website hosting
et utilisez le :
Bucket website endpoint
J’obtiens une erreur 404
Vérifiez que :
index.html
est bien présent à la racine du bucket. Vérifiez également que le nom indiqué dans :
Index document
est exactement :
index.html
Le site affiche toujours l’ancienne page
Actualisez votre navigateur. Si nécessaire, effectuez une actualisation forcée de la page pour éviter d’utiliser une version conservée dans le cache du navigateur.
Je ne peux pas supprimer le bucket
Vérifiez que le bucket est vide. Supprimez d’abord tous les objets présents dans :
Objects
puis réessayez.
Lab terminé
Félicitations ! Vous savez maintenant :
- utiliser Amazon S3 pour héberger un site web statique ;
- configurer un document d’index ;
- comprendre le rôle du Website endpoint ;
- comprendre pourquoi l’hébergement statique ne rend pas automatiquement un bucket public ;
- utiliser Block Public Access et une bucket policy ;
- autoriser la lecture publique d’un contenu web ;
- mettre à jour un site statique ;
- supprimer les ressources lorsqu’elles ne sont plus nécessaires.
