Comment emballer l'application VueJS + NodeJS + MongoDB dans Docker

Comme vous pouvez le voir dans l'article précédent, j'ai travaillé avec différents projets. Les premiers jours dans une nouvelle équipe vont généralement de la même manière: le back-end m'assoit et effectue des actions magiques pour installer et déployer l'application. Docker est indispensable pour le front-end puisque le backend est souvent écrit sur une large gamme de piles PHP / Java / Python / C # et le front n'a pas besoin de distraire le backend à chaque fois pour installer et déployer tout. Ce n'est qu'à un seul endroit que j'ai vu un tas de Docker-Jenkins avec un déploiement transparent, des journaux, vissés par des auto-tests.

De nombreux articles détaillés ont été écrits sur Docker. Cet article traitera du déploiement de l'application de page unique à l'aide de VueJS / Vue Router, la partie serveur en tant qu'API RESTful avec NodeJS et MongoDB est utilisé comme base de données. Docker Compose est utilisé pour décrire et exécuter plusieurs applications de conteneur.

Pourquoi ai-je besoin d'un docker

Docker vous permet d'automatiser le processus de déploiement d'une application. Le développeur n'a plus besoin d'installer de programme lui-même, pour faire face à l'incompatibilité des versions sur sa machine. Il suffit d'installer Docker et de conduire 1 à 2 équipes dans la console. Il est plus pratique de le faire sous Linux.

Pour commencer

Installer Docker et Docker compose

Structure des dossiers

Nous créons 2 dossiers pour les applications client et serveur. Un fichier avec l'extension .yml est une configuration Docker Compose où les conteneurs d'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 #   CMD  Dockerfile  /server ports: - "3000:3000" links: - mongo client: build: client/ #command: http-server ./dist #   CMD  Dockerfile  /client network_mode: host ports: - "8089:8089" depends_on: - server 

Nous créons 3 services en docker: pour NodeJS, MongoDB et pour la statique sur Vue. Pour connecter le client au serveur, dépend du serveur est ajouté. Liens mongo est utilisé pour lier MongoDB à l'API du serveur. Serveur, client, mongo - noms de service.

Client sur VueJS

Le dossier / client contient l'application sur VueJS. Application créée à l'aide de Vue Cli . Lors de la création de l'image, l'application cliente s'intègre dans un ensemble de fichiers statiques dans le dossier / dist . Dockerfile décrit un ensemble de commandes pour créer une image:

 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"] 

Veuillez noter que package.json est copié et installé séparément du reste des fichiers de projet. Cela est fait pour les performances, 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.

Enfin, lorsque le conteneur démarre, la commande npm run dev est exécutée. Cette commande est décrite dans package.json:

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

Pour exécuter des fichiers à partir du dossier / dist , le http-server installé globalement et le spa-http-server installé dans les dépendances de développement afin que Vue Router fonctionne correctement. L'indicateur –push-state redirige vers index.html. L'indicateur -c avec une valeur de 1 seconde est ajouté afin que le serveur http ne mette pas en cache les scripts. Il s'agit d'un cas de test; sur un projet réel, il est préférable d'utiliser nginx.

Dans la boutique Vuex, créez le apiHost: 'http://localhost:3000' , où le port NodeJS Api est enregistré. La partie client est prête. Maintenant, toutes les demandes du client vers l'arrière vont à cette URL.

API du serveur NodeJS

Dans le dossier /server , créez server.js et Dockerfile:

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

Server.js spécifie l' URL de la base de données const url = 'mongodb://mongo:27017/'; . Nous autorisons les demandes interdomaines du client:

 const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 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)); }); 

Conclusion

Maintenant, allez dans le répertoire du projet et exécutez la construction docker-compose build images et docker-compose up pour démarrer les conteneurs. La commande lèvera 3 conteneurs: serveur, client, mongo . Pour un serveur sur NodeJS, vous pouvez configurer le rechargement à chaud en l'associant au dossier utilisateur. Et le client est en cours de développement pour s'exécuter localement avec rechargement à chaud, en exécutant séparément le serveur et le mongo . Pour démarrer un service distinct, spécifiez simplement son nom docker-compose up client . N'oubliez pas d' prune et de supprimer parfois des conteneurs, des réseaux et des images pour libérer des ressources.

Le code complet peut être trouvé ici . Le projet est toujours en développement.