Déployer une simple application Fullstack avec Docker
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
Conclusion
Avec Docker , il est donc possible d’automatiser facilement le déploiement d’une application fullstack comme on l’a vu ici.