Démarrer avec AWS

Création d'une application Web simple

Déploiement d'une application Web et ajout de fonctionnalités d'interactivité avec une API et une base de données

Module 1 : Création d'une application Web

Dans ce module, vous déploierez des ressources statiques pour votre application Web en utilisant la console AWS Amplify.

Introduction

Dans ce module, vous utiliserez la console AWS Amplify pour déployer des ressources statiques pour votre application Web. Dans les modules suivants, vous ajouterez des fonctionnalités dynamiques à ces pages, à l'aide d'AWS Lambda et d'Amazon API Gateway, afin d'appeler des API RESTful distantes. « REST », qui est l’acronyme de « Representational State Transfer », désigne un type d'architecture permettant de créer des services Web. Une API, pour sa part, désigne une interface de programmation d'application. Ainsi, une API RESTful permet d'implémenter une architecture REST.

Tout votre contenu Web statique, notamment vos fichiers HTML, CSS, JavaScript, images et autres, est hébergé par la console AWS Amplify. Nous avons sélectionné le service Amplify, car il facilite l'hébergement et le déploiement de sites Web statiques. Vos utilisateurs finaux accéderont à votre site en utilisant l'URL exposée par Amplify.

Même si vous ne les connaissez pas parfaitement pour le moment, vous n'avez pas à redouter d'employer tous ces nouveaux outils ! Pour l’heure, vous n’utiliserez aucun autre service AWS. Vous n’avez pas non plus à exécuter des serveurs Web. (Un « serveur » est un périphérique logiciel ou matériel qui accepte les demandes faites sur un réseau et y répond) afin de rendre votre site Web disponible.

Le site Web que vous créerez constituera une page simple « Hello World », et des fonctionnalités supplémentaires y seront ajoutées dans les modules suivants.

Pour la plupart des applications réelles, vous voudrez sans doute utiliser un domaine personnalisé pour héberger votre site. Un domaine personnalisé correspond à un nom unique qui identifie un site Web, comme www.amazon.com. Si cela vous intéresse, Amplify fournit également une assistance pour les domaines personnalisés.

Opérations que vous allez apprendre à effectuer

  • Comment créer une application Amplify
  • Comment charger les fichiers d’un site Web directement dans Amplify
  • Comment déployer les nouvelles versions d’une page Web avec Amplify

Concepts clés

Site Web statique : un site Web statique comporte du contenu fixe, contrairement aux sites Web dynamiques. C'est le type de site le plus basique et le plus simple à mettre en place. Il vous suffit de créer quelques pages HTML, puis de les publier sur un serveur Web.

Hébergement Web : permet de bénéficier des technologies et services nécessaires à la consultation de votre site sur Internet.

Régions AWS : il s'agit de régions géographiques distinctes dans lesquelles AWS héberge son infrastructure. Comme elles sont réparties dans le monde entier, les clients peuvent choisir la plus proche d'eux pour héberger leur infrastructure cloud.

 Durée nécessaire

5 minutes

 Services utilisés

 Éléments requis

Mise en œuvre

  • Création d'une application Web avec la console Amplify
    1. Ouvrez votre éditeur de texte préféré sur votre ordinateur. Créez un fichier, puis collez les éléments HTML suivants dedans :
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2. Enregistrez le fichier sous le nom index.html.

    3. ZIPPEZ (compressez) uniquement le fichier HTML.

    4. Dans une nouvelle fenêtre de navigation, connectez-vous à la Console Amplify. REMARQUE : nous utiliserons la région Oregon (us-west-2) pour ce didacticiel.

    5. Sous Déployer, cliquez sur le bouton orange Commencer.

    6. Sélectionnez Déployer sans fournisseur Git. Voici ce que vous devriez voir à l'écran :

    full-stack amplify console module one AmplifyAppSetup

    7. Cliquez sur le bouton orange Continuer.

    8. Dans le champ Nom de l’application, saisissez Commencer.

    9. Pour le nom Environnement, saisissez dev.

    10. Sélectionnez la méthode glisser/déposer. Voici ce que vous devriez voir sur votre écran :

    full-stack amplify console module one AmplifyManualDeploy

    11. Cliquez sur le bouton Choisir les fichiers.

    12. Sélectionnez le dossier ZIP que vous avez créé à l'étape 3.

    13. Cliquez sur le bouton orange Enregistrer et déployer.

    14. Après quelques secondes, le message Déploiement achevé avec succès.

  • Testez votre application Web
    1. Cliquez sur le lien sous Domaine.
    2. Votre application Web se chargera dans un nouvel onglet de navigation et affichera « Hello World ». Félicitations !

Architecture de l’application

Votre architecture est actuellement similaire à la suivante :

full-stack amplify console arch diagram module 1

Pour le moment, elle est assez simple, car seule la console AWS Amplify est employée. Nous avons maintenant des applications Web avec lesquelles les utilisateurs peuvent interagir en direct. Nous créerons ensuite une fonction Lambda.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Création d'une fonction sans serveur