Démarrer avec un site web statique sécurisé - Amazon CloudFront

Démarrer avec un site web statique sécurisé

Vous pouvez démarrez avec Amazon CloudFront en utilisant la solution décrite dans cette rubrique pour créer un site web statique sécurisé pour votre nom de domaine. Un site web statique utilise uniquement des fichiers statiques (tels que HTML, CSS, JavaScript, images et vidéos) et n'a pas besoin de serveurs ou de traitement côté serveur. Avec cette solution, votre site web bénéficie des avantages suivants :

  • Utilise le stockage durable d'Amazon Simple Storage Service (Amazon S3) – Cette solution crée un compartiment Amazon S3 pour héberger le contenu de votre site web statique. Pour mettre à jour votre site web, il vous suffit de charger vos nouveaux fichiers dans le compartiment S3.

  • Il est accéléré par le réseau de diffusion de contenu Amazon CloudFront – Cette solution crée une distribution CloudFront pour diffuser votre site web auprès des utilisateurs avec une faible latence. La distribution est configurée avec une identité d'accès à l'origine, pour s'assurer que le site web est accessible uniquement via CloudFront et non directement depuis S3.

  • Il est sécurisé par HTTPS et des en-têtes de sécurité supplémentaires – cette solution crée un certificat SSL/TLS dans AWS Certificate Manager (ACM) et l'attache à la distribution CloudFront. Ce certificat permet à la distribution de diffuser le site web de votre domaine en toute sécurité avec HTTPS.

    Cette solution utilise également Lambda@Edge pour ajouter des en-têtes de sécurité à chaque réponse du serveur. Les en-têtes de sécurité sont un groupe d'en-têtes dans la réponse du serveur Web qui indiquent aux navigateurs web d’appliquer des mesures de sécurité supplémentaires. Pour de plus amples informations, reportez-vous à cet article de blog : Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront.

  • Il est configuré et déployé avec AWS CloudFormation – cette solution utilise un modèle AWS CloudFormation pour configurer tous les composants. Vous pouvez ainsi vous concentrer davantage sur le contenu de votre site web et que sur la configuration des composants.

Cette solution est en open source sur GitHub. Pour afficher le code, envoyer une demande d'extraction ou ouvrir un problème, accédez à https://github.com/aws-samples/amazon-cloudfront-secure-static-site.

Présentation de la solution

Le diagramme suivant présente un aperçu du fonctionnement de cette solution de site web statique :


                Schéma de présentation d'un site web statique sécurisé avec CloudFront
  1. L'utilisateur demande le site web à l'adresse www.example.com.

  2. Si l'objet demandé est mis en cache, CloudFront renvoie l'objet depuis son cache à l'utilisateur.

  3. Si l'objet n'est pas dans le cache de CloudFront, CloudFront demande l'objet à partir de l'origine (un compartiment S3).

  4. S3 renvoie l'objet à CloudFront, ce qui déclenche l'événement de réponse de l'origine Lambda@Edge.

  5. L'objet, y compris les en-têtes de sécurité ajoutés par la fonction Lambda@Edge, est ajouté au cache CloudFront.

  6. (Non affiché) Les objets sont renvoyés à l'utilisateur. Les demandes ultérieures pour l'objet qui se trouvent sur le emplacement périphérique CloudFront sont diffusées à partir du cache CloudFront.

Déploiement de la solution

Pour déployer cette solution de site web statique sécurisé, vous pouvez choisir l'une des options suivantes :

  • Utilisez la console AWS CloudFormation pour déployer la solution avec du contenu par défaut, puis chargez le contenu de votre site web vers Amazon S3.

  • Clonez la solution sur votre ordinateur pour ajouter le contenu de votre site web. Puis, déployez la solution avec l’AWS Command Line Interface (AWS CLI).

Prérequis

Pour utiliser cette solution, les prérequis suivant sont nécessaires :

  • Un nom de domaine enregistré, par exemple example.com, pointant vers une zone hébergée Amazon Route 53. La zone hébergée doit se trouver dans le même compte AWS où vous déployez cette solution. Si vous n'avez pas de nom de domaine enregistré, vous pouvez en enregistrer un avec Route 53. Si vous possédez un nom de domaine enregistré, mais qu'il ne pointe pas vers une zone hébergée Route 53, configurez Route 53 en tant que votre service DNS.

  • Des autorisations AWS Identity and Access Management (IAM) pour lancer des modèles CloudFormation qui créent des rôles IAM, et des autorisations pour créer toutes les ressources AWS dans la solution.

Vous assumez les coûts encourus pour utiliser cette solution. Pour plus d'informations sur les coûts, consultez les pages de tarification de chaque service AWS.

Utilisation de la console AWS CloudFormation

Pour déployer à l'aide de la console CloudFormation
  1. Choisissez Lancer sur AWS pour ouvrir cette solution dans la console AWS CloudFormation. Si nécessaire, connectez-vous à votre compte AWS.

    
                            Launch on AWS button

  2. L'assistant Créer une pile s'ouvre dans la console AWS CloudFormation, avec des champs préremplis qui spécifient le modèle CloudFormation de cette solution.

    Au bas de la page, sélectionnez Next.

  3. Dans la page Spécifier les détails de la pile, saisissez des valeurs pour les champs suivants :

    • SubDomain (Sous-domaine) – Saisissez le sous-domaine à utiliser pour votre site web. Par exemple, si le sous-domaine est www, votre site web est disponible à l'adresse www.exemple.com. (Remplacez exemple.com par votre nom de domaine, comme expliqué dans la puce suivante.)

    • DomainName – Saisissez votre nom de domaine, par exemple, example.com. Ce domaine doit pointer vers une zone hébergée Route 53.

    Lorsque vous avez terminé, choisissez Next (Suivant).

  4. (Facultatif) Dans la page Configure stack options (Configurer les options de pile), ajoutez des balises et d'autres options de pile.

    Lorsque vous avez terminé, choisissez Next (Suivant).

  5. Dans la page Vérification, faites défiler jusqu'au bas de la page, puis sélectionnez les deux cases de la section Capacités. Ces fonctionnalités permettent à AWS CloudFormation de créer un rôle IAM qui permet d'accéder aux ressources de la pile et de nommer les ressources dynamiquement.

  6. Choisissez Créer une pile.

  7. Attendez la fin de la création de la pile. La pile crée des piles imbriquées, ce qui peut prendre plusieurs minutes. Une fois achevée, l'État passe à CREATE_COMPLETE.

    Lorsque l’état est CREATE_COMPLETE, accédez à https://www.exemple.com pour voir votre site web (remplacez www.exemple.com par les noms de sous-domaine et de domaine que vous avez spécifiés à l'étape 3). Vous devriez voir le contenu par défaut du site web :

    
                            Contenu par défaut du site web statique de cette solution. Il déclare : « Je suis un site web statique ! »
Pour remplacer le contenu par défaut du site web par le vôtre
  1. Ouvrez la console Amazon S3 sur https://console.aws.amazon.com/s3/.

  2. Choisissez le compartiment dont le nom commence par amazon-cloudfront-secure-static-site-s3bucketroot-.

    Note

    Assurez-vous de choisir le compartiment dont le nom contient s3bucketroot et pas s3bucketlogs. Le compartiment dont le nom inclut s3bucketroot contient le contenu du site web. Celui dont le nom inclut s3bucketlogs ne contient que des fichiers journaux.

  3. Supprimez le contenu par défaut du site web, puis chargez le vôtre.

    Note

    Si vous avez affiché votre site web avec le contenu par défaut de cette solution, une partie du contenu par défaut est probablement mise en cache dans un emplacement périphérique CloudFront. Pour vous assurer que les utilisateurs voient le contenu de votre site web mis à jour, invalidez les fichiers pour supprimer les copies mises en cache dans les emplacements périphériques CloudFront. Pour de plus amples informations, veuillez consulter Invalidation de fichiers.

Clonage local de la solution

Prérequis

Pour ajouter votre contenu du site web avant de déployer cette solution, vous devez empaqueter les artefacts de cette dernière localement, ce qui demande Node.js et npm. Pour de plus amples informations, veuillez consulter https://www.npmjs.com/get-npm.

Pour ajouter votre contenu du site web et déployer la solution
  1. Clonez ou téléchargez la solution à partir de https://github.com/aws-samples/amazon-cloudfront-secure-static-site. Après le clonage ou le téléchargement, ouvrez une invite de commande ou un terminal et accédez au dossier amazon-cloudfront-secure-static-site.

  2. Exécutez la commande suivante pour installer et empaqueter les artefacts de la solution :

    make package-function
  3. Copiez votre contenu du site web dans le dossier www, en écrasant le contenu par défaut du site web.

  4. Exécutez la commande AWS CLI suivante pour créer un compartiment Amazon S3 pour stocker les artefacts de la solution. Remplacez example-bucket-for-artifacts par votre propre nom de compartiment.

    aws s3 mb s3://example-bucket-for-artifacts --region us-east-1
  5. Exécutez la commande de l’AWS CLI suivante pour empaqueter les artefacts de la solution en tant que modèle AWS CloudFormation. Remplacez example-bucket-for-artifacts par le nom du compartiment que vous avez créé à l'étape précédente.

    aws cloudformation package \ --region us-east-1 --template-file templates/main.yaml \ --s3-bucket example-bucket-for-artifacts \ --output-template-file packaged.template
  6. Exécutez la commande suivante pour déployer la solution AWS CloudFormation, en remplaçant les valeurs suivantes :

    • your-CloudFormation-stack-name – remplacez-le par le nom de la pile AWS CloudFormation.

    • example.com – Remplacez-le par votre nom de domaine. Ce domaine doit pointer vers une zone hébergée Route 53 dans le même compte AWS.

    • www – Remplacez-le par le sous-domaine à utiliser pour votre site web. Par exemple, si le sous-domaine est www, votre site web est disponible à l'adresse www.exemple.com.

    aws cloudformation deploy \ --region us-east-1 --stack-name your-CloudFormation-stack-name \ --template-file packaged.template \ --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \ --parameter-overrides DomainName=example.com SubDomain=www
  7. Attendez la fin de la création de la pile AWS CloudFormation. La pile crée des piles imbriquées, ce qui peut prendre plusieurs minutes. Une fois achevée, l'État passe à CREATE_COMPLETE.

    Lorsque l'état passe à CREATE_COMPLETE, accédez à https ://www.exemple.com pour voir votre site web (remplacez www.exemple.com par les noms de sous-domaine et de domaine que vous avez spécifiés à l'étape précédente). Vous devriez voir le contenu de votre site web.

Recherche des journaux d'accès

Cette solution active les journaux d'accès pour la distribution CloudFront. Procédez comme suit pour localiser les journaux d'accès de la distribution.

Pour localiser les journaux d'accès de la distribution
  1. Ouvrez la console Amazon S3 sur https://console.aws.amazon.com/s3/.

  2. Choisissez le compartiment dont le nom commence par amazon-cloudfront-secure-static-site-s3bucketlogs-.

    Note

    Assurez-vous de choisir le compartiment dont le nom contient s3bucketlogs et pas s3bucketroot. Le compartiment dont le nom inclut s3bucketlogs contient des fichiers journaux. Celui dont le nom inclut s3bucketroot contient le contenu du site web.

  3. Le dossier nommé cdn contient les journaux d'accès CloudFront.