Déployer une simple application Fullstack avec Docker

Published in

Docker: Déployer une simple application fullstack

5 min readNov 9, 2020

Introduction

Docker est devenu un outil incontournable pour la création d’application Fullstack. Il permet dans ce cas précis d’automatiser l’organisation et le déploiement d’applications. Grâce à docker la gestion des ressources nécessaires et la communication entre le Frontend et le Backend sont totalement automatisées. Nous allons ici montrer comment déployer une simple application Fullstack avec docker.

C’est quoi Docker ?

Docker est une plateforme qui permet de construire et gérer des services déployés dans des containers. Il offre une grande flexibilité car il permet la gestion d’applications virtualisées sur un système d’exploitation.

Organisation d’une application fullstack

Afin de créer notre application full stack déployée par docker, nous allons revenir sur quelques notions:

- Le Frontend

Une application, comporte une partie visible de tous. C’est par exemple le cas d’une page web. C’est cette partie visible que l’on appelle souvent “frontend”. Dans notre cas le frontend sera une page web comportant du code javascript.

- Le backend

Lorsqu’on Parle de backend, on fait référence à la partie cachée d’une application qui est souvent constitué d’un Service, d’une Application, et d’une Base de données. Ici dans notre cas le backend sera constitué :

d’une base de données qui permettra de stocker les données
d’une api javascript qui gèrera les requêtes qui proviendront du frontend

- L’application fullstack

Une application full stack est une application qui comporte un backend et un frontend. Pour l’automatisation du déploiement de notre application fullstack, nous utiliserons docker-compose.

- Organisation des fichiers

Pour la mise en place de notre application, nous allons créer un fichier Dockerfile dans le répertoire api et un autre dans le répertoire client. Ces deux fichiers nous permettrons de créer les containers nécessaires à l’api et au client.

Nous créerons en plus un troisième fichier appelé .docker-compose.yml . C’est dans ce fichier que nous allons gérer le déploiement de l’application et la communication entre le backend et le frontend.

Préparation du Frontend

A cette étape, on considère que vos fichiers pour la mise en place de la partie client sont prêts. Nous utiliserons alors docker pour automatiser la création du container dans lequel sera déployé la partie client. Pour cela nous allons créer un fichier appelé Dockerfile dans le répertoire client. Le code complet est disponible ici sous github .

Le contenu du fichier Dockerfile est le suivant:

FROM nodeWORKDIR /clientCOPY package*.json /client/RUN npm installCOPY . /client/EXPOSE 3000
CMD [ "npm", "start"]

Revoyons en détail la structure de notre fichier:

FROM node : permet d’utiliser l’image docker Node.js hébergé sur docker hub et appelé node
WORKDIR /client : permet de définir le répertoire de travail de l’application coté client (appelé /client)
COPY package.json /client/ : Ici on copie le fichier package.json dans le répertoire client du container
RUN npm install : Avec cette commande, on installe le service npm dans le container en utilisant la commande RUN
COPY . /client/ : Grâce à la commande COPY, on copie tous les fichiers de l’api dans le répertoire client contenu dans le container
EXPOSE 3000: Cette commande permet d’exposer le service de notre client sur le port 3000 de notre machine. on pourra alors accéder à ce service avec l’url : localhost:3000
CMD [ “npm”, “start”] : Ici , l’on démarre le service npm

Préparation du backend

Ici , l’on considère que vos fichiers pour la mise en place de votre api sont prêts. Nous allons alors grâce à docker automatiser la création du container dans lequel votre api sera déployé. Pour cela nous allons créer un fichier appelé Dockerfile dans le répertoire api.

Le contenu du fichier Dockerfile est le suivant:

FROM nodeWORKDIR /appCOPY package*.json /app/RUN npm installCOPY . /app/EXPOSE 4000
CMD [ "npm", "start"]

Revoyons en détail la structure de notre fichier:

FROM node : permet d’utiliser l’image docker Node.js hébergé sur docker hub et appelé node
WORKDIR /app : permet de définir le répertoire de travail de l’application (/app)
COPY package.json /app/ : Ici on copie le fichier package.json dans le répertoire app du container
RUN npm install : Avec cette commande, on lance le service npm dans le container en utilisant la commande RUN
COPY . /app/ : Grâce à la commande COPY, on copie tous les fichiers de l’api dans le répertoire app contenu dans le container
EXPOSE 4000: Cette commande permet d’exposer le service de notre api sur le port 4000 de notre machine. on pourra alors accéder à ce service avec l’url : localhost:4000
CMD [ “npm”, “start”] : Ici , l’on démarre le service npm

Automatisation du déploiement complet du service avec Docker-compose

Nous allons maintenant ajouter une base de données mongo à notre api et automatiser le déploiement complet de notre application fullstack. Pour cela nous allons créer le fichier “.docker-compose.yml” que nous allons sauvegarder à la racine du répertoire de notre application.

Le contenu de notre fichier “docker-compose.yml” est le suivant :

version: "3"services:
    app:
        container_name: app
        restart: always
        build: ./api
        ports:
            - "4000:4000"
        depends_on:
            - mongoclient:
        container_name: client
        restart: always
        build: ./client
        ports:
            - "3000:3000"
        depends_on:
            - appmongo:
        container_name: mongo
        restart: always
        image: mongo
        volumes:
            - ./data:/data/db
        ports:
            - "27017:27017"

Quelques explications:

Dans notre application fullstack, on va définir 3 services (app, mongo et client)
Le nom du container contenant le service est défini grâce au mot clé “container_name”
le paramètre “build” permet de spécifier dans quel répertoire où se trouvent les fichiers à utiliser pour le container
le paramètre “port” permet de faire la correspondance entre le port du container et le port de la machine hôte
Le paramètre “depends_on” permet de créer les dépendances entre les applications. Ici le service client dépend du service app qui lui même dépend du service mongo
Pour le déploiement d’une base de données mongo , on a utilisé l’image officielle mongo qui se trouve sur docker hub.
volumes : Permet de monter un répertoire de fichier dans le container (sous la forme [SOURCE:]TARGET[:MODE])

Lancement de notre application Fullstack

Maintenant démarrons notre application. Pour cela , à l’aide d’un terminal, se rendre dans le répertoire de sauvegarde des fichiers et exécuter la commande suivante:

docker-compose up

Le paramètre “depends_on” va alors permettre à docker de démarrer les services de notre application dans le bon ordre : mongo -> api -> client

Une fois les services démarrer , vous pouvez par exemple utiliser un navigateur web et vous rendre aux différentes urls : localhost:3000 ou localhost:4000