Tutorial

Comment construire une application Node.js avec Docker [Quickstart]

Published on April 24, 2020

Français

Comment construire une application Node.js avec Docker [Quickstart]

Introduction

Ce tutoriel vous guidera dans la création d’une image d’application pour un site web statique qui utilise le cadre Express et Bootstrap. Vous construirez ensuite un conteneur en utilisant cette image, la pousserez vers Docker Hub, et l’utiliserez pour construire un autre conteneur, en montrant comment vous pouvez recréer et mettre à l’échelle votre application.

Pour une version plus détaillée de ce tutoriel, avec des explications plus détaillées de chaque étape, veuillez vous référer à Comment créer une application Node.js avec Docker.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

Un utilisateur sudo sur votre serveur ou dans votre environnement local.
Docker.
Node.js et npm.
Un compte Docker Hub.

Étape 1 - Installation des dépendances de votre application

Tout d’abord, créez un répertoire pour votre projet dans le répertoire personnel de votre utilisateur non root :

mkdir node_project

Naviguez vers ce répertoire :

cd node_project

Ce sera le répertoire root du projet.

Ensuite, créez un package.json avec les dépendances de votre projet :

nano package.json

Ajoutez au fichier les informations suivantes concernant le projet ; veillez à remplacer les informations sur l’auteur par votre propre nom et vos coordonnées :

~/node_project/package.json

{
  "name": "nodejs-image-demo",
  "version": "1.0.0",
  "description": "nodejs image demo",
  "author": "Sammy the Shark <sammy@example.com>",
  "license": "MIT",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nodejs",
    "bootstrap",
    "express"
  ],
  "dependencies": {
    "express": "^4.16.4"
  }
}

Installez les dépendances de votre projet.

npm install

Étape 2 - Création des fichiers d’application

Nous allons créer un site web qui offre aux utilisateurs des informations sur les requins.

Ouvrez application.js dans le répertoire principal du projet pour définir les routes du projet.

nano app.js

Ajoutez le contenu suivant au fichier pour créer l’application Express et les objets du Routeur, définissez le répertoire de base, le port et l’hôte comme variables, définissez les routes et montez le logiciel médiateur du routeur avec les actifs statiques de l’application :

~/node_project/app.js

var express = require("express");
var app = express();
var router = express.Router();

var path = __dirname + '/views/';

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

router.use(function (req,res,next) {
  console.log("/" + req.method);
  next();
});

router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

router.get("/sharks",function(req,res){
  res.sendFile(path + "sharks.html");
});

app.use(express.static(path));
app.use("/", router);

app.listen(8080, function () {
  console.log('Example app listening on port 8080!')
})

Ensuite, ajoutons un peu de contenu statique à l’application. Créez le répertoire des vues :

mkdir views

Ouvrez index.html :

nano views/index.html

Ajoutez le code suivant au fichier, ce qui permettra d’importer Boostrap et de créer un composant Jumbotron avec un lien vers la page d’information sharks.html plus détaillée :

~/node_project/views/index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>About Sharks</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class="navbar navbar-inverse navbar-static-top">
         <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand" href="#">Everything Sharks</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
               <ul class="nav navbar-nav mr-auto">
                  <li class="active"><a href="/">Home</a></li>
                  <li><a href="/sharks">Sharks</a></li>
               </ul>
            </div>
         </div>
      </nav>
      <div class="jumbotron">
         <div class="container">
            <h1>Want to Learn About Sharks?</h1>
            <p>Are you ready to learn about sharks?</p>
            <br>
            <p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Get Shark Info</a></p>
         </div>
      </div>
      <div class="container">
         <div class="row">
            <div class="col-md-6">
               <h3>Not all sharks are alike</h3>
               <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.</p>
            </div>
            <div class="col-md-6">
               <h3>Sharks are ancient</h3>
               <p>There is evidence to suggest that sharks lived up to 400 million years ago.</p>
            </div>
         </div>
      </div>
   </body>
</html>

Ensuite, ouvrez un fichier appelé sharks.html :

nano views/sharks.html

Ajoutez le code suivant, qui importe le Bootstrap et la feuille de style personnalisée, et offre aux utilisateurs des informations détaillées sur certains requins :

~/node_project/views/sharks.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>About Sharks</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link href="css/styles.css" rel="stylesheet">
      <link href='https://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Everything Sharks</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav mr-auto">
               <li><a href="/">Home</a></li>
               <li class="active"><a href="/sharks">Sharks</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <div class="jumbotron text-center">
      <h1>Shark Info</h1>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-md-6">
            <p>
            <div class="caption">Some sharks are known to be dangerous to humans, though many more are not. The sawshark, for example, is not considered a threat to humans.</div>
            <img src="https://assets.digitalocean.com/articles/docker_node_image/sawshark.jpg" alt="Sawshark">
            </p>
         </div>
         <div class="col-md-6">
            <p>
            <div class="caption">Other sharks are known to be friendly and welcoming!</div>
            <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
            </p>
         </div>
      </div>
    </div>
   </body>
</html>

Enfin, créez la feuille de style CSS personnalisée que vous avez liée dans index.html et sharks.html en créant d’abord un dossier css dans le répertoire des vues :

mkdir views/css

Ouvrez la feuille de style et ajoutez le code suivant, qui définira la couleur et la police de caractères souhaitées pour nos pages :

~/node_project/views/css/styles.css

.navbar {
        margin-bottom: 0;
}

body {
        background: #020A1B;
        color: #ffffff;
        font-family: 'Merriweather', sans-serif;
}
h1,
h2 {
        font-weight: bold;
}
p {
        font-size: 16px;
        color: #ffffff;
}


.jumbotron {
        background: #0048CD;
        color: white;
        text-align: center;
}
.jumbotron p {
        color: white;
        font-size: 26px;
}

.btn-primary {
        color: #fff;
        text-color: #000000;
        border-color: white;
        margin-bottom: 5px;
}

img, video, audio {
        margin-top: 20px;
        max-width: 80%;
}

div.caption: {
        float: left;
        clear: both;
}

Lancez l’application :

npm start

Dans votre navigateur, accédez à http://your_server_ip:8080 ou localhost:8080 si vous travaillez en local. Vous verrez la page d’accueil suivante :

Page d'accueil de l'application

Cliquez sur le bouton Get Shark Info. Vous verrez le page d’information suivante :

Shark Info Page

Votre application fonctionne. Lorsque vous êtes prêt, quittez le serveur en tapant CTRL+C.

Étape 3 - Rédaction du Dockerfile

Dans le répertoire root de votre projet, créez le Dockerfile :

nano Dockerfile

Ajoutez le code suivant au fichier :

~/node_project/Dockerfile


FROM node:10-alpine

RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app

WORKDIR /home/node/app

COPY package*.json ./

USER node

RUN npm install

COPY --chown=node:node . .

EXPOSE 8080

CMD [ "node", "app.js" ]

Le Dockerfile utilise une image de base alpine et garantit que les fichiers d’application sont la propriété de l’utilisateur non-root du noeud qui est fourni par défaut par le Docker Node image.

Ensuite, ajoutez vos modules de noeuds locaux, npm logs, Dockerfile et .dockerignore à votre fichier .dockerignore :

~/node_project/.dockerignore

node_modules
npm-debug.log
Dockerfile
.dockerignore

Construisez l’image d’application en utilisant la commande docker build :

docker build -t your_dockerhub_username/nodejs-image-demo .

Le . spécifie que le contexte de construction est le répertoire actuel.

Vérifiez vos images :

docker images

Vous verrez le résultat suivant :

OutputREPOSITORY                                         TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo          latest              1c723fb2ef12        8 seconds ago       895MB
node                                               10                  f09e7c96b6de        17 hours ago        893MB

Exécutez la commande suivante pour construire un conteneur en utilisant cette image :

docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

Inspectez la liste de vos conteneurs en fonctionnement avec docker ps :

docker ps

Vous verrez le résultat suivant :

OutputCONTAINER ID        IMAGE                                                   COMMAND             CREATED             STATUS              PORTS                  NAMES
e50ad27074a7        your_dockerhub_username/nodejs-image-demo               "npm start"         8 seconds ago       Up 7 seconds        0.0.0.0:80->8080/tcp   nodejs-image-demo

Votre conteneur étant en fonctionnement, vous pouvez maintenant visiter votre application en naviguant sur votre navigateur vers http://your_server_ip ou localhost. Vous verrez une fois encore la page d’accueil de votre application :

Page d'accueil de l'application

Maintenant que vous avez créé une image pour votre application, vous pouvez la pousser vers Docker Hub en vue d’une utilisation ultérieure.

Étape 4 - Utilisation d’un répertoire pour travailler avec des images

La première étape pour pousser l’image est de se connecter à votre compte Docker Hub :

docker login -u your_dockerhub_username -p your_dockerhub_password

En vous connectant de cette façon, vous créerez un fichier ~/.docker/config.json dans le répertoire personnel de votre utilisateur avec vos identifiants Docker Hub.

Poussez votre image vers le haut en utilisant votre propre nom d’utilisateur au lieu de your_dockerhub_username :

docker push your_dockerhub_username/nodejs-image-demo

Si vous le souhaitez, vous pouvez tester l’utilité du registre d’images en détruisant votre conteneur d’application et votre image actuels et en les reconstruisant.

Tout d’abord, listez vos conteneurs en fonctionnement :

docker ps

Vous verrez le résultat suivant :

OutputCONTAINER ID        IMAGE                                       COMMAND             CREATED             STATUS              PORTS                  NAMES
e50ad27074a7        your_dockerhub_username/nodejs-image-demo   "npm start"         3 minutes ago       Up 3 minutes        0.0.0.0:80->8080/tcp   nodejs-image-demo

En utilisant le CONTAINER ID listé dans votre sortie, arrêtez le conteneur d’application en cours d’exécution. Veillez à remplacer l’ID surligné ci-dessous par votre propre CONTAINER ID :

docker stop e50ad27074a7

Listez toutes vos images portant le drapeau -a :

docker images -a

Vous verrez le résultat suivant avec le nom de votre image your_dockerhub_username/nodejs-image-demo, ainsi que l’image du nœud et les autres images de votre construction :

OutputREPOSITORY                                           TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo            latest              1c723fb2ef12        7 minutes ago       895MB
<none>                                               <none>              e039d1b9a6a0        7 minutes ago       895MB
<none>                                               <none>              dfa98908c5d1        7 minutes ago       895MB
<none>                                               <none>              b9a714435a86        7 minutes ago       895MB
<none>                                               <none>              51de3ed7e944        7 minutes ago       895MB
<none>                                               <none>              5228d6c3b480        7 minutes ago       895MB
<none>                                               <none>              833b622e5492        8 minutes ago       893MB
<none>                                               <none>              5c47cc4725f1        8 minutes ago       893MB
<none>                                               <none>              5386324d89fb        8 minutes ago       893MB
<none>                                               <none>              631661025e2d        8 minutes ago       893MB
node                                                 10                  f09e7c96b6de        17 hours ago        893MB

Retirez le conteneur arrêté et toutes les images, y compris les images inutilisées ou en suspens, à l’aide de la commande suivante :

docker system prune -a

Toutes vos images et tous vos conteneurs ayant été supprimés, vous pouvez maintenant extraire l’image de l’application à partir du Docker Hub :

docker pull your_dockerhub_username/nodejs-image-demo

Listez à nouveau vos images :

docker images

Vous verrez l’image de votre application :

OutputREPOSITORY                                     TAG                 IMAGE ID            CREATED             SIZE
your_dockerhub_username/nodejs-image-demo      latest              1c723fb2ef12        11 minutes ago      895MB

Vous pouvez maintenant reconstruire votre conteneur en utilisant la commande de l’étape 3 :

docker run --name nodejs-image-demo -p 80:8080 -d your_dockerhub_username/nodejs-image-demo

Listez vos conteneurs en fonctionnement :

docker ps

OutputCONTAINER ID        IMAGE                                                   COMMAND             CREATED             STATUS              PORTS                  NAMES
f6bc2f50dff6        your_dockerhub_username/nodejs-image-demo               "npm start"         4 seconds ago       Up 3 seconds        0.0.0.0:80->8080/tcp   nodejs-image-demo

Consultez http://your_server_ip ou localhost une fois de plus pour examiner votre application en cours.

Tutoriels connexes

Voici des liens vers des guides plus détaillés relatifs à ce tutoriel :

Vous pouvez également consulter les séries plus longues sur Des conteneurs à Kubernetes avec Node.js à partir desquelles ce tutoriel a été adapté.

Vous pouvez également consulter notre bibliothèque complète de ressources Docker pour plus d’informations sur Docker.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

Kathleen Juell

author

Still looking for an answer?

Ask a question Search for more help

Was this helpful?

1 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Vincent Moucadeau • July 8, 2022

Personnellement, dans le Dockerfile, j’ai dû placer la ligne COPY --chown=node:node . . avant USER node, sinon j’ai une erreur de permission lorsque je build l’image