Comment puis-je utiliser CloudFront pour diffuser un site Web statique hébergé sur Amazon S3 ?

Dernière mise à jour : 14/09/2021

Je souhaite héberger un site Web statique sur un compartiment Amazon Simple Storage Service (Amazon S3). Je souhaite diffuser mon site Web via une distribution Amazon CloudFront. Comment dois-je procéder ?

Brève description

Pour diffuser un site Web statique hébergé sur Amazon S3, vous pouvez déployer une distribution CloudFront à l'aide de l'une des configurations ci-dessous :

  • Utilisation d'un point de terminaison d'API REST comme origine avec un accès limité par une identité d'accès à l'origine (OAI)
  • Utilisation d'un point de terminaison de site Web comme origine avec un accès (public) anonyme autorisé
  • Utilisation d'un point de terminaison de site Web comme origine avec un accès limité par un en-tête Referer
  • Utilisation d'AWS CloudFormation pour déployer un point de terminaison d'API REST en tant qu'origine, avec accès restreint par une OAI et un domaine personnalisé pointant vers CloudFront

Pour plus d'informations sur les deux types de points de terminaison, consultez Principales différences entre le point de terminaison du site Web Amazon et d'un point de terminaison d'API REST.

Solution

Suivez ces étapes pour configurer une distribution CloudFront avec le type de point de terminaison S3 à utiliser comme origine :

Utilisation d'un point de terminaison d'API REST comme origine avec un accès limité par une OAI

  1. Utilisez la console Amazon S3 pour créer un compartiment et charger vos fichiers de site Web.
    Remarque : vous n'avez pas besoin d'activer l'hébergement de site Web statique sur votre compartiment pour cette configuration. Cette configuration utilise le point de terminaison d'API REST du compartiment, au lieu du point de terminaison du site Web de la fonctionnalité d'hébergement de site Web statique.
  2. Créez une distribution Web CloudFront. Outre les paramètres de distribution dont vous avez besoin pour votre cas d'utilisation, entrez les informations suivantes :
    Pour Domaine d'origine, sélectionnez le compartiment que vous avez créé.
    Pour Accès au compartiment S3, sélectionnez Oui, utiliser l'identité OAI (le compartiment peut restreindre l'accès à CloudFront uniquement).
    Pour Identité d’accès à l’origine, sélectionnez Créer une nouvelle identité OAI. Ensuite, saisissez le nom de l’identité OAI et choisissez Créer.
    Pour Stratégie de compartiment, sélectionnez Oui, mettre à jour la politique de compartiment.
  3. Il est recommandé d'utiliser SSL (HTTPS) pour votre site Web. Pour utiliser un domaine personnalisé avec HTTPS, sélectionnez Certificat SSL personnalisé. Vous pouvez choisir Demander un certificat pour demander un nouveau certificat. Si vous n'utilisez pas de domaine personnalisé, vous pouvez toujours utiliser HTTPS avec le nom de domaine cloudfront.net pour votre distribution.
    Important : si vous avez saisi des noms de domaines alternatifs (CNAME) pour votre distribution, ces noms doivent correspondre au certificat SSL que vous sélectionnez. Pour résoudre les problèmes liés à votre certificat SSL, consultez Comment puis-je résoudre les problèmes liés à l'utilisation d'un certificat SSL personnalisé pour ma distribution CloudFront?
  4. Choisissez Créer une distribution.
  5. Mettez à jour les enregistrements DNS pour que le domaine fasse pointer le CNAME du site Web vers le nom de domaine de la distribution CloudFront. Vous pouvez trouver le nom de domaine de la distribution dans la console CloudFront dans un format similaire au suivant : d1234abcd.cloudfront.net.
  6. Attendez que vos modifications DNS soient propagées et que les entrées DNS précédentes expirent.
    Remarque : la période de temps nécessaire pour que les valeurs DNS précédentes expirent dépend de la valeur TTL définie sur votre zone hébergée et de l'utilisation ou non par votre résolveur local de ces valeurs TTL.

Utilisation d'un point de terminaison de site Web comme origine avec un accès (public) anonyme autorisé

Cette configuration autorise l'accès public en lecture sur le compartiment de votre site Web. Pour plus d'informations, consultez Autorisations requises pour l'accès au site Web.

Remarque : lorsque vous utilisez le point de terminaison du site Web statique Amazon S3, les connexions entre CloudFront et Amazon S3 sont disponibles uniquement via HTTP. Pour utiliser HTTPS pour les connexions entre CloudFront et Amazon S3, configurez un point de terminaison API REST S3 pour votre origine.

  1. Utilisez la console Amazon S3 pour créer un compartiment et pour activer l'hébergement de site Web statique sur le compartiment.
  2. Dans la boîte de dialogue Hébergement de site Web statique, copiez le point de terminaison de votre compartiment sans le début http://. Le format est similaire à DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Le point de terminaison doit être dans ce format pour réaliser une étape ultérieure.
  3. Ajoutez une politique de compartiment qui autorise l'accès public en lecture au compartiment que vous avez créé.
    Remarque : Pour cette configuration, les paramètres d'accès public aux blocs du compartiment S3 doivent être désactivés. Si votre cas d'utilisation nécessite que les paramètres d'accès public aux blocs soient activés, utilisez le point de terminaison de l'API REST comme origine et limitez l'accès par une identité d'accès à l'origine (OAI).
  4. Créez une distribution Web CloudFront. Outre les paramètres de distribution dont vous avez besoin pour votre cas d'utilisation, entrez les informations suivantes :
    Pour Domaine d'origine, saisissez le point de terminaison que vous avez copié à l'étape 2.
    Remarque : Ne sélectionnez pas le compartiment dans la liste déroulante. La liste déroulante inclut uniquement les points de terminaison de l'API REST du compartiment S3 qui ne sont pas utilisés dans cette configuration.
  5. Il est recommandé d'utiliser SSL (HTTPS) pour votre site Web. Pour utiliser un domaine personnalisé avec HTTPS, sélectionnez Certificat SSL personnalisé. Vous pouvez choisir Demander un certificat pour demander un nouveau certificat. Si vous n'utilisez pas de domaine personnalisé, alors vous pouvez toujours utiliser HTTPS avec le nom de domaine cloudfront.net pour votre distribution.
    Important : si vous avez saisi des noms de domaines alternatifs (CNAME) pour votre distribution, ces noms doivent correspondre au certificat SSL que vous sélectionnez. Pour résoudre les problèmes liés à votre certificat SSL, consultez Comment puis-je résoudre les problèmes liés à l'utilisation d'un certificat SSL personnalisé pour ma distribution CloudFront?
  6. Choisissez Créer une distribution.
  7. Mettez à jour les enregistrements DNS pour que le domaine fasse pointer le CNAME du site Web vers le nom de domaine de la distribution CloudFront. Vous pouvez trouver le nom de domaine de la distribution dans la console CloudFront dans un format similaire au suivant : d1234abcd.cloudfront.net.
  8. Attendez que vos modifications DNS soient propagées et que les entrées DNS précédentes expirent.
    Remarque : la période de temps nécessaire pour que les valeurs DNS précédentes expirent dépend de la valeur TTL définie sur votre zone hébergée et de l'utilisation ou non par votre résolveur local de ces valeurs TTL.

Utilisation d'un point de terminaison de site Web comme origine avec un accès limité par un en-tête Referer

Cette configuration limite l'accès en configurant un en-tête Referer personnalisé sur la distribution, puis elle utilise une politique de compartiment pour autoriser l'accès uniquement pour les demandes avec l'en-tête Referer personnalisé.

Important : Veillez à évaluer si l'accès autorisé par cette configuration répond aux exigences de votre cas d'utilisation.

Remarque : lorsque vous utilisez le point de terminaison du site Web statique Amazon S3, les connexions entre CloudFront et Amazon S3 sont disponibles uniquement via HTTP. Pour utiliser HTTPS pour les connexions entre CloudFront et Amazon S3, configurez un point de terminaison API REST S3 pour votre origine.

  1. Utilisez la console Amazon S3 pour créer un compartiment et pour activer l'hébergement de site Web statique sur le compartiment.
  2. Dans la boîte de dialogue Hébergement de site Web statique, copiez le point de terminaison de votre compartiment sans le début http://. Le format est similaire à DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Le point de terminaison doit être dans ce format pour réaliser une étape ultérieure.
  3. Créez une distribution Web CloudFront. Outre les paramètres de distribution dont vous avez besoin pour votre cas d'utilisation, entrez les informations suivantes :
    Pour Domaine d'origine, saisissez le point de terminaison que vous avez copié à l'étape 2. Remarque : Ne sélectionnez pas le compartiment dans la liste déroulante. La liste déroulante inclut uniquement les points de terminaison de l'API REST du compartiment S3 qui ne sont pas utilisés dans cette configuration.
    Sous Ajouter un en-tête personnalisé, choisissez Ajouter un en-tête.
    Pour Nom de l’en-tête, saisissez Referer.
    Pour Valeur, saisissez une valeur d’en-tête personnalisé que vous souhaitez transmettre à l'origine (compartiment S3). Pour limiter l'accès à l'origine, saisissez une valeur aléatoire ou secrète que vous êtes le seul à connaître.
  4. Il est recommandé d'utiliser SSL (HTTPS) pour votre site Web. Pour utiliser un domaine personnalisé avec HTTPS, sélectionnez Certificat SSL personnalisé. Vous pouvez choisir Demander un certificat pour demander un nouveau certificat. Si vous n'utilisez pas de domaine personnalisé, vous pouvez toujours utiliser HTTPS avec le nom de domaine cloudfront.net pour votre distribution.
    Important : si vous avez saisi des noms de domaines alternatifs (CNAME) pour votre distribution, ces noms doivent correspondre au certificat SSL que vous sélectionnez. Pour résoudre les problèmes liés à votre certificat SSL, consultez Comment puis-je résoudre les problèmes liés à l'utilisation d'un certificat SSL personnalisé pour ma distribution CloudFront?
  5. Choisissez Créer une distribution.
  6. Ouvrez le compartiment de votre site Web à partir de la console Amazon S3. Ensuite, ajoutez une stratégie de compartiment qui autorise s3:GetObject à condition que la demande comprenne l'en-tête Referer personnalisé que vous avez spécifié à l'étape 3. Pour cette configuration, les paramètres d'accès public aux blocs du compartiment S3 doivent être désactivés. (Amazon S3 considère qu'une politique de compartiment accordant un accès anonyme restreint par un référent est publique). Si votre cas d'utilisation nécessite que les paramètres d'accès public aux blocs soient activés, utilisez alors le point de terminaison de l'API REST comme origine, avec un accès restreint par une identité d'accès à l'origine (OAI)
    Remarque : pour bloquer l'accès pour n'importe quelle requête qui ne comprend pas l'en-tête Referer personnalisé, utilisez une instruction de refus explicite dans la stratégie de compartiment.
  7. Mettez à jour les enregistrements DNS pour que le domaine fasse pointer le CNAME du site Web vers le nom de domaine de la distribution CloudFront. Vous pouvez trouver le nom de domaine de la distribution dans la console CloudFront dans un format similaire au suivant : d1234abcd.cloudfront.net.
  8. Attendez que vos modifications DNS soient propagées et que les entrées DNS précédentes expirent.
    Remarque : la période de temps nécessaire pour que les valeurs DNS précédentes expirent dépend de la valeur TTL définie sur votre zone hébergée et de l'utilisation ou non par votre résolveur local de ces valeurs TTL.

Utilisation de CloudFormation pour déployer un point de terminaison d'API REST en tant qu'origine, avec accès restreint par une OAI et un domaine personnalisé pointant vers CloudFront

Avec cette solution, votre site Web est :

  • déployé avec CloudFormation ;
  • hébergé sur Amazon S3 ;
  • distribué par CloudFront.
  • Utilise un certificat SSL/TLS d'AWS Certificate Manager (ACM)
  • Utilise Lambda@Edge pour ajouter des en-têtes de sécurité à chaque réponse du serveur

Pour les instructions de déploiement de cette solution, consultez la section Site Web statique sécurisé Amazon CloudFront sur le site Web GitHub.