Déployer une application web sur AWS Elastic Beanstalk

GUIDE DE DÉMARRAGE

Module 1 : Créer une application Web

Dans ce module, vous apprendrez à créer une application Web NodeJS et à l'exécuter localement.

Introduction

Nous créerons une application non conteneurisée que nous déploierons sur le cloud. Dans cet exemple, nous utiliserons NodeJS pour créer une application Web.

L'application Web sera un simple serveur d'appli Web qui servira aux fichiers HTML statiques et qui dispose également d'un point de terminaison d'API REST. L'objectif de ce guide n'est pas de vous apprendre à créer des applications Web. Sentez-vous donc libre d'utiliser le modèle d'application ou de créer le vôtre. Ce guide est axé sur l'utilisation de NodeJS. Cependant, vous pouvez également créer une appli Web similaire à l'aide d'autres langages de programmation pris en charge par Elastic Beanstalk tels que Java, .NET, NodeJS, PHP, Ruby, Python, Go et Docker.

Vous pouvez implémenter cela dans votre ordinateur ou dans un environnement AWS Cloud9.

Vous apprendrez à

  • Développer une appli Web NodeJS qui sert un fichier HTML et qui dispose d'une API REST simple
  • Exécuter l'application localement

 Durée

10 minutes

 Prérequis du module

  • Compte AWS avec accès administrateur**
  • Dernière version de Chrome ou de Firefox (recommandé)

[**] Il est possible que les comptes créés au cours des dernières 24 heures n'aient pas encore accès aux services nécessaires à ce tutoriel.

Implémentation

Création de l'appli client

La première étape consiste à créer un nouveau répertoire pour notre application.

mkdir my_webapp
cd my_webapp

Vous pouvez ensuite initier le projet NodeJS. Cela crée un fichier package.json qui contiendra toutes les définitions de votre application NodeJS.

npm init -y

Création d'une appli Express

Nous utiliserons Express comme cadre d'application Web. Pour ce faire, nous devons installer Express comme dépendance dans notre projet NodeJS.

npm install express

Une fois cette commande exécutée, la dépendance sera visible dans le fichier package.json. Le répertoire node_modules et les fichiers package-lock.json seront également créés.

Vous pouvez désormais créer un nouveau fichier nommé app.js. Ce fichier contiendra la logique métier qui abritera notre serveur NodeJS Express.

Nous pouvons maintenant commencer à y ajouter du code. Ce qu'il faut ajouter en premier ce sont les dépendances de l'appli. Express, dans ce cas, permet d'utiliser le module déjà installé et d'ajouter ensuite le code pour le démarrage du serveur Web. Nous spécifierons le serveur Web pour le port 8080, puisqu'il s'agit de celui utilisé par Elastic Beanstalk par défaut.

var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;

app.listen(port, function() {
  console.log('Server running at http://127.0.0.1:', port);
});

Nous pouvons maintenant démarrer notre application. Toutefois, elle ne peut encore effectuer aucune action puisque nous n'avons défini aucun code de traitement de requêtes.

Création d'une API REST

Nous ajouterons maintenant du code afin de répondre à l'appel d'API REST HTTP. Pour créer notre premier appel d'API, il faut ajouter le code suivant entre le moment où le port est défini et le démarrage du serveur.

var express = require('express');
var app = express();
var fs = require('fs');
var port = 8080;

// New code
app.get('/test', function (req, res) {
    res.send('the REST endpoint test run!');
});


app.listen(port, function() {
  console.log('Server running at http://127.0.0.1:%s', port);
});

Cela sert uniquement à illustrer la manière de connecter le point de terminaison /test à notre code. Vous pouvez y ajouter une réponse différente ou un code qui réalise une tâche précise, mais cela s'inscrit en dehors du cadre de ce guide.

Servir du contenu HTML

Notre application Express NodeJS peut également servir une page Web statique. Nous devons créer une page HTML à utiliser comme modèle. Créons pour cela un fichier nommé index.html.

À l'intérieur de ce fichier, ajoutez le code HTML suivant contenant un lien vers le point de terminaison REST que nous avons créé plus tôt pour montrer comment il se connecte au backend.

<html>
    <head>
        <title>Elastic Beanstalk App</title>
    </head>

    <body>
        <h1>Welcome to the demo for ElasticBeanstalk</h1>
        <a href="/test">Call the test API</a>
    </body>
</html>

Pour servir cette page HTML depuis notre serveur Express, nous devons ajouter du code en plus, afin de rendre le / chemin lorsqu'elle est appelée. Pour ce faire, ajoutez le code suivant au-dessus de l'appel /test :

app.get('/', function (req, res) {
    html = fs.readFileSync('index.html');
    res.writeHead(200);
    res.write(html);
    res.end();
});

Ce code servira le fichier index.html, chaque fois qu'une requête est envoyée à la racine de l'appli (/).

Exécution locale du code

Nous pouvons désormais exécuter notre application et tester si elle fonctionne en local. Pour cela, nous allons mettre à jour le fichier package.json avec un script facilitant son exécution. Dans le fichier package.json, remplacez la section des scripts par :

"scripts": {
    "start": "node app.js"
  },

Vous pouvez désormais accéder à votre terminal et exécuter la commande :

npm start

Cela démarre un serveur local avec l'URL http://127.0.0.1:8080 ou http://localhost:8080.

Après avoir collé cet URL dans votre navigateur, vous devriez voir s'afficher :

gsg_build_elb_1

Pour arrêter le serveur, utilisez la combinaison des touches Ctrl + C pour arrêter le processus dans le terminal où vous avez exécuté la commande npm start

Conclusion

Dans ce premier module, nous avons créé une application NodeJS très simple et l'avons exécutée localement pour nous assurer qu'elle fonctionne. Dans le module suivant, nous verrons comment créer des infrastructures à l'aide d'AWS CDK pour les faire fonctionner sur AWS Elastic Beanstalk.

Prochainement : Création d'une infrastructure

Dites-nous si nous avons répondu à vos attentes.

Nous vous remercions pour votre commentaire
Nous sommes ravis que cette page vous ait été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer
Nous vous remercions pour votre commentaire
Nous sommes désolés que cette page ne vous ait pas été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer