Projets sur AWS

Création d'une application Web moderne

Déployer une application Web, se connecter à une base de données et analyser le comportement des utilisateurs

Module 1 : créer un site Internet statique

Dans ce module, vous hébergerez votre site Internet statique sur Amazon S3 et configurerez votre IDE Cloud, AWS Cloud9.  

Présentation

Dans ce module, nous hébergerons le contenu statique (html, js, css, contenu multimédia, etc.) de votre site Internet Mythical Mysfit sur Amazon S3 (Simple Storage Service). S3 est un service de stockage d'objets hautement durable, hautement disponible et bon marché, pouvant servir les objets stockés directement via HTTP. Cela le rend idéal pour le service de contenu Web statique directement à des navigateurs pour des sites sur Internet.

Avant de commencer à stocker nos mysfits dans S3, configurons AWS Cloud9. Cloud9 est un environnement de développement intégré basé dans le cloud qui permet d'écrire, d'exécuter et de déboguer du code depuis un navigateur.  

Diagramme d'architecture

création d'un site Web statique

 Temps nécessaire

20 minutes

Instructions de mise en œuvre

  • A : Connexion à la console AWS

    Pour commencer, connectez-vous à la console AWS pour le compte AWS que vous utiliserez dans cet atelier.

    B : 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. Pour voir quelles régions disposent des services supportés, consultez le tableau des régions. Les régions prises en charge comprennent :

    • usa-est-1 (Virginie du Nord)
    • usa-est-2 (Ohio)
    • usa-ouest-2 (Oregon)
    • ue-ouest-1 (Irlande)

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

  • A : Création d'un environnement AWS Cloud9

    Sur la page d'accueil de la console AWS, saisissez Cloud9 dans la barre de recherche des services et sélectionnez-le :

    création d'un bot Lex

    (cliquez pour zoomer)

    Cliquez sur Créer un environnement sur la page d'accueil Cloud9 :

    création d'un bot Lex

    (cliquez pour zoomer)

    création d'un bot Lex

    Nommez votre environnement MythicalMysfitsIDE avec la description de votre choix, puis cliquez sur Étape suivante :

    création d'un bot Lex

    (cliquez pour zoomer)

    création d'un bot Lex

    Laissez les paramètres d'environnement par défaut, puis cliquez sur Étape suivante :

    création d'un bot Lex

    (cliquez pour zoomer)

    création d'un bot Lex

    Cliquez sur Créer un environnement :

    création d'un bot Lex

    (cliquez pour zoomer)

    création d'un bot Lex

    Lorsque l'IDE a été créé pour vous, vous verrez un écran d'accueil semblable à ce qui suit :

    création d'un bot Lex

    (cliquez pour zoomer)

    création d'un bot Lex
    B : Clonez le référentiel d'atelier Mythical Mysfits

    Dans le panneau du bas, vous verrez une ligne de commande de terminal ouverte, prête à être utilisée. Exécutez la commande git suivante dans le terminal pour cloner le code nécessaire pour réaliser le didacticiel :

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Après avoir cloné le référentiel, vous verrez que l'explorateur de projet comprend désormais les fichiers clonés :

    fichiers clonés

    (cliquez pour zoomer)

    fichiers clonés

    Dans le terminal, modifiez le répertoire vers le répertoire de référentiel qui vient d'être cloné :

    cd aws-modern-application-workshop
  • A : Créez un compartiment S3 et configurez-le pour l'hébergement de sites Internet

    Puis, nous allons créer les composants d'infrastructure nécessaires pour héberger un site Internet statique dans Amazon S3 par le biais de l'interface de ligne de commande AWS.

    Premièrement, vous allez créer un compartiment S3 et remplacer le nom ci-dessous (mythical-mysfits-bucket-name) par votre propre nom de compartiment unique. Remarque : veuillez consulter les exigences relatives aux noms des compartiments. Copiez le nom de votre choix et enregistrez-le pour plus tard, étant donné que vous l'utiliserez à plusieurs reprises pendant cet atelier :

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Maintenant que nous avons créé un compartiment, nous devons définir certaines options de configuration permettant d'utiliser le compartiment pour l'hébergement de sites Internet statiques. Cette configuration permet aux objets du compartiment d'être soumis à des requêtes à l'aide d'un nom DNS public inscrit pour le compartiment, ainsi que les requêtes de site directes vers le chemin de base du nom DNS vers une page d'accueil de site Internet de votre choix (index.html dans la plupart des cas) :

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B : Mettez à jour la politique de compartiment S3

    Tous les compartiments créés dans Amazon S3 sont totalement privés par défaut. Afin de l'utiliser comme site Internet public, nous devons créer une politique de compartiment S3 indiquant que les objets stockés dans ce nouveau compartiment peuvent être accédés publiquement par tous. Les politiques de compartiment sont représentées sous forme de documents JSON qui définissent les actions S3 (appels d'API S3) qui sont autorisées (ou non) à être effectuées par différents principaux (dans notre cas, public ou tout le monde).

    Le document JSON pour la politique de compartiment requise se trouve dans ~/environment/aws-modern-application-workshop/module-1/aws-cli/Website-bucket-policy.json. Ce fichier comprend une chaîne devant être remplacée par le nom de compartiment que vous avez choisi (indiquée par REPLACE_ME_BUCKET_NAME).

    Remarque : dans l'ensemble de cet atelier, vous ouvrirez des fichiers disposant de contenus à remplacer (tous précédés de REPLACE_ME_, pour les trouver facilement à l'aide de CTRL-F sur Windows ou ⌘-F sur Mac.) 

    Pour ouvrir un fichier dans Cloud9, utilisez l'explorateur de fichiers dans le panneau de gauche, et double-cloquez sur Website-bucket-policy.json :

    ouvrir le fichier dans Cloud9

    (cliquez pour zoomer)

    ouvrir un fichier dans Cloud9

    Cela ouvre bucket-policy.json dans le panneau de l'éditeur de fichiers. Remplacez la chaîne affichée par le nom de compartiment de votre choix utilisé dans les commandes antérieures :

    remplacement du nom du compartiment

    (cliquez pour zoomer)

    remplacement du nom du compartiment

    Exécutez la commande d'interface de ligne de commande suivante pour ajouter une politique de compartiment public à votre site Internet :

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C : Publiez le contenu du site Internet sur S3

    Maintenant que notre nouveau compartiment de site Internet est configuré de façon adéquate, ajoutons la première itération de la page d'accueil Mythical Mysfits au compartiment. Utilisez la commande d'interface de ligne de commande S3 suivante qui imite la commande Linux pour copier des fichiers (cp) pour copier la page index.html fournie localement depuis votre IDE vers le nouveau compartiment S3 (en remplaçant le nom du compartiment comme il se doit).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Maintenant, ouvrez le navigateur Internet de votre choix et saisissez une des URI ci-dessous dans la barre d'adresse. L'une des URI ci-dessous comprend un « . » avant le nom de la région et l'autre un « - ». Celle que vous devez utiliser dépend de la région utilisée.

    La chaîne qui remplace REPLACE_ME_YOUR_REGION devrait correspondre à la région dans laquelle vous avez créé le compartiment S3 (comme usa-est-1) :

    Pour usa-est-1 (Virginie du Nord), usa-ouest-2 (Oregon), ue-ouest-1 (Irlande), utilisez :

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Pour usa-est-2 (Ohio), utilisez :

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Félicitations, vous avez créé le site Internet Mythical Mysfits statique de base !

    Le Module 1 se termine ici.

Vous allez héberger votre application sur un serveur Web.