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 ! CloudFront CDN AWS ​​​​peut servir du contenu Web statique directement à partir d’un compartiment S3, vous permettant de ne payer que 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 via une solution de plate-forme en tant que service telle qu’AWS App Runner ou Lambda Functions. Bien que vous puissiez exécuter une application normale telle que NGINX dans une machine virtuelle EC2, vous pouvez généralement servir la même 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 du site Web, au lieu de le servir vous-même à partir d’un serveur NGINX. « Statique » signifie simplement que vous servez des fichiers plutôt que de créer des pages qui incluent à la fois de simples sites Web HTML + CSS et des applications Web JavaScript complètes côté client. Notamment, cela n’inclut pas les frameworks d’hébergement côté serveur tels que WordPress (PHP), Ruby on Rails et ASP.NET, mais de nombreux sites Web ne contiendront que du contenu statique.

L’avantage de cette solution est l’absence de dépendance vis-à-vis de vos propres serveurs – S3 répondra toujours aux requêtes, ainsi autant de personnes que vous le souhaitez pourront accéder à votre site. Avant S3, vous pouvez utiliser CloudFront, une solution AWS Content Delivery Network (CDN). CloudFront utilise des centaines de caches périphériques, tous mis en cache pour vous dans S3, augmentant la latence et le débit tout en réduisant les coûts.

Dans cette configuration réseau, tout ce qui gère les demandes des utilisateurs est complètement sans serveur. Les serveurs CloudFront sont gérés par AWS et mettent automatiquement en cache le contenu et dirigent les utilisateurs vers un point de terminaison qui n’est qu’un compartiment S3.

Si vous devez exécuter une sorte de backend ou d’API pour connecter votre application Web, vous pouvez probablement utiliser d’autres outils sans serveur comme Lambda Functions pour le faire. Cette configuration est encore meilleure car les requêtes S3 et API seront mises à l’échelle séparément.

Si vous souhaitez en savoir plus sur l’utilisation d’API Gateway comme frontal pour les fonctions Lambda, vous pouvez lire notre guide sur la façon de le configurer.

Bien que simple, il s’agit en fait d’une bonne configuration de niveau entreprise pour l’hébergement de contenu statique sur AWS. Il sera robuste, hautement évolutif et pourra même être utilisé avec le déploiement automatique de CodePipeline pour mettre à jour votre site à partir de fichiers sources.

Combien ça coûte?

Étant donné que l’hébergement sans serveur s’adapte exactement à votre 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. En règle générale, vous paierez un peu plus par heure de processeur que si vous le faisiez vous-même, mais cela est généralement compensé par le fait que vous payez équitablement pour une utilisation exacte.

Cependant, il y a de fortes chances que ce soit juste gratuit. Le niveau AWS Always Free comprend 100 Go de bande passante et un téraoctet complet de bande passante CloudFront. En 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 qui s’additionneront, et si votre site stocke des centaines de Go de contenu, vous pouvez également voir des frais élevés pour cela. Cependant, l’utilisation efficace de la mise en cache CloudFront lorsque cela est possible peut réduire le nombre de requêtes à l’origine (S3) requises, et la plupart des sites seront assez petits.

Configurer un site Web de compartiment S3 statique

Pour commencer, accédez à 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 les cas d’utilisation tels que l’hébergement de sites Web statiques. Puisque c’est exactement ce que nous faisons, vous pouvez l’ignorer, mais vous ne voulez certainement pas charger les secrets dans la corbeille – tout sera lisible.

Il supprime simplement le bloc dessus; vous devrez également autoriser explicitement la lecture publique via la politique de la corbeille dans la section Autorisations. Assurez-vous de remplacer le nom de la ressource ici par le compartiment correct.

{

« Version »: »2012-10-17″,

Déclaration:[

{

« Sid »: »PublicReadGetObject »,

« Effet »: « Autoriser »,

« Directeur »: « * »,

« Action »:[« s3:GetObject »],

« ressource »:[« 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 l’intégralité du dossier, vous pouvez utiliser l’AWS CLI pour synchroniser votre compartiment S3 avec votre répertoire local. Vous pouvez également configurer ce compartiment en tant que sortie d’un déploiement CodePipeline qui peut générer vos artefacts à partir du référentiel source.

Nous allons utiliser l’API S3 et charger le create-react-app modèle de base. Après la synchronisation, vous verrez index.html dans le S3.

aws s3 sync. s3://bucket-name

Avant qu’il ne soit prêt, vous devrez accéder aux propriétés du panier, faire défiler vers le bas pour trouver l’hébergement Web statique et l’activer. Vous devrez configurer un index et un document d’erreur, et c’est également là que vous pourrez écrire les règles de redirection.

Après cela, vous verrez le point de terminaison du site Web dans les propriétés.

Connecter le CDN CloudFront

CloudFront a beaucoup d’options, mais les paramètres par défaut fonctionnent bien pour un site Web S3 simple, donc la configuration est assez facile. Accédez à la console CloudFront  et créez une nouvelle distribution.

Vous pouvez modifier les paramètres de cache, mais le comportement par défaut devrait convenir à la plupart des gens.

Vous devrez connecter votre propre domaine, ce qui inclut la génération d’un certificat SSL pouvant être géré à l’aide d’AWS Certificate Manager (ACM). Vous pouvez cliquer sur ce bouton pour demander un certificat, ce qui peut prendre un certain temps pour valider le DNS si vous n’utilisez pas le DNS AWS Route 53.

Bien sûr, vous devrez également configurer DNS avec un enregistrement CNAME pointant vers le point de terminaison CloudFront.

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