Comment créer un site Web statique en utilisant Amazon S3

Amazon Simple Storage Service (S3) est un service Web proposé par Amazon Web Services (AWS) pour le stockage et l’accès aux objets via Internet. S3 offre aux sites Web, aux services Web et aux applications mobiles la possibilité de télécharger des données et de les stocker sur ses serveurs aux États-Unis. Il fonctionne sur HTTP/S en utilisant des protocoles basés sur TCP. L’utilisation de S3 est gratuite pour les opérations put (stockage) et les demandes GET (récupération).

Ouvrir un seau pour recevoir ou stocker des objets nécessite non seulement une clé de chiffrement spéciale mais aussi une clé partagée qui est fournie par Amazon après la création du compte. Les utilisateurs peuvent s’inscrire gratuitement à un compte qui fournit 5 Go d’espace de stockage par mois, sans limite de quantité à stocker dans les seaux.

Amazon S3 offre une durabilité de 99,999999999%, les données étant stockées dans plusieurs installations pour la redondance. Amazon S3 utilise la même technologie de réplication que celle utilisée par Amazon pour assurer la disponibilité des données de son propre site. Le service vise à optimiser le débit et les coûts en fonction de l’application utilisée et de la quantité de données stockées tout en assurant une protection contre la perte de données.

Il existe également des fonctionnalités qui permettent aux utilisateurs de consulter des analyses sur la quantité de données chargées ou téléchargées via S3, de contrôler la quantité de bande passante utilisée ou de profiter de solutions adaptées aux mobiles. Amazon S3 est disponible sur Internet sans frais pour les utilisateurs. Les taux de transfert de données sont illimités. Les données peuvent être récupérées de n’importe où en moins d’une seconde avec une faible latence, ce qui permet un accès aux ressources quasiment en temps réel. Il élimine également les frais d’hébergement et la planification de la capacité en offrant une option alternative de stockage dans le cloud qui ne nécessite pas d’investissement constant pour héberger les ressources.

Amazon S3 prend en charge les objets de tout type, taille et format. Les objets peuvent être stockés dans n’importe quel seau mais doivent être accessibles via le nom de l’objet. Les utilisateurs peuvent télécharger des fichiers et des dossiers à partir de systèmes internes et publics via HTTP ou HTTPS vers des buckets qui prennent en charge l’intégration de fonctionnalités de système de fichiers NFS (Network File System) ou POSIX. Les utilisateurs ont un contrôle direct sur qui accède à leurs buckets en partageant jusqu’à 70 Go d’espace de stockage avec un autre utilisateur (créé par AWS) qui a un compte sur Amazon S3.

Créer un site Web peut être une tâche décourageante. Il y a tellement d’options et de choix à faire qu’il est facile de se laisser submerger. Mais si tu pouvais créer un site Web sans avoir à te soucier de l’hébergement, des noms de domaine ou de la configuration d’un serveur ? Avec Amazon S3, tu peux facilement créer un site Web statique en n’utilisant rien d’autre que ton ordinateur et une connexion Internet. Dans cet article de blog, nous allons te montrer comment créer ton propre site Web statique à l’aide d’Amazon S3. Nous aborderons également certains des avantages de l’utilisation d’Amazon S3 pour ton site Web. Alors, c’est parti !

Conditions préalables

Pour créer un site Web statique à l’aide d’Amazon S3, tu auras besoin :

  • Un compte Amazon AWS pour configurer ton site Web sur Amazon S3. Cette démo utilise le compte Amazon Free tiered, qui est gratuit et ne présente d’énormes avantages que lorsqu’il est associé à un site Web statique Amazon S3.

Que ferons-nous ?

Dans ce guide, nous allons créer et configurer un site Web statique simple en utilisant Amazon S3. Nous allons également configurer ce site Web statique avec une page d’erreur personnalisée. Ce guide te montrera comment créer un site Web HTML, CSS et JavaScript facile à entretenir et très rentable.

Un site Web statique est un site Web qui se compose uniquement de pages statiques. Il ne contient aucun langage de script côté serveur comme php, asp ou nodejs. Il se compose uniquement d’un fichier html où toutes les pages Web sont stockées. L’hébergement de sites statiques n’est pas nouveau, il existe depuis longtemps.

En utilisant un site statique, tu n’as pas à t’inquiéter des pirates informatiques et tu n’as besoin que de la capacité de servir des pages Web. Lorsqu’il est associé à Amazon S3, le coût est minuscule, comme un ou deux dollars par site. Tu peux ensuite faire évoluer tes pages Web pour répondre aux besoins de ton public avec des millions de lecteurs à partir de là.

Que ferons-nous ?

Pour héberger un site Web statique, tu crées un seau Amazon S3.

Que ferons-nous ?

Et tu télécharges ensuite ton contenu dans ce seau.

Que ferons-nous ?

L’accès public en lecture de ton seau S3 doit être intentionnel. Il est important que tout le monde, partout, puisse lire le seau. Et nous en parlerons plus tard dans ce guide, lorsque nous examinerons la politique du seau.

Que ferons-nous ?

Le site Web sera alors disponible au point de terminaison AWS S3, qui ressemblera à l’URL ci-dessous.

Que ferons-nous ?

Nous avons un lien vers le dépôt GitHub où tu téléchargeras et utiliseras tous les fichiers nécessaires pour réaliser ce guide étape par étape. Es-tu prête ? Bien. Tu peux y aller et te connecter à ta console AWS.

Que ferons-nous ?

Création d’un seau S3

Avant de pouvoir créer ton site Web statique, tu dois d’abord créer et configurer un seau S3. Lorsque tu crées ton site Web statique à l’aide d’Amazon S3, ton site sera stocké dans ce seau.

1. Sur ta console AWS, navigue dans le tableau de bord S3 —> Créer un seau.

Créer un Bucket S3

2. Donne un nom de seau unique (my-howtoforge-bucket-7Vftzchzw). Assure-toi que le nom de ton seau est unique. Les noms de seau peuvent contenir uniquement des lettres minuscules, des chiffres et des traits d’union. Le nom du seau S3 doit être unique dans tout Amazon S3 pour éviter que quelqu’un d’autre ne crée un seau avec le même nom et écrase ton site Web. Ton chemin doit également être conforme au DNS, car deux domaines ne peuvent pas avoir le même nom.

Créer un Bucket S3

3. Désélectionne la case à cocherBloquer tout accès public . Si tu veux que ton site Web reste privé, coche cette case. Si elle est sélectionnée, seuls les comptes AWS authentifiés pourront accéder à ton site Web. Dans ce cas, nous allons désélectionner cette case pour rendre notre exemple public. Ainsi, n’importe qui peut récupérer nos fichiers html dans le seau S3 et voir notre page Web. Coche la case Je reconnais que les paramètres actuels….

Créer un Bucket S3

4. Clique sur Créer un seau en bas de la page.

Créer un seau

5. Tu obtiendras un message vert indiquant« Bucket créé avec succès » avec les détails de ton nouveau seau S3. Clique sur le nom de ton seau —> Copier l’ARN. Le nom de ressource Amazon (ARN) est un identifiant unique pour une ressource AWS. Lorsque tu crées un seau S3, Amazon génère un ARN unique pour le nouveau seau. Pour s’assurer que tes ressources AWS sont sécurisées, Amazon exige que tu utilises tes propres identifiants uniques ou ceux générés par Amazon lorsque tu crées ou modifies des ressources. Tu utiliseras cet ARN pour assurer le suivi de ton seau et créer ton site Web statique.

Créer un Bucket S3

6. Clique sur Télécharger —> Ajouter des fichiers —> Sélectionne les fichiers que tu as téléchargés plus tôt —> Télécharger.

Créer un Bucket S3

Le téléchargement de ton site web est la partie la plus facile de la création d’un site statique à l’aide d’Amazon S3. Le processus de téléchargement peut prendre quelques minutes pour se terminer. Une fois qu’il est terminé, tu peux voir le message vert Succeeded.

Créer un Bucket S3

Activation de l’hébergement de ton site statique

Maintenant que ton site Web est téléchargé sur Amazon S3, tu dois activer ton site Web pour qu’il puisse être consulté. L’hébergement de sites Web statiques te permet de servir des pages HTML, CSS et JavaScript statiques à partir d’un serveur Web conçu pour le contenu statique. C’est plus rentable que les pages Web dynamiques (par ex. PHP ou ASP).

L’hébergement de sites Web statiques peut être utilisé pour servir différents types de fichiers comme des images, CSS, JS et autres fichiers statiques. Ces fichiers ne changent pas très fréquemment et sont faciles à servir à un coût vraiment bas.

1. Clique sur Propriétés —> Hébergement statique de sites Web —> Modifier —> Activer.

Créer un Bucket S3

Active l'hébergement de sites Web statiques

2. Clique sur Activer —>Choisis le type d’ hébergement comme Héberger un site Web statique. Remplis le documentIndex comme index.html, le document Error comme error.html. Fais défiler la page et clique sur Enregistrer les modifications.

Lorsque tu actives l’hébergement de sites Web, tu dois télécharger un document d’index. Le document d’index est le premier fichier que les utilisateurs voient lorsqu’ils accèdent à ton site Web en utilisant le nom de domaine racine, par exemple, http://my-bucket.s3.amazonaws.com/.

Si tu ne crées pas de document d’index, ou si tu le supprimes plus tard, Amazon S3 renvoie soit une page d’erreur 404, soit un fichier d’index par défaut. Le fichier d’index par défaut peut afficher le nom du seau, la date du dernier accès et d’autres informations génériques. Le nom du document d’index est sensible à la casse et doit correspondre exactement au nom du document d’index que tu télécharges à la racine du site, alors assure-toi que le nom de ton document d’index est correctement orthographié.

Le document d’erreur est la page que les utilisateurs voient si une erreur se produit lors d’une tentative d’accès à ton site Web. Ce fichier est facultatif mais recommandé. Si tu ne télécharges pas ton propre document d’erreur personnalisé, Amazon S3 renvoie soit une page d’erreur 404 par défaut, soit le document d’index, s’il existe. Le nom du document d’erreur est également sensible à la casse, alors assure-toi que le nom du document d’erreur que tu télécharges est correctement orthographié.

Active l'hébergement de sites Web statiques

Active l'hébergement de sites Web statiques

3. Tu obtiendras un message vert Successfully edited static website hosting dans le panneau AWS S3 lorsque tu auras activé avec succès l’hébergement de sites Web statiques pour ton seau. Tu vois aussi le point de terminaison du seau de ton site. C’est le nom de ton seau, suivi de s3.website.yourregion.amazonaws.com.

Active l'hébergement de sites Web statiques

4. Ouvre cette URL dans ton navigateur préféré, tu obtiendras un message 403 Forbidden. C’est parce que la politique appropriée n’est pas attribuée. Nous allons définir une politique appropriée pour accéder à ton seau à l’étape suivante.

Active l'hébergement de sites Web statiques

Configurer la politique de seau appropriée

Maintenant que tu as activé l’hébergement de ton site Web sur Amazon S3, tu dois définir une politique de seau pour y accéder. Une politique de seau est un ensemble de permissions pour accéder à un seau Amazon S3. Pour que le public puisse accéder à ton site Web, tu dois ajouter une politique de seau pour autoriser l’accès public à ton seau.

1. Dans ton tableau de bord S3, clique sur l’onglet Permissions —> Modifier.

Configurer la bonne politique du seau

2. Copie et colle les lignes de ce fichier JSON dans l’éditeur JSON. Remplace <BUCKET_ARN> par l’ARN réel que tu as enregistré plus tôt.

  • Version: 2012-10-17 est la version de la politique du seau.
  • Déclaration: PublicReadGetObject est l’action qui doit être exécutée sur tous les objets du seau spécifié.
  • Principal: L’élément Principal spécifie le compte AWS, l’utilisateur IAM ou le groupe qui est autorisé à effectuer l’action spécifiée sur l’objet. Si plusieurs mandants sont identifiés dans l’énoncé, tu dois préciser lequel peut  » prendre des mesures  » en définissant l’élément Action sur Autoriser ou Refuser.
  • Action: L’élément Action spécifie le type d’accès autorisé.
  • Ressource: L’élément Resource spécifie l’objet auquel les autorisations sont appliquées.
  • Dans ce cas, nous avons configuré une règlePublicReadGetObject qui permet à tout le monde d’accéder à ton seau et de récupérer n’importe quel objet(s3:GetObject) dans le seau. D’où l’ astérisque * dans la ligne Principal. L’astérisque * dans la ligne Ressource indiquent que la politique de seau S3 s’applique à tous les objets du seau. Assure-toi qu’après avoir modifié la politique, l’astérisque doit être à la fin comme indiqué.

Configurer la bonne politique du seau

3. Clique sur Enregistrer les modifications lorsque tu as terminé.

Configurer la bonne politique du seau

Ton seau est maintenant accessible au public, comme indiqué ci-dessous. Tu peux voir que ta politique prend effet immédiatement.

Configurer la bonne politique du seau

Test de ta page Web statique

Maintenant que tu as configuré ta politique de seau, tu peux accéder à tes pages Web statiques en ouvrant l’URL du point de terminaison dans ton navigateur.

1. Retourne dans ton navigateur où tu as ouvert l’URL du point de terminaison du seau S3 plus tôt. Recharge l’URL du point de terminaison du seau S3, et cette fois tu devrais voir que l’erreur 404 a disparu. Si tu vois l’erreur 404, cela signifie que quelque chose ne va pas avec ta politique de seau. Tes pages Web statiques vont s’afficher dans le navigateur, comme indiqué ci-dessous. Tu devrais maintenant voir une version HTML joliment formatée de ta page.

Test de ta page Web statique

2. Tu peux aussi tester la page Web d’erreur en allant sur une URL inexistante, la page Web d’erreur que tu as téléchargée précédemment devrait s’afficher, comme indiqué ci-dessous.

Test de ta page Web statique

Conclusion

Dans ce guide, nous avons vu comment héberger gratuitement tes sites Web statiques sur Amazon S3. Ce guide a également couvert l’ensemble du processus de téléchargement du site Web, la configuration de la politique de seau appropriée et l’activation de l’hébergement de sites Web statiques. Ce guide est un moyen simple d’héberger un site Web gratuitement à moindre coût. Le coût facturé par Amazon S3 est très faible par rapport à d’autres services.

Cet article t’a-t-il aidé ? Était-il facile à comprendre ? Tu peux partager ton opinion en laissant un commentaire ci-dessous. Avec ces nouvelles connaissances à ta ceinture, tu peux maintenant automatiser le déploiement de sites Web statiques vers Amazon S3.

Vous aimerez aussi...