Introduction

À l’ère numérique d’aujourd’hui, disposer d’un site web bien structuré et fonctionnel est indispensable pour toute entreprise ou individu souhaitant maintenir une présence en ligne. Dans ce blog, nous vous guiderons à travers le processus d’hébergement d’un site web statique dans un bucket Amazon S3, et en utilisant CloudFront pour le réseau de diffusion de contenu (CDN). Commençons.

Ce guide suppose que vous avez une compréhension de base d’AWS et que le code source de votre site web est prêt à être utilisé.

Nous construirons le code source avec le framework Astro.

Pourquoi ai-je choisi d’héberger mon site web dans un bucket S3 ? Parce que c’est une solution flexible et peu coûteuse par rapport à l’hébergement sur un serveur. Une fois la configuration terminée, la mise à jour du site ne nécessite qu’un téléchargement de dossier dans un bucket. De plus, c’est une solution très peu coûteuse, en fonction du nombre de visites, à partir de quelques centimes par mois dans mon cas, pour un site personnel avec un trafic très faible.

Guide étape par étape

Les prérequis pour ce guide :

• Le code source d’un site web statique
• Un compte AWS
• Un DNS hébergé dans Route 53 (ou le fournisseur de votre choix), le nom de domaine étant votre.site.web dans ce tutoriel
• Nom de bucket en tant que nom-de-mon-bucket dans ce tutoriel

1. Préparation du code source de votre site web

Tout d’abord, nous aurons besoin des sources pour notre site web statique, construites par le framework de votre choix, ou en HTML/JS/CSS simple si vous préférez.

Dans mon cas, je développe mon site web avec le framework Astro avec la fonctionnalité de site statique.

npm install
npm run build

Cette ligne de commande installe toutes les dépendances nécessaires de Node.js et construit le code source final du site web statique. Par défaut, les sources sont générées dans le dossier dist/. Ce contenu sera téléchargé dans notre bucket S3 pour être hébergé en tant que site web.

Il est important d’avoir les pages suivantes à la racine de votre site web.

• /index.html, la page d’accueil de votre site web
• /error.html, la page d’erreur par défaut, dans l’exemple suivant, j’ai également une page 404.html pour les redirections d’erreur 404 not found.

2. Configuration d’un site web statique sur Amazon S3

Une fois que le code source du site web est prêt et que les sources finales sont construites, la prochaine étape consiste à créer un bucket sur Amazon S3 et à télécharger les fichiers sources préparés. Ce processus implique la configuration du bucket S3, l’activation de l’hébergement du site web statique, l’ajustement des autorisations et la configuration de la redirection des erreurs.

Configuration du bucket S3

Accédez à la gestion des buckets d’Amazon S3 et créez un nouveau bucket :

• Nom du bucket : nom-de-mon-bucket
• Région AWS de votre choix
• Décochez l’option “Bloquer tout l’accès public”, cela définira le bucket comme public.
• Assurez-vous de reconnaître les paramètres de sécurité et de conserver les configurations par défaut.
• Une fois le bucket créé, téléchargez les fichiers sources de l’étape 1.

Consultez les meilleures pratiques de nommage des buckets AWS S3

Activation de l’hébergement de site web statique

Ensuite, activez l’hébergement du site web statique dans les propriétés du bucket.

• Accédez à votre bucket, puis sous l’onglet Propriétés
• Modifiez l’hébergement de site web statique et activez-le.
• Type d’hébergement : “Héberger un site web statique”
• Document index : index.html (ou le nom de votre page d’accueil dans les fichiers sources)
• Document d’erreur : error.html (ou votre page d’erreur spécifique dans les fichiers sources)

Enregistrez les modifications apportées.

Vous trouverez l’URL du site web statique pour votre bucket sous l’onglet Propriétés, section Hébergement de site web statique

Trouvez plus d’informations utiles dans la documentation AWS S3 : Activation de l’hébergement de site web

Ajustement des autorisations

À ce stade, lorsque vous accédez à l’URL du site web, vous pouvez rencontrer une erreur 403 Forbidden avec le code : AccessDenied. Nous résoudrons ce problème en ajustant les autorisations dans l’édition du bucket.

• Accédez à votre bucket, puis sous l’onglet Autorisations
• Faites défiler jusqu’à la Politique du bucket et modifiez-la.
• Collez la politique suivante et configurez votre bucket en tant que ressource (remplacez nom-de-mon-bucket par le nom de votre bucket)

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

Consultez la documentation AWS S3 : Configuration des autorisations pour l’accès au site web

Configuration de la redirection des erreurs (facultatif)

Pour offrir une meilleure expérience utilisateur, vous pouvez configurer une redirection automatique vers une page personnalisée pour les pages inexistantes (erreur 404). Ce processus implique la configuration de règles de redirection dans la configuration d’hébergement de site web statique de votre bucket.

• Accédez à votre bucket, puis sous l’onglet Propriétés
• Modifiez la configuration d’hébergement de site web statique
• Collez la règle de redirection suivante, adaptez-la selon votre configuration (remplacez nom-de-mon-bucket.s3-website.eu-west-3.amazonaws.com par votre hôte de site web S3 bucket)

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "nom-de-mon-bucket.s3-website.eu-west-3.amazonaws.com",
            "ReplaceKeyWith": "404.html"
        }
    }
]

Cette étape est facultative. Consultez les règles de redirection possibles dans la documentation AWS S3 : Configuration d’une redirection de page web

3. Configuration du certificat SSL et du CDN

Après avoir configuré le site web statique sur Amazon S3, la prochaine étape consiste à sécuriser votre domaine avec un certificat SSL et à configurer un réseau de diffusion de contenu (CDN) à l’aide de CloudFront d’Amazon.

Demande d’un certificat SSL

Accédez au Gestionnaire de certificats et demandez un nouveau certificat pour votre domaine.

• N’oubliez pas que le certificat doit être dans la région us-east-1, c’est une exigence de CloudFront pour le moment (novembre 2023)
• Demandez un certificat public
• Nom de domaine : votre.site.web
• Choisissez la méthode de validation qui vous convient le mieux (DNS ou e-mail)
• Une fois le certificat demandé, l’état est “En attente de validation”

Suivez les instructions pour le processus de validation selon la méthode choisie, par e-mail ou DNS

Validation du certificat via Route 53

Si votre DNS n’est pas hébergé dans AWS Route 53, consultez la documentation de votre fournisseur DNS. Vous aurez besoin du nom CNAME et de la valeur dans la page du certificat SSL

• Allez dans Route 53 sous votre DNS
• Créez un nouveau type d’enregistrement CNAME
• Copiez le nom et la valeur du certificat SSL dans l’étape précédente

Le processus de validation peut prendre quelques minutes pour se terminer.

4. Configuration du CDN et du DNS pour votre site web

Maintenant que notre site web fonctionne dans notre bucket S3 et que nous avons un certificat SSL pour notre DNS personnalisé, nous pouvons finaliser la configuration du CDN CloudFront et enfin configurer le nom de domaine du site web. Le nom de domaine redirigera vers la distribution CloudFront.

Création de votre distribution CloudFront

• Accédez à CloudFront et créez une nouvelle distribution
• Dans le domaine d’origine, collez l’hôte de votre site web S3 bucket : nom-de-mon-bucket.s3-website.eu-west-3.amazonaws.com (remplacez-le par votre hôte de site web S3 bucket)
• Choisissez la redirection des requêtes de HTTP vers HTTPS
• Choisissez le certificat que vous venez de valider
• Ajoutez un domaine alternatif, pointant vers votre DNS votre.site.web

Si vous ne voyez pas le certificat, cela peut être l’une des raisons suivantes :

• essayez de rafraîchir la page ou le bouton de rafraîchissement à côté de la sélection du certificat
• le certificat SSL est-il valide ?
• le certificat SSL est-il dans la région correcte requise par CloudFront (us-east-1 en novembre 2023) ?

Configuration du nom de domaine vers la distribution CloudFront

Si votre DNS n’est pas hébergé dans AWS Route 53, consultez la documentation de votre fournisseur DNS. Vous redirigerez votre nom de domaine personnalisé vers le nom de domaine de distribution CloudFront trouvé sous l’onglet Distribution CloudFront et Général. Le nom de domaine ressemble à ce qui suit : <ID-de-la-distribution>.cloudfront.net

Route 53

La dernière étape consiste à configurer votre domaine pour pointer vers la distribution CloudFront.

• Allez dans Route 53
• Créez un nouvel enregistrement
• Le nom est votre domaine personnalisé votre.site.web
• Sélectionnez Alias, et choisissez Alias vers la distribution CloudFront.
• Choisissez votre distribution créée

Après quelques minutes, votre site web sera accessible via votre domaine personnalisé avec le certificat SSL approprié.

Autres fournisseurs DNS

• Accédez à votre fournisseur DNS
• Créez un nouvel enregistrement A
• Le nom est votre domaine personnalisé votre.site.web
• La valeur est l’hôte de distribution CDN : <ID-de-la-distribution>.cloudfront.net

Conclusion

En conclusion, l’hébergement d’un site web statique sur Amazon S3 est une méthode pratique, peu coûteuse et efficace pour maintenir une présence en ligne. Le processus implique la construction du code source du site web, la configuration du site web statique sur Amazon S3, la sécurisation du domaine avec un certificat SSL, et la configuration d’un CDN avec Amazon CloudFront.

Ce guide a couvert chacune de ces étapes en détail, de la configuration du bucket S3 et de l’activation de l’hébergement de site web statique, à l’ajustement des autorisations et à la configuration de la redirection des erreurs. De plus, il a abordé les étapes pour sécuriser votre domaine, demander un certificat SSL et configurer un CDN. Enfin, il a souligné l’importance de finaliser la configuration DNS pour garantir que votre site web est accessible avec le certificat SSL approprié.