Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
Vous êtes sur la page 1/ 13
Travail pratique
Manipuler Docker
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 :
1. md node_project
Naviguez vers ce répertoire :
1. cd node_project 2. Copy
Ce sera le répertoire root du projet.
Ensuite, créez le fichier package.json avec les dépendances de votre projet :
Ajoutez au fichier les informations suivantes concernant le projet ; veillez à remplacer
les informations sur l’auteur par votre propre nom et vos coordonnées :
Nous allons créer un site web qui offre aux utilisateurs des informations sur les requins.
Créer index.js dans le répertoire principal du projet pour définir les routes du projet. 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 :
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';
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 :
1. md views
et creer dedans 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 : <!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"></scrip t> </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="#">Tout sur le Requin</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="/">Acceuil</a></li> <li><a href="/sharks">Requins</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h1>Voulez-vous vous informer sur les Requins?</h1> <p>Etes vous prets pour s'informer sur les requins?</p> <br> <p><a class="btn btn-primary btn-lg" href="/sharks" role="button">Requin Info</a></p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <h3>Tous les requins ne sont pas pareils</h3> <p>Bien que certains soient dangereux, les requins n’attaquent généralement pas les humains. Sur les 500 espèces connues des chercheurs, seules 30 attaquent les humains.</p> </div> <div class="col-md-6"> <h3>Les requins sont anciens</h3> <p>Il existe des preuves suggérant que les requins vivaient il y a 400 millions d'années.</p> </div> </div> </div> </body> </html>
Ensuite, créez puis ouvrez le fichier appelé 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 :
<!DOCTYPE html> <html lang="en"> <head> <title>Tout sur les Requins</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"></scrip t> </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="#">Tout sur les Requins</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav mr-auto"> <li><a href="/">Acceuil</a></li> <li class="active"><a href="/sharks">Requins</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <h1>Requin Info</h1> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <p> <div class="caption">Certains requins sont connus pour être dangereux pour les humains, mais beaucoup d’autres ne le sont pas. Le requin-scie, par exemple, n’est pas considéré comme une menace pour les humains.</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">D’autres requins sont connus pour être amicaux et accueillants !</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 :
1. md views/css
Creez puis 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 :
Le . spécifie que le contexte de construction est le répertoire actuel.
Vérifiez vos images :
1. docker images 2.
Vous verrez le résultat suivant :
Output REPOSITORY 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 :
1. docker run --name nodejs-image-demo -p 80:8080 -d nodejs-image-
demo Inspectez la liste de vos conteneurs en fonctionnement avec docker ps :
1. docker ps 2.
Vous verrez le résultat suivant :
Output CONTAINER 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:// localhost. Vous verrez une fois encore la page d’accueil de votre 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 (facultatif) - 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 :
1. docker login -u your_dockerhub_username -p
your_dockerhub_password 2. 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 : 1. docker push your_dockerhub_username/nodejs-image-demo 2.
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 :
1. docker ps 2.
Vous verrez le résultat suivant :
Output CONTAINER 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 : 1. docker stop e50ad27074a7 2. Listez toutes vos images portant le drapeau -a : 1. docker images -a 2. 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 : Output REPOSITORY 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 :
1. docker system prune -a
2.
Toutes vos images et tous vos conteneurs ayant été supprimés, vous pouvez maintenant extraire l’image de l’application à partir du Docker Hub :
Output REPOSITORY 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 :
1. docker run --name nodejs-image-demo -p 80:8080 -d
your_dockerhub_username/nodejs-image-demo 2.
Listez vos conteneurs en fonctionnement :
1. docker ps 2.
Output CONTAINER 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://localhost une fois de plus pour examiner votre application en cours.
