Comment emballer une application VueJS + NodeJS + MongoDB dans Docker

Comme on peut le comprendre dans l'article précédent, j'ai travaillé sur différents projets. Les premiers jours dans une nouvelle équipe se déroulent généralement de la même manière : le développeur backend s'assoit à mes côtés et fait des actions magiques pour installer et déployer l'application. Docker est indispensable pour les développeurs frontend, car le backend est souvent écrit dans une large gamme de stacks PHP/Java/Python/C# et le frontend n'a pas besoin de déranger le backend à chaque fois pour tout installer et déployer. Je n'ai vu qu'à un seul endroit la combinaison Docker-Jenkins avec un déploiement transparent, des journaux, et des tests automatisés intégrés.

Il y a beaucoup d'articles détaillés sur Docker. Dans cet article, nous allons parler du déploiement d'une application monopage utilisant VueJS/Vue Router, avec une partie serveur sous forme d'API RESTful et MongoDB comme base de données. Pour décrire et lancer plusieurs applications-conteneurs, nous utilisons Docker Compose.

Pourquoi a-t-on besoin de Docker

Docker permet d'automatiser le processus de déploiement d'applications. Les développeurs n'ont plus besoin d'installer eux-mêmes les programmes et de lutter contre des incompatibilités de versions sur leur machine. Il suffit d'installer Docker et d'entrer 1-2 commandes dans le terminal. C'est plus pratique de le faire sur Linux.

Introduction

Nous installons Docker and Docker compose

Structure des dossiers

Nous créons 2 dossiers pour les applications client et serveur. Le fichier avec l'extension .yml est la configuration Docker Compose, où les conteneurs de l'application sont définis et liés.
Docker-compose.yml :

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #ici vous pouvez écraser CMD dans Dockerfile dans /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #ici vous pouvez écraser CMD dans Dockerfile dans /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Nous créons 3 services dans Docker : pour NodeJS, MongoDB et pour les fichiers statiques sur Vue. Pour relier le client au serveur, nous avons ajouté depends on server. Pour lier MongoDB à l'API serveur, nous utilisons links mongo. Serveur, client, mongo — ce sont les noms des services.

Client sur VueJS

Dans le dossier /client l'application est basée sur VueJS. L'application a été créée avec Vue Cli. Lors de la création de l'image, l'application client est transformée en un ensemble de fichiers statiques dans le dossier /dist. Dans le Dockerfile, un ensemble de commandes pour construire l'image est décrit :

FROM node:10
WORKDIR /client
COPY ./package*.json ./
RUN npm install
RUN npm install -g http-server
COPY . .
RUN npm run build
EXPOSE 8081
CMD ["npm", "test:dev"]

Notez que le package.json est copié et installé séparément des autres fichiers du projet. Cela est fait pour des raisons de performance, afin que le contenu du dossier /node_modules soit mis en cache lors de la reconstruction. Chaque ligne de commande est mise en cache séparément.

À la fin, lors du démarrage du conteneur, la commande est exécutée npm run dev. Cette commande est décrite dans package.json :

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

Pour exécuter les fichiers du dossier /dist, http-server est installé globalement , et dans les dev-dependencies, le packagespa-http-server , afin que Vue Router fonctionne correctement. L'option —push-state redirige vers index.html. L'option -c avec une valeur de 1 seconde a été ajoutée pourne pas mettre en cache les scripts. C'est un exemple de test, pour un projet réel, il est préférable d'utiliser nginx. , et dans les dev-dependencies, le package Dans le store Vuex, nous créons le champ

apiHost: 'http://localhost:3000' , où le port de l'API NodeJS est spécifié. La partie client est prête. Maintenant, toutes les requêtes du client vers le backend se font à cette URL.NodeJS server API

nous créons

Dans le dossier /server et le Dockerfile : server.js FROM node:10 WORKDIR /server COPY ./package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"]

pour la base de données

Dans server.js qui sont spécifiés url const url = 'mongodb://mongo:27017/'; . Nous autorisons les requêtes cross-domain depuis le client :const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // certains anciens navigateurs (IE11, divers SmartTVs) ont des problèmes avec 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); });

Maintenant, allons dans le répertoire du projet et exécutons

Conclusion

docker-compose build pour construire les images et pour démarrer les conteneurs. La commande élèvera 3 conteneurs : docker-compose up server, client, mongo . Pour le serveur NodeJS, vous pouvez configurer le hot-reload en le reliant au dossier user. Et le client en développement sera exécuté localement avec hot reload, en lançant séparément. Pour démarrer un service séparé, il suffit d'indiquer son nom serveur et mongodocker-compose up client . N'oubliez pas de faire occasionnellementprune et de supprimer les conteneurs, réseaux et images pour libérer des ressources. Vous pouvez voir le code complet

. Le projet est encore en cours de développement. ici🥇Comment empaqueter une application VueJS + NodeJS + MongoDB dans Docker | ProHoster

Source : habr.com