Como empaquetar a aplicación VueJS + NodeJS + MongoDB en Docker

Como podedes entender no artigo anterior, traballei en diferentes proxectos. Os primeiros días nun equipo novo adoitan ir do mesmo xeito: o backender senta comigo e realiza accións máxicas para instalar e despregar a aplicación. Docker é indispensable para os desenvolvedores front-end porque... O backend adoita escribirse nunha ampla gama de pilas PHP/Java/Python/C# e a parte frontal non ten que distraer o backend cada vez para instalar e implementar todo. Só nun lugar vin unha combinación de Docker-Jenkins cunha implementación transparente, rexistros e probas automatizadas.

Escribíronse moitos artigos detallados sobre Docker. Este artigo falarase sobre a implantación dunha aplicación de páxina única usando VueJS/Vue Router, a parte do servidor ten a forma dunha API RESTful con NodeJS e MongoDB úsase como base de datos. Docker Compose úsase para definir e executar varias aplicacións de contedores.

Por que se necesita Docker

Docker permítelle automatizar o proceso de implantación dunha aplicación. O programador xa non necesita instalar programas por si mesmo nin xestionar a incompatibilidade de versións na súa máquina. Todo o que tes que facer é instalar Docker e escribir comandos 1-2 na consola. O xeito máis cómodo de facelo é en Linux.

Introdución

Conxunto Estivador Composición de Docker

Estrutura do cartafol

Creamos 2 cartafoles para aplicacións cliente e servidor. Un ficheiro coa extensión .yml é unha configuración Docker Compose, onde se definen e asocian os contedores de aplicacións.
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

Creamos 3 servizos en Docker: para NodeJS, MongoDB e para os estáticos en Vue. Engadido para conectar o cliente ao servidor depende do servidor. Para vincular MongoDB coa API do servidor, use ligazóns mongo. Servidor, cliente, mongo - nomes dos servizos.

Cliente VueJS

No cartafol /clienta A aplicación está baseada en VueJS. A aplicación creouse usando Vue Cli. Ao crear unha imaxe, a aplicación cliente está integrada nun conxunto de ficheiros estáticos no cartafol /dist. O Dockerfile describe un conxunto de comandos para construír unha imaxe:

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

Teña en conta que package.json cópiase e instálase por separado do resto dos ficheiros do proxecto. Isto faise para o rendemento, de xeito que o contido do cartafol /node_modules estea almacenado na memoria caché ao construír de novo. Cada liña de comandos almacénase en caché por separado.

Finalmente, cando se inicia o contedor, execútase o comando npm run dev. Este comando descríbese en package.json:

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

Para executar ficheiros desde un cartafol /dist, instalado globalmente http-server, e nas dependencias de desenvolvemento o paquete spa-http-serverpara que Vue Router funcione correctamente. A marca --push-state redirixe a index.html. Engadiuse a bandeira -c cun valor de 1 segundo servidor http non almacenaron scripts na caché. Este é un exemplo de proba; nun proxecto real é mellor usar nginx.

Na tenda Vuex creamos un campo apiHost: 'http://localhost:3000', onde está rexistrado o porto da API de NodeJS. A parte do cliente está lista. Agora todas as solicitudes do cliente á parte traseira van a este URL.

API do servidor NodeJS

No cartafol /server crear servidor.js e Dockerfile:

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

В servidor.js indicado url para base de datos const url = 'mongodb://mongo:27017/';. Permitir solicitudes entre dominios do cliente:

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));
  });

Conclusión

Agora imos ao directorio do proxecto e executemos docker-compose build para a construción de imaxes e docker-compose up para executar contedores. O equipo levantará 3 contedores: servidor, cliente, mongo. Para un servidor NodeJS, pode configurar a recarga en quente ligándoo ao cartafol do usuario. E o cliente en desenvolvemento debería lanzarse localmente con recarga en quente, funcionando por separado servidor и mongo. Para iniciar un servizo separado, só tes que especificar o seu nome docker-compose up client. Non esquezas facelo ás veces prune e eliminando contedores, redes e imaxes para liberar recursos.

Podes ver o código completo aquí. O proxecto aínda está en desenvolvemento.

Fonte: www.habr.com