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

Comme vous pouvez le comprendre grâce à 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 backender s'assoit avec moi et effectue des actions magiques pour installer et déployer l'application. Docker est indispensable pour les développeurs front-end car... Le backend est souvent écrit dans une large gamme de piles PHP/Java/Python/C#, et le front n'a pas besoin de distraire le backend à chaque fois pour tout installer et déployer. À un seul endroit, j'ai vu une combinaison Docker-Jenkins avec un déploiement transparent, des journaux et des tests automatisés.

De nombreux articles détaillés ont été écrits sur Docker. Cet article parlera du déploiement d'une application monopage à l'aide de VueJS/Vue Router, la partie serveur se présente sous la forme d'une API RESTful avec NodeJS, et MongoDB est utilisé comme base de données. Docker Compose est utilisé pour définir et exécuter plusieurs applications conteneurs.

Pourquoi Docker est nécessaire

Docker vous permet d'automatiser le processus de déploiement d'une application. Le développeur n’a plus besoin d’installer lui-même des programmes ni de gérer des incompatibilités de versions sur sa machine. Tout ce que vous avez à faire est d'installer Docker et de saisir les commandes 1 à 2 dans la console. Le moyen le plus pratique de procéder est sous Linux.

Commencer

Fixer Docker ainsi que Docker compose

Arborescence 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'applications sont définis et associé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 dans Docker : pour NodeJS, MongoDB et pour les statiques dans Vue. Ajouté pour connecter le client au serveur cela dépend du serveur. Pour lier MongoDB à l'API du serveur, utilisez liens mongo. Serveur, client, mongo - noms des services.

Client VueJS

Dans le dossier /client L'application est basée sur VueJS. L'application a été créée à l'aide VueCli. Lors de la création d'une image, l'application client est intégrée à un ensemble de fichiers statiques dans le dossier /dist. Le 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 du projet. Ceci est fait pour des raisons de performances, afin que le contenu du dossier /node_modules soit mis en cache lors de la nouvelle construction. Chaque ligne de commande est mise en cache séparément.

Enfin, lorsque le conteneur démarre, 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 des fichiers à partir d'un dossier /dist, installé dans le monde entier http-server, et dans les dépendances de développement, le package spa-http-serverpour que Vue Router fonctionne correctement. L'indicateur --push-state redirige vers index.html. L'indicateur -c d'une valeur de 1 seconde a été ajouté à serveur http n'a pas mis en cache les scripts. Ceci est un exemple de test ; sur un projet réel, il est préférable d'utiliser nginx.

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

API du serveur NodeJS

Dans le dossier /server créer serveur.js et Dockerfile :

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

В serveur.js est indiqué url pour la base de données const url = 'mongodb://mongo:27017/';. Autoriser les requêtes inter-domaines 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

Allons maintenant dans le répertoire du projet et exécutons docker-compose build pour construire des images et docker-compose up pour exécuter des conteneurs. L'équipe soulèvera 3 conteneurs : serveur, client, mongo. Pour un serveur NodeJS, vous pouvez configurer le rechargement à chaud en le liant au dossier utilisateur. Et le client en cours de développement doit être lancé localement avec rechargement à chaud, exécuté séparément serveur и mongo. Pour démarrer un service distinct, spécifiez simplement son nom docker-compose up client. N'oublie pas de le faire parfois prune et supprimer des conteneurs, des réseaux et des images pour libérer des ressources.

Vous pouvez voir le code complet ici. Le projet est encore en développement.

Source: habr.com