Projets sur AWS :

Conception d’une application Web sans serveur

en utilisant AWS Lambda, Amazon API Gateway, Amazon S3, Amazon DynamoDB et Amazon Cognito

Introduction

Hébergement d'un site web statique

Gérer les utilisateurs

Créer un backend sans serveur

Déployer une API RESTful

Résiliation des ressources

Module 1. Hébergement web statique

Dans ce module, vous configurerez Amazon Simple Storage Service (S3) pour qu'il héberge des ressources statiques pour votre application web. Dans les modules ultérieurs, vous ajouterez une fonctionnalité dynamique à ces pages en utilisant JavaScript pour appeler des API RESTful distantes créées avec AWS Lambda et Amazon API Gateway.

Présentation de l'architecture

L'architecture de ce module est extrêmement simple. Tout votre contenu web statique, notamment vos fichiers HTML, CSS, JavaScript, images et autres, est hébergé dans Amazon S3. Vos utilisateurs finaux accèdent ensuite à votre site à l'aide de l'URL de site web public exposée par Amazon S3. Vous ne devez ni exécuter de serveurs web ni utiliser d'autres services pour mettre votre site web à disposition.

Dans le cadre de ce module, vous utiliserez l'URL du point de terminaison du site web Amazon S3 fournie par nos soins. Cette URL prend la forme suivante : http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Pour la plupart des applications réelles, vous voudrez sans doute utiliser un domaine personnalisé pour héberger votre site. Pour utiliser votre propre domaine, suivez les instructions de configuration d'un site web statique au moyen d'un domaine personnalisé dans la documentation d'Amazon S3.

Durée du module : 30 minutes

Services utilisés : Amazon S3

Modèle CloudFormation : si vous vous sentez à l'aise avec Amazon S3 ou souhaitez simplement passer à l'utilisation de Lambda et d'API Gateway, vous pouvez lancer un des modèles AWS CloudFormation suivants dans la région de votre choix pour créer automatiquement les ressources nécessaires.

Région Modèle CloudFormation
USA Est (Virginie du Nord) Lancer la pile >
USA Est (Ohio) Lancer la pile >
USA Ouest (Oregon) Lancer la pile >
UE (Francfort) Lancer la pile >
UE (Irlande) Lancer la pile >
UE (Londres) Lancer la pile >
Asie-Pacifique (Tokyo) Lancer la pile >
Asie-Pacifique (Séoul) Lancer la pile >
Asie-Pacifique (Sydney) Lancer la pile >
Asie-Pacifique (Mumbai) Lancer la pile >

Instructions pour le lancement de CloudFormation

  1. Cliquez sur le lien Lancer la pile ci-dessus pour la région de votre choix.

  2. Sur la page Sélectionner un modèle, cliquez sur Suivant.

  3. Saisissez un nom unique au monde pour le nom du compartiment du site web (par exemple, wildrydes-votrenom) et cliquez sur Suivant.

  4. Sur la page Options, conservez toutes les valeurs par défaut et cliquez sur Suivant.

  5. Sur la page Vérification, cochez la case autorisant CloudFormation à créer des ressources IAM, puis cliquez sur Créer.

    Ce modèle utilise une ressource personnalisée pour copier les ressources du site web statique depuis un compartiment S3 vers votre compartiment dédié. Pour que la ressource personnalisée puisse écrire dans le nouveau compartiment de votre compte, elle doit créer un rôle IAM avec ces autorisations.

  6. Attendez que la pile wildrydes-webapp-1 atteigne le statut CREATE_COMPLETE.

  7. Sélectionnez la pile wildrydes-webapp-1, puis cliquez sur l'onglet Sorties et sur le lien WebsiteURL.

  8. Vérifiez que la page d'accueil Wild Rydes se charge correctement et passez au module suivant, Gestion des utilisateurs.

Instructions de mise en œuvre

Suivez les instructions détaillées ci-dessous pour héberger un site web statique. Cliquez sur chaque numéro d’étape pour développer la section correspondante.

  • Étape 1. Sélection d'une région

    Sélection d'une région

    Cette application web peut être déployée dans toute région AWS prenant en charge tous les services utilisés dans cette application, notamment Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 et Amazon DynamoDB.

    Pour voir quelles régions disposent des services pris en charge, consultez le tableau des régions. Les régions prises en charge sont notamment les suivantes :

    • USA Est (Virginie du Nord)
    • USA Est (Ohio)
    • USA Ouest (Oregon)
    • UE (Francfort)
    • UE (Irlande)
    • UE (Londres)
    • Asie-Pacifique (Tokyo)
    • Asie-Pacifique (Séoul)
    • Asie-Pacifique (Sydney)
    • Asie-Pacifique (Mumbai)

     

    Sélectionnez votre région dans le menu déroulant situé dans le coin supérieur droit d'AWS Management Console.

    (cliquez pour agrandir)

  • Étape 2. Création d'un compartiment S3

    Création d'un compartiment S3

    Amazon S3 permet d'héberger des sites web statiques sans devoir configurer ou gérer de serveurs web. Au cours de cette étape, vous créerez un nouveau compartiment S3, qui sera utilisé pour héberger toutes les ressources statiques (p. ex. fichiers HTML, CSS, JavaScript et image) de votre application web. 

    Lors de cette étape, vous utiliserez la console ou l'interface de ligne de commande AWS pour créer un compartiment Amazon S3. Gardez à l'esprit que le nom de votre compartiment doit être unique au monde. Nous vous recommandons d'utiliser un nom tel que wildrydes-prénom-nom. Si vous recevez un message d'erreur indiquant que le nom du compartiment existe déjà, essayez d'ajouter des chiffres ou des lettres jusqu'à ce que vous tombiez sur un nom non utilisé.

    1. Dans AWS Management Console, choisissez Services, puis sélectionnez S3 sous Stockage.
    2. Choisissez +Créer un compartiment.
    3. Saisissez un nom unique au monde pour votre compartiment, tel que wildrydes-prénom-nom. Si vous recevez un message d'erreur indiquant que le nom du compartiment existe déjà, essayez d'ajouter des chiffres ou des lettres jusqu'à ce que vous tombiez sur un nom non utilisé.
    4. Dans le menu déroulant, sélectionnez la région que vous avez choisi d'utiliser pour cet atelier.
    5. Choisissez Créer dans le coin inférieur gauche de la boîte de dialogue sans sélectionner de compartiment à partir duquel copier les paramètres.

  • Étape 3. Chargement de contenu

    Chargement de contenu

    Au cours de cette étape, vous chargerez les ressources du site web pour ce module dans votre compartiment S3. Vous pouvez utiliser AWS Management Console (nécessite le navigateur Google Chrome), la CLI AWS ou le modèle CloudFormation pour cette étape. Si vous avez déjà installé et configuré la CLI AWS sur votre machine locale, nous vous recommandons d'utiliser cette méthode. Sinon, utilisez la console si vous disposez de la dernière version de Google Chrome. 

    Instructions détaillées pour la console

    Pour charger tous les fichiers et sous-répertoires dans un répertoire local via AWS Management Console, vous devez utiliser la dernière version du navigateur web Chrome. Si vous ne pouvez pas utiliser Chrome, suivez les instructions pour utiliser la CLI AWS ou le modèle CloudFormation fourni.

    1. Téléchargez une archive de ce référentiel à l'aide de ce lien.

    2. Décompressez l'archive téléchargée sur votre machine locale.

    3. Ouvrez AWS Management Console dans Chrome. Choisissez Services, puis sélectionnez S3 sous Stockage.

    4. Sélectionnez le compartiment que vous avez créé à l'étape précédente et vérifiez que vous êtes dans l'onglet Aperçu.

    5. Ouvrez l'Explorateur de fichiers Windows ou le Finder macOS et naviguez jusqu'au contenu développé du fichier compressé que vous avez téléchargé lors de la première étape.

    6. Accédez au répertoire WebApplication/1_StaticWebHosting/website sur votre machine locale.

    7. Sélectionnez tous les fichiers et sous-répertoires du répertoire du site web. Assurez-vous que le répertoire du site Web lui-même n'est pas sélectionné.

    8. Glissez-déposez les fichiers sélectionnés depuis votre système de fichiers local vers le contenu affiché sous l'onglet Aperçu de la console S3.

    9. Choisissez Charger dans le coin inférieur gauche de la boîte de dialogue qui s'affiche.

    10. Attendez que le chargement prenne fin, puis vérifiez que le contenu du répertoire du site web apparaît dans la console S3. Si vous ne voyez qu'un seul répertoire du site web, vous devez le supprimer du compartiment et suivre à nouveau ces instructions en veillant à sélectionner uniquement le contenu du répertoire avant de le glisser-déposer dans la console S3.

    Instructions détaillées pour la CLI

    Si vous avez déjà installé et configuré la CLI, vous pouvez l'utiliser pour copier les ressources web nécessaires depuis s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website vers votre compartiment.

    1. Exécutez la commande suivante en prenant soin de remplacer LE_NOM_DE_VOTRE_COMPARTIMENT par celui que vous avez utilisé dans la section précédente et LA_RÉGION_DE_VOTRE_COMPARTIMENT par le code de la région (p. ex. us-east-2) dans laquelle vous avez créé votre compartiment.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region LA_RÉGION_DE_VOTRE_COMPARTIMENT

    2. Si la commande a été exécutée correctement, vous devriez voir une liste des objets qui ont été copiés dans votre compartiment.

     

    Instructions détaillées pour CloudFormation

    Si vous ne parvenez pas à utiliser les deux méthodes précédentes, vous pouvez lancer le modèle CloudFormation fourni afin de copier les ressources nécessaires dans votre compartiment S3. Pour lancer un modèle CloudFormation, sélectionnez une région et cliquez sur le lien Lancer la pile dans la section Modèle CloudFormation de ce module. 

  • Étape 4. Ajout d'une stratégie de compartiment pour autoriser les lectures publiques

    Ajout d'une stratégie de compartiment pour autoriser les lectures publiques

    Vous pouvez déterminer qui peut accéder au contenu de vos compartiments S3 à l'aide d'une stratégie de compartiment. Les stratégies de compartiment sont des documents JSON qui précisent quels mandataires sont autorisés à exécuter diverses actions sur les objets de votre compartiment.

    Au cours de cette étape, vous ajouterez une stratégie de compartiment à votre nouveau compartiment Amazon S3 afin de permettre à des utilisateurs anonymes de voir votre site. Par défaut, votre compartiment sera uniquement accessible par des utilisateurs authentifiés ayant accès à votre compte AWS.

    Découvrez cet exemple de stratégie, qui octroie un accès en lecture seule aux utilisateurs anonymes. Cet exemple de stratégie autorise tout internaute à voir votre contenu. Le moyen le plus simple de mettre à jour une stratégie de compartiment consiste à utiliser la console. Sélectionnez le compartiment, choisissez l'onglet Autorisations, puis sélectionnez Stratégie de compartiment.

    1. Dans la console S3, sélectionnez le nom du compartiment que vous avez créé dans la section 1.
    2. Choisissez l'onglet Autorisations, puis Stratégie de compartiment.
      1. Dans la console S3, sélectionnez le nom du compartiment que vous avez créé dans la section 1.
      2. Choisissez l'onglet Autorisations, puis assurez-vous que les paramètres d'accès public sont sélectionnés.
      3. Cliquez sur Modifier et décochez :
        • « Bloquer les nouvelles stratégies de compartiment public »
        • « Bloquer l'accès au public et aux comptes croisés si le compartiment a des stratégies publiques »
      4. Cliquez sur Enregistrer.
      5. Dans le mode de confirmation qui apparaît, tapez « confirmer » et ensuite cliquez sur Confirmer. 
      6. Une fois dans l’onglet Autorisations, choisissez Stratégie de compartiment.  
    3. Saisissez le document de stratégie suivant dans l'éditeur de stratégies de compartiment en remplaçant [NOM_DE_VOTRE_COMPARTIMENT] par le nom du compartiment que vous avez créé dans la section 1 :
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Choisissez Enregistrer pour appliquer la nouvelle stratégie.

  • Étape 5. Activation de l'hébergement de sites web

    Activation de l'hébergement de sites web

    Par défaut, les objets d'un compartiment S3 sont disponibles via des URL présentant la structure http://.amazonaws.com//. Pour proposer des ressources depuis l'URL racine (p. ex. /index.html), vous devez activer l'hébergement de sites web sur le compartiment. De cette façon, vos objets seront disponibles au niveau du point de terminaison du site web propre à la région AWS du compartiment : .s3-website-.amazonaws.com.

    Vous pouvez également utiliser un domaine personnalisé pour votre site web. Par exemple, http://www.wildrydes.com est hébergé sur S3. La configuration d'un domaine personnalisé n'est pas couverte dans cet atelier, mais vous pouvez trouver des instructions détaillées dans notre documentation.

    Au cours de cette étape, vous utiliserez la console pour activer l'hébergement de site web statique. Vous pouvez le faire depuis l'onglet Propriétés, après avoir sélectionné le compartiment. Définissez index.html en tant que document d'index et laissez le document d'erreur vide. Consultez la documentation consacrée à la configuration d'un compartiment pour l'hébergement de site web statique pour plus de détails.

    1. Sur la page des détails du compartiment de la console S3, choisissez l'onglet Propriétés.
    2. Choisissez la carte Hébergement de site web statique.
    3. Sélectionnez Utiliser ce compartiment pour héberger un site web et saisissez index.html pour le document d'index. Laissez les autres champs vides.
    4. Notez l'URL du point de terminaison en haut de la boîte de dialogue avant de choisir Enregistrer. Vous utiliserez cet URL pendant tout le reste de l'atelier pour afficher votre application web. À partir d'ici, cette URL sera utilisée en tant qu'URL de base de votre site web.
    5. Cliquez sur Enregistrer pour enregistrer vos modifications.

  • Étape 6. Validation de votre implémentation

    Validation de votre implémentation

    Au terme de ces étapes d'implémentation, vous devriez être en mesure d'accéder à votre site web statique en ouvrant l'URL du point de terminaison du site web pour votre compartiment S3.

    Consultez l'URL de base de votre site web (l'URL dont vous avez pris note à la section précédente) dans le navigateur de votre choix. La page d'accueil Wild Rydes devrait s'afficher. Si vous devez rechercher l'URL de base, accédez à la console S3, sélectionnez votre compartiment, puis cliquez sur Hébergement web statique dans l'onglet Propriétés.

    Si la page s'affiche correctement (voir l'exemple de capture d'écran ci-dessous), vous pouvez passer au module suivant, Gestion des utilisateurs.

À suivre : Gestion des utilisateurs