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

Date de la dernière mise à jour : 06/10/2020

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.

Ré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 Nom du domaine d'origine, sélectionnez le compartiment que vous avez créé.
    Pour Retreindre l'accès au compartiment, sélectionnez Oui.
    Pour Identité Origin Access Identity, sélectionnez Créer une nouvelle identité.
    Pour Commentaire, vous pouvez choisir de conserver la valeur par défaut. Vous pouvez également saisir une étiquette personnalisée pour l'OAI.
    Pour Accorder des autorisations de lecture sur le compartiment, sélectionnez Oui, Mettre à jour la politique de compartiment.
  3. Si vous ne souhaitez pas utiliser le protocole SSL (HTTPS) pour le site Web, passez à l'étape suivante. Afin d'utiliser SSL pour votre site Web, pour Certificat SSL, vous pouvez sélectionner le certificat CloudFront par défaut ou un certificat SSL personnalisé. Vous pouvez également sélectionner Demander ou importer un certificat avec ACM pour demander un certificat.
    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 : le 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é

Remarque : 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.

  1. Utilisez la console Amazon S3 pour créer un compartiment et 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 à AWSDOC-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éé.
  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 Nom du domaine d'origine, saisissez le point de terminaison que vous avez copié à l'étape 2.
  5. Si vous ne souhaitez pas utiliser le protocole SSL (HTTPS) pour le site Web, passez à l'étape suivante. Afin d'utiliser SSL pour votre site Web, pour Certificat SSL, vous pouvez sélectionner le certificat CloudFront par défaut ou un certificat SSL personnalisé. Vous pouvez également sélectionner Demander ou importer un certificat avec ACM pour demander un certificat.
    Important : si vous avez entré des noms de domaines alternatifs (CNAME) pour votre distribution, les CNAME 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 : le temps d’expiration des valeurs DNS précédentes 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

Remarque : cette configuration limite l'accès en configurant un en-tête Referer personnalisé sur la distribution, puis en utilisant une politique de compartiment pour autoriser l'accès uniquement pour les demandes avec l'en-tête Referer personnalisé. Veillez à évaluer si l'accès autorisé par cette configuration répond aux exigences de votre cas d'utilisation.

  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 à AWSDOC-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 Nom du domaine d'origine, saisissez le point de terminaison que vous avez copié à l'étape 2.
    Pour En-têtes personnalisés d'origine, sous Nom de l'en-tête, saisissez Referer. Sous Valeur, saisissez un en-tête personnalisé que vous souhaitez transmettre à l'origine (compartiment S3). Pour limiter l'accès à l'origine, vous pouvez saisir une valeur aléatoire ou secrète que vous êtes le seul à connaître.
  4. Si vous ne souhaitez pas utiliser le protocole SSL (HTTPS) pour le site Web, passez à l'étape suivante. Afin d'utiliser SSL pour votre site Web, pour Certificat SSL, vous pouvez sélectionner le certificat CloudFront par défaut ou un certificat SSL personnalisé. Vous pouvez également sélectionner Demander ou importer un certificat avec ACM pour demander un certificat.
    Important : si vous avez entré des noms de domaines alternatifs (CNAME) pour votre distribution, les CNAME 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.
    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 : le temps d’expiration des valeurs DNS précédentes 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.