Commencez avec un site Web statique sécurisé - Amazon CloudFront
Présentation de la solutionDéployez la solution

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Commencez avec un site Web statique sécurisé

Vous pouvez commencer à utiliser 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 du HTML, du CSS, JavaScript des images et des 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.

  • Accéléré par le réseau de diffusion de CloudFront contenu Amazon — Cette solution crée une CloudFront distribution pour diffuser votre site Web aux visiteurs avec une faible latence. La distribution est configurée avec le contrôle d'accès à l'origine (OAC) pour garantir que le site Web est accessible uniquement via S3 CloudFront, et non directement depuis S3.

  • Est sécurisé par HTTPS et des en-têtes de sécurité : 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.

  • Est configurée et déployée avec AWS CloudFormation: cette solution utilise un AWS CloudFormation modèle pour configurer tous les composants, afin que vous puissiez vous concentrer davantage sur le contenu de votre site Web et moins sur la configuration des composants.

Cette solution est 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 d'ensemble 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 de son cache au visualiseur.

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

  4. S3 renvoie l'objet à CloudFront.

  5. CloudFront met en cache l'objet.

  6. Les objets sont renvoyés au visualiseur. Les demandes suivantes pour l'objet qui arrivent au même emplacement CloudFront périphérique sont traitées à partir du CloudFront cache.

Déployez la solution

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

  • Utilisez la AWS CloudFormation console pour déployer la solution avec le contenu par défaut, puis téléchargez le contenu de votre site Web sur 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).

Note

Vous devez utiliser la région USA Est (Virginie du Nord) pour déployer le CloudFormation modèle.

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 la même zone que celle 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.

  • AWS Identity and Access Management Autorisations (IAM) pour lancer des CloudFormation modèles qui créent des rôles IAM, et autorisations pour créer toutes les AWS ressources de 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 correspondantes Service AWS.

Utiliser la AWS CloudFormation console

Pour déployer à l'aide de la CloudFormation console

  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 de création d'une pile s'ouvre dans la CloudFormation console, avec des champs préremplis qui spécifient le CloudFormation modèle 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— Entrez 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— Entrez votre nom de domaine, par exemple exemple.com. Ce domaine doit pointer vers une zone hébergée Route 53.

    • HostedZoneId— L'ID de zone hébergée Route 53 de votre nom de domaine.

    • CreateApex— (Facultatif) Créez un alias pour le domaine apex (exemple.com) dans votre CloudFront configuration.

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

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

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

  7. 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 CloudFormation de créer un rôle IAM qui permet d'accéder aux ressources de la pile et de nommer les ressources de manière dynamique.

  8. Choisissez Créer une pile.

  9. 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 bucket 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 consulté votre site Web avec le contenu par défaut de cette solution, il est probable qu'une partie du contenu par défaut soit mise en cache dans un emplacement CloudFront périphérique. Pour vous assurer que les visiteurs voient le contenu mis à jour de votre site Web, invalidez les fichiers pour supprimer les copies mises en cache des emplacements CloudFront périphériques. Pour plus d’informations, consultez Invalider des fichiers pour supprimer du contenu.

Cloner la solution localement

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-static

  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 AWS CLI commande suivante pour créer un compartiment Amazon S3 afin de stocker les artefacts de la solution. example-bucket-for-artifactsRemplacez-le par votre propre nom de compartiment.

    aws s3 mb s3://example-bucket-for-artifacts --region us-east-1

  5. Exécutez la AWS CLI commande suivante pour empaqueter les artefacts de la solution sous forme de CloudFormation modèle. example-bucket-for-artifactsRemplacez-le par le nom du bucket 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 avec CloudFormation, en remplaçant les valeurs suivantes :

    • your- CloudFormation -stack-name — Remplacez par le nom de la pile. 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 domaine 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.

    • Hosted-zone-ID — Remplacez-le par l'ID de zone hébergée Route 53 de votre nom de domaine.

    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 HostedZoneId=hosted-zone-ID

    1. (Facultatif) Pour déployer la pile avec un apex de domaine, exécutez plutôt la commande suivante.

      aws --region us-east-1 cloudformation deploy \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides  DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes

  7. Attendez la fin de la création de la CloudFormation 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 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 CloudFront distribution. 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 bucket 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 CloudFront d'accès.