Dans ce module, vous allez configurer AWS Amplify pour héberger des ressources statiques pour votre application web avec un déploiement continu intégré. La Console Amplify fournit un flux de travail basé sur git pour le déploiement continu et l'hébergement d'applications web intégrales. 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.
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é par la console AWS Amplify. Vos utilisateurs finaux accèdent ensuite à votre site à l'aide de l'URL de site web public présentée par la console AWS Amplify. Il n'est pas nécessaire d'exécuter de serveurs web ni d'utiliser d'autres services pour mettre votre site web à disposition.
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 domaine personnalisé sur Amplify.
Durée du module : 15 minutes
Services utilisés : AWS Amplify
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 toute région AWS prenant en charge tous les services utilisés dans cette application, notamment AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway et Amazon DynamoDB.
Pour connaître quelles régions disposent des services supportés, 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.
(Cliquer pour agrandir)
-
Étape 2 : Création d'un référentiel Git
Vous disposez de deux options pour gérer le code source pour ce module : AWS CodeCommit (incluse dans l'offre gratuite AWS) ou GitHub. Dans ce didacticiel, nous allons utiliser CodeCommit pour stocker le code d'application, mais vous pouvez faire la même chose en créant un référentiel sur GitHub.
a. Ouvrez la console AWS CodeCommit.
b. Sélectionnez Créer un référentiel.
c. Définissez le nom du référentiel* sur « wildrydes-site ».
d. Sélectionnez Créer.
e. Maintenant que le référentiel est créé, configurez un utilisateur IAM avec les informations d'identification Git dans la console IAM en suivant ces instructions.
f. De nouveau dans la console CodeCommit, dans le menu déroulant URL de clonage, sélectionnez Cloner HTTPS.
g. À partir d'une fenêtre de terminal, exécutez la commande git clone et l'URL HTTPS du référentiel :
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Clonage dans 'wildrydes-site'...
Nom d'utilisateur pour 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXX
Mot de passe pour 'USERID': XXXXXXXXXXXX
avertissement : il semble que vous ayez cloné un référentiel vide.
-
Étape 3 : Renseignement du référentiel Git
Une fois que vous avez utilisé AWS CodeCommit ou GitHub.com pour créer votre référentiel git et le cloner localement, vous devez copier le contenu du site web depuis un compartiment S3 accessible publiquement existant associé à cet atelier et ajouter le contenu à votre référentiel.
a. Changez le répertoire dans votre référentiel et copiez les fichiers statiques à partir de S3 :
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Déposez les fichiers dans votre service Git.
$ git add .
$ git pushCounting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
Étape 4 : Activation de l'hébergement web avec la console AWS Amplify
Ensuite, vous allez utiliser Console AWS Amplify pour déployer le site web que vous venez de déplacer dans git. La console Amplify prend en charge la configuration d'un emplacement pour stocker le code de votre application web statique et fournit un certain nombre de fonctionnalités utiles afin de simplifier le cycle de vie de cette application et recourir aux bonnes pratiques.
a. Lancez la page Console Amplify.
b. Cliquez sur Démarrer sous Déployer avec la Console Amplify.
c. Sélectionnez le fournisseur de services de référentiel utilisé aujourd'hui et sélectionnez Suivant.
d. Si vous avez utilisé GitHub, vous devrez autoriser AWS Amplify sur votre compte GitHub.
e. Dans la liste déroulante, sélectionnez le référentiel et la branche qui viennent d'être créés.
e. Dans la page « Configurer les paramètres de génération », laissez les valeurs par défaut et sélectionnez Suivant.
f. Sur la page « Vérification », sélectionnez Enregistrer et déployer.
g. Le processus prend quelques minutes pour que la console Amplify crée les ressources nécessaires et déploie votre code.
Une fois terminé, cliquez sur l'image du site pour lancer le site Wild Rydes.
Si vous cliquez sur le lien pour Master, vous verrez les détails de génération et de déploiement relatifs à votre branche, ainsi que des captures d'écran de l'application sur divers appareils :
-
Étape 5 : Modification de votre site
La console AWS Amplify regénère et redéploie l'application lorsqu'elle détecte des modifications apportées au référentiel connecté. Apportez une modification à la page principale pour tester ce processus.
a. Ouvrez la page `index.html` et modifiez la ligne du titre pour qu'il soit : <title>Wild Rydes - Rydes of the Future!</title>
b. Enregistrez le fichier et déposez-le de nouveau dans votre référentiel git. La console Amplify commencera bientôt à générer de nouveau le site après avoir remarqué la mise à jour dans le référentiel. Cela se déroulera assez rapidement ! Revenez à la page de la console Amplify pour observer le processus.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. Une fois le processus terminé, ouvrez à nouveau le site Wild Rydes et notez le changement de titre.
-
Récapitulatif
Dans ce module, vous avez créé un site web statique qui sera la base de notre activité Wild Rydes. La console AWS Amplify facilite grandement le déploiement de sites web statiques suite à une intégration continue et un modèle de livraison. Elle a les capacités de « générer » des applications basées sur un framework JavaScript plus complexes et est dotée de fonctionnalités telles que les déploiements de branche, la configuration facile de domaine personnalisé, les déploiements instantanés et la protection de mot de passe.
