Comment héberger un site Web sans serveur avec AWS CloudFront et S3
Agence web » Actualités du digital » Comment héberger un site Web sans serveur avec AWS CloudFront et S3

Comment héberger un site Web sans serveur avec AWS CloudFront et S3

Si vous souhaitez exécuter un site Web sur AWS, vous n’aurez peut-être même pas besoin d’un serveur ! Le CDN CloudFront d’AWS peut servir du contenu Web statique directement à partir d’un compartiment S3, vous laissant payer uniquement pour les demandes et les données transférées (qui peuvent même être gratuites).

Comment fonctionne l’hébergement sans serveur ?

« Sans serveur » est le concept d’exécution d’applications sans gérer vous-même des serveurs Linux dédiés, généralement avec une solution de plate-forme en tant que service comme App Runner ou Lambda Functions d’AWS. Bien que vous puissiez exécuter une application normale comme NGINX sur une machine virtuelle EC2, vous pouvez généralement servir le même type d’application sans exécuter de serveurs.

Cette solution sans serveur particulière utilise le service de stockage simple (S3) d’AWS pour héberger le contenu statique d’un site Web, plutôt que d’avoir à le servir vous-même à partir d’un serveur NGINX. « Statique » signifie simplement que vous servez des fichiers et que vous ne générez pas de pages, ce qui inclut à la fois de simples sites Web HTML + CSS, ainsi que des applications Web JavaScript complètes côté client. Notamment, cela exclut les frameworks d’hébergement côté serveur comme WordPress (PHP), Ruby on Rails et ASP.NET, mais de nombreux sites Web ne seront que du contenu statique.

L’avantage de cette solution est de ne pas dépendre de vos propres serveurs. S3 répondra toujours aux demandes, vous pouvez donc avoir autant de personnes que vous le souhaitez pour accéder à votre site. Devant S3, vous pouvez utiliser CloudFront, la solution Content Delivery Network (CDN) d’AWS. CloudFront exécute des centaines de caches périphériques, qui mettent en cache toutes les requêtes vers S3 pour vous, ce qui augmente la latence et le débit et réduit les coûts.

Dans cette configuration réseau, tout ce qui traite les demandes des utilisateurs est entièrement sans serveur. Les serveurs CloudFront sont gérés par AWS et mettront automatiquement en cache le contenu et achemineront les utilisateurs vers le point de terminaison, qui est simplement un compartiment S3.

Si vous avez besoin d’exécuter une sorte de backend ou d’API pour que votre application Web se connecte, vous pouvez probablement utiliser d’autres outils sans serveur comme Lambda Functions pour y parvenir. Cette configuration est encore meilleure, car les demandes adressées à S3 et à l’API évolueront séparément.

Si vous souhaitez en savoir plus sur l’utilisation d’API Gateway comme interface pour les fonctions Lambda, vous pouvez lire notre guide sur sa configuration.

Malgré sa simplicité, il s’agit en fait d’une bonne configuration d’entreprise pour l’hébergement de contenu statique sur AWS. Il sera fiable, parfaitement évolutif et pourra même être utilisé avec un déploiement automatique CodePipeline pour mettre à jour votre site à partir de ses fichiers sources.

Combien ça coûte?

Comme l’hébergement sans serveur évolue exactement avec l’utilisation, vous ne payez que ce que vous utilisez. Cela peut vous faire économiser beaucoup d’argent sur des serveurs qui seraient autrement pour la plupart inactifs. Généralement, vous allez payer un peu plus par heure CPU que si vous le faisiez vous-même, mais cela est généralement compensé par le fait que vous êtes facturé équitablement pour une utilisation exacte.

Cependant, il y a une bonne possibilité que ce soit juste libre. Le « niveau toujours gratuit » d’AWS comprend 100 Go de bande passante et un téraoctet entier de bande passante CloudFront. À titre de comparaison, la plupart des autres niveaux gratuits des services d’hébergement de sites statiques (comme les pages Github et Firebase) vous donneront environ 10 Go.

1 To de bande passante gratuite est certainement très agréable, car cela signifie que la plupart des sites Web qui ne proposent pas des tonnes de contenu auront une grande mémoire tampon avant d’être facturés pour des montants importants.

Cependant, vous serez toujours facturé pour les requêtes S3, ce qui s’additionnera, et si votre site stocke des centaines de Go de contenu, vous pouvez également voir des frais élevés pour cela. L’utilisation efficace de la mise en cache de CloudFront lorsque cela est possible peut cependant réduire le nombre de requêtes requises à l’origine (S3), et la plupart des sites seront assez petits.

Configuration d’un site Web statique de compartiment S3

Pour commencer, rendez-vous sur la console de gestion S3 et créez un nouveau compartiment. Vous devez désactiver « Bloquer l’accès public » pour qu’il soit visible. AWS avertit que c’est une mauvaise idée, sauf pour des cas d’utilisation comme l’hébergement de sites Web statiques. Parce que c’est exactement ce que nous faisons, vous pouvez ignorer cela, mais vous ne voudrez certainement pas télécharger des secrets dans le bucket – tout sera lisible.

Cela supprime simplement le bloc dessus; vous devrez également autoriser explicitement les lectures publiques avec une stratégie de compartiment, sous « Autorisations ». Assurez-vous de remplacer le nom de la ressource ici par le compartiment correct.

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

Ensuite, vous devrez télécharger votre contenu. Vous pouvez effectuer un glisser-déposer, mais si vous souhaitez transférer manuellement un dossier entier, vous pouvez utiliser l’AWS CLI pour synchroniser un compartiment S3 avec un répertoire local. Vous pouvez également configurer ce compartiment comme sortie pour un déploiement CodePipeline, qui peut créer vos artefacts à partir du référentiel source.

Nous allons utiliser l’API S3 et télécharger une base create-react-app modèle. Une fois synchronisé, vous verrez le index.html dans le compartiment S3.

aws s3 sync . s3://bucket-name

Avant qu’il ne soit prêt, vous devrez accéder aux propriétés du compartiment, faire défiler vers le bas pour trouver « Hébergement Web statique » et l’activer. Vous devrez configurer l’index et le document d’erreur, et vous pouvez également écrire des règles de redirection ici.

Une fois cela fait, vous verrez le point de terminaison du site Web sous les propriétés.


Connecter un CDN CloudFront

CloudFront a beaucoup d’options, mais les paramètres par défaut fonctionneront bien pour un site Web S3 simple, donc sa configuration est assez facile. Rendez-vous sur la console CloudFront et créez une nouvelle distribution.

Vous pouvez configurer les paramètres du cache, mais le comportement par défaut devrait convenir à la plupart des utilisateurs.

Vous devrez connecter votre domaine personnalisé, ce qui implique la création d’un certificat SSL géré via AWS Certificate Manager (ACM). Vous pouvez cliquer sur ce bouton pour demander un certificat, ce qui peut prendre un certain temps pour vérifier le DNS si vous n’utilisez pas le DNS Route 53 d’AWS.

Vous devrez bien sûr également configurer votre DNS avec un enregistrement CNAME pointant vers le point de terminaison CloudFront.

Une fois votre certificat et votre DNS configurés, créez la distribution et attendez environ 15 minutes que CloudFront la déploie. Une fois cela fait, vous pourrez visiter le point de terminaison CloudFront ou votre domaine personnalisé et voir votre site servi à partir du compartiment S3.

test site s3