Dans ce module, vous configurerez Amazon Simple Storage Service (S3) pour héberger les ressources statiques de votre application Web. Dans les modules suivants, vous ajouterez des fonctionnalités à ces pages dynamiques à l’aide de JavaScript pour appeler les API RESTful à distance conçues avec AWS Lambda et Amazon API Gateway.

Serverless_Web_App_LP_assets-02

L’architecture de ce module est très simple. L’ensemble de votre contenu Web statique, y compris les fichiers HTML, CSS, JavaScript, images et les autres fichiers, sera stocké dans Amazon S3. Vos utilisateurs pourront alors accéder à votre site à l’aide de l’URL du site Web public indiquée sur Amazon S3. Vous n’avez pas besoin d’exécuter de serveur Web ni d’utiliser d’autres services pour rendre votre site disponible.

Dans le cadre du présent module, vous utiliserez l’URL du point de terminaison du site Web Amazon S3 que nous fournissons. Elle revêt la forme suivante : http://{nom-de-votre-compartiment}.s3-website.{région}.amazonaws.com. Pour la plupart des applications réelles, vous devrez utiliser un domaine personnalisé pour héberger votre site. Si vous envisagez d’utiliser votre propre domaine, suivez les instructions concernant la configuration d’un site Web statique à l’aide d’un domaine personnalisé dans la documentation relative à Amazon S3.

Durée de réalisation du module : 30 minutes

Service utilisé : Amazon S3

Modèle CloudFormation : si vous êtes déjà à l’aise avec Amazon S3 ou que vous souhaitez passer directement à Lambda et API Gateway, vous pouvez lancer l’un de ces modèles AWS CloudFormation 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 >
Serverless_Web_App_LP_assets-17

Instructions pour le lancement de CloudFormation

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

  2. Cliquez sur Suivant sur la page Sélectionner un modèle.

  3. Fournissez un nom unique au monde pour le Nom de compartiment du site Web, par exemple wildrydes-votrenom et cliquez sur Suivant.

  4. Sur la page Options, conservez les paramètres par défaut et cliquez sur Suivant.

  5. Sur la page Vérification, cochez la case pour confirmer que CloudFormation créera des ressources IAM et cliquez sur Créer.

    Ce modèle utilise une ressource personnalisée pour copier les actifs du site Web statique depuis un compartiment S3 central vers votre propre compartiment. Pour que la ressource personnalisée écrive dans le nouveau compartiment de votre compte, elle doit créer un rôle IAM qu’elle peut prendre en charge avec ces autorisations.

  6. Attendez que la pile wildrydes-webapp-1 atteigne le statut CREATE_COMPLETE (Création terminée).

  7. En gardant la pile wildrydes-webapp-1 sélectionnée, cliquez sur l’onglet Sorties, puis sur le lien URL du site Web.

  8. Vérifiez que la page d’accueil de Wild Rydes se charge correctement puis passez au prochain module : Gestion des utilisateurs.


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


    Cette application Web peut être déployée dans n’importe quelle 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.

    Reportez-vous au tableau des régions pour voir dans quelles régions ces services sont pris en charge. Parmi les régions prises en charge, vous pouvez choisir :

    • 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 dans le coin supérieur droit d’AWS Management Console.

    region

    (Cliquez pour zoomer)

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

    Amazon S3 peut être utilisé pour héberger des sites Web statiques, sans avoir à configurer ou gérer de serveur Web. Au cours de cette étape, vous allez créer un compartiment S3 qui sera utilisé pour héberger toutes les ressources statiques (par exemple, les fichiers HTML, CSS, JavaScript et image) de votre application Web. 

    Au cours de cette étape, vous utiliserez la console ou l’interface de ligne de commande AWS (AWS CLI) pour créer un compartiment Amazon S3. N’oubliez pas que le nom de votre compartiment doit être unique au monde. Nous vous recommandons d’utiliser un nom tel que wildrydes-prénom-nomdefamille. Si vous obtenez une erreur indiquant que votre nom de compartiment existe déjà, essayez d’ajouter des chiffres ou des caractères supplémentaires jusqu’à ce que vous trouviez un nom encore inutilisé.


    1. Dans AWS Management Console, cliquez sur Services, puis sélectionnez S3 sous Stockage.
    2. Choisissez +Créer un compartiment
    3. Entrez un nom unique au monde pour votre organisation, tel que wildrydes-prénom-nomdefamille. Si vous obtenez une erreur indiquant que votre nom de compartiment existe déjà, essayez d’ajouter des chiffres ou des caractères supplémentaires jusqu’à ce que vous trouviez un nom encore inutilisé.
    4. Sélectionnez la région que vous avez choisie d’utiliser pour cet atelier dans le menu déroulant.
    5. Cliquez sur Créer dans le coin inférieur gauche de la boîte de dialogue, sans sélectionner de compartiment à partir duquel les paramètres seront copiés.
  • Étape 3. Téléchargement de contenu

    Au cours de cette étape, vous ajouterez les ressources du site Web de ce module à votre compartiment S3. Pour réaliser cette étape, vous pouvez utiliser AWS Management Console (le navigateur Google Chrome est nécessaire), AWS CLI ou le modèle CloudFormation fourni. Si AWS CLI est déjà installé et configuré sur votre ordinateur local, nous vous recommandons d’utiliser cette méthode. Dans le cas contraire, utilisez la console si vous avez installé la dernière version de Google Chrome.

    Instructions détaillées pour la console

    Afin de télécharger tous les fichiers et les 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, veuillez suivre les instructions d’utilisation d’AWS CLI ou du modèle CloudFormation fourni.

    1. Téléchargez une archive de ce référentiel en utilisant ce lien.

    2. Décompressez l’archive que vous avez téléchargée sur votre ordinateur local.

    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 vous trouvez sur l’onglet Objets.

    5. Ouvrez l’Explorateur de fichiers Windows ou macOS Finder et naviguez jusqu’au contenu étendu du fichier zip que vous avez téléchargé à la première étape.

    6. Accédez au répertoire WebApplication/1_StaticWebHosting/website sur votre ordinateur local.

    7. Sélectionnez l’ensemble des fichiers et des sous-répertoires du répertoire de votre site Web. Assurez-vous toutefois de ne pas sélectionner le répertoire du site Web lui-même.

    8. Faites glisser et déposez les fichiers sélectionnés depuis votre système de fichiers local vers le contenu situé sous l’onglet Objets dans la console S3.

    9. Cliquez sur Charger dans le coin inférieur gauche de la boîte de dialogue qui s’affiche.

    10. Attendez que le téléchargement se termine puis vérifiez que le contenu du répertoire du site Web s’affiche dans la console S3. Si vous ne voyez qu’un seul répertoire de site Web , vous devez le supprimer de votre compartiment puis suivre de nouveau ces instructions en veillant à sélectionner uniquement le contenu du répertoire avant de le déplacer vers la console S3.

    Instructions détaillées pour la CLI

    Si vous avez déjà installé et configuré l’interface de ligne de commande (CLI), vous pouvez l’utiliser pour copier les actifs Web requis à partir de s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website dans votre compartiment.

    1. Exécutez la commande suivante en veillant à remplacer YOUR_BUCKET_NAME par le nom que vous avez utilisé dans la section précédente et YOUR_BUCKET_REGION par le code de région (par exemple, 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 YOUR_BUCKET_REGION
    2. Si la commande fonctionne correctement, une liste des objets ayant été copiés dans votre compartiment devrait s’afficher.

     

    Instructions détaillées pour CloudFormation

    Si vous n’êtes pas en mesure d’utiliser l’une des méthodes précédentes, vous pouvez lancer le modèle CloudFormation fourni pour copier les ressources nécessaires dans votre compartiment S3. Lancez un modèle CloudFormation en sélectionnant une région et cliquez sur le lien Lancer la pile dans la section Modèle CloudFormation du présent module.

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

    Vous pouvez définir une stratégie de compartiment afin de déterminer qui peut accéder au contenu de vos compartiments S3. Les stratégies de compartiment sont des documents JSON qui spécifient les mandataires 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 pour permettre aux utilisateurs anonymes de voir votre site. Par défaut, votre compartiment sera uniquement accessible par les utilisateurs authentifiés ayant accès à votre compte AWS.

    Consultez cet exemple de stratégie accordant un accès en lecture seule aux utilisateurs anonymes. Cet exemple de stratégie permet à quiconque sur Internet de voir votre contenu. La manière la plus simple de mettre à jour une stratégie de compartiment est d’utiliser la console. Sélectionnez le compartiment, choisissez l’onglet des 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. Sélectionnez l’onglet Autorisations, puis Stratégie de compartiment.
    3. Entrez le document de stratégie suivant dans l’éditeur de stratégie de compartiment, en remplaçant [YOUR_BUCKET_NAME] par le nom du compartiment que vous avez créé à la section 1 :
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Cliquez sur Enregistrer pour appliquer la nouvelle stratégie.
  • Étape 5. Activation de l’hébergement de site Web

    Par défaut, les objets d’un compartiment S3 sont disponibles par le biais d’URL dont la structure est la suivante : http://.amazonaws.com//. Afin de desservir les ressources depuis l’URL racine (par exemple : /index.html), vous devez activer la fonction d’hébergement de site du compartiment. Cette fonction rendra vos objets disponibles au point de terminaison du site Web de la région AWS concernée sur le 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 le présent atelier, mais vous trouverez des instructions détaillées dans notre documentation.

    Au cours de cette étape, vous utiliserez la console pour activer la fonction d’hébergement de site statique. Vous pouvez effectuer cette opération dans l’onglet Propriétés une fois que vous avez sélectionné le compartiment. Définissez index.html en tant que document d’index et laissez le document d’erreur vide. Pour plus d’informations, reportez-vous à la documentation sur la configuration d’un compartiment pour l’hébergement de site Web statique.


    1. Sur la page de détails du compartiment de la console S3, choisissez l’onglet Propriétés.
    2. Choisissez la carte d’hébergement de site Web statique.
    3. Sélectionnez Utiliser ce compartiment pour héberger un site Web et saisissez index.html en tant que document d’index. Laissez les autres champs vides.
    4. Notez l’URL du point de terminaison affichée en haut de la boîte de dialogue avant de cliquer sur Enregistrer. Vous utiliserez cette URL pendant toute la durée restante de l’atelier pour afficher votre application Web. À partir de maintenant, cette URL sera désignée comme URL de base de votre site Web.
    5. Cliquez sur Enregistrer pour enregistrer les changements.
  • Étape 6. Validation de votre implémentation

    Une fois ces étapes d’implémentation complétées, vous devriez pouvoir accéder à votre site Web statique en visitant l’URL du point de terminaison du site Web pour votre compartiment S3.

    Visitez l’URL de base de votre site Web (il s’agit de l’URL que vous avez indiquée dans la section précédente) via le navigateur de votre choix. La page d’accueil Rydes Wild devrait s’afficher. Si vous avez besoin de vérifier l’URL de base, accédez à la console S3, sélectionnez votre compartiment, puis cliquez sur Hébergement de site Web statique sur l’onglet Propriétés.

    Si la page est restituée correctement (un exemple de capture d’écran est donné ci-dessous), vous pouvez passer au prochain module : Gestion des utilisateurs.

    wildrydes-homepage