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

Temps nécessaire
20 minutes
Services utilisés
Essayer sur GitHub
Instructions de mise en œuvre
-
Étape 1 : Démarrage
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.
-
Étape 2 : Créer votre IDE Mythical Mysfit
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 :
Nommez votre environnement MythicalMysfitsIDE avec la description de votre choix, puis cliquez sur Étape suivante :
Laissez les paramètres d'environnement par défaut, puis cliquez sur Étape suivante :
Lorsque l'IDE a été créé pour vous, vous verrez un écran d'accueil semblable à ce qui suit :
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 :
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
-
Étape 3 : Héberger le site Internet sur S3
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 :
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 :
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
Félicitations, vous avez créé le site Internet Mythical Mysfits statique de base !
Le Module 1 se termine ici.