Cómo empaquetar la aplicación VueJS + NodeJS + MongoDB en Docker

Como puedes ver en el artículo anterior, trabajé con diferentes proyectos. Los primeros días en un equipo nuevo suelen ser iguales: el backender se sienta conmigo y realiza los pasos mágicos para instalar y desplegar la aplicación. Docker es indispensable para los desarrolladores front-end, porque. El backend a menudo se escribe en una amplia gama de pilas de PHP/Java/Python/C# y el frente no necesita distraer la parte posterior cada vez que instala e implementa todo. Solo en un lugar vi un montón de Docker-Jenkins con una implementación transparente, registros, atornillados con autopruebas.

Se han escrito muchos artículos detallados sobre docker. Este artículo se centrará en la implementación de una aplicación de una sola página utilizando VueJS/Vue Router, la parte del servidor en forma de API RESTful con NodeJS y MongoDB como base de datos. Docker Compose se utiliza para describir y ejecutar múltiples aplicaciones de contenedores.

Por qué necesitas Docker

Docker le permite automatizar el proceso de implementación de una aplicación. El desarrollador ya no necesita instalar programas por su cuenta, lidiar con la incompatibilidad de versiones en su máquina. Basta con instalar Docker y escribir 1-2 comandos en la consola. Es más conveniente hacer esto en Linux.

Cómo comenzar

Establecer Docker y Docker compone

Estructura de carpetas

Creamos 2 carpetas para aplicaciones cliente y servidor. Un archivo con la extensión .yml es una configuración Docker Composedonde se definen y vinculan los contenedores de la aplicación.
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 servicios en docker: para NodeJS, MongoDB y para statics en Vue. Para conectar el cliente al servidor agregado depende del servidor. Para vincular MongoDB con la API del servidor, utilice enlaces mongo. Servidor, cliente, mongo son los nombres de los servicios.

Cliente VueJS

En carpeta /cliente la aplicación se encuentra en VueJS. Aplicación creada con vista cli. Al crear una imagen, la aplicación cliente se integra en un conjunto de archivos estáticos en una carpeta / dist. El Dockerfile describe un conjunto de comandos para construir una imagen:

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

Tenga en cuenta que package.json se copia e instala por separado del resto de los archivos del proyecto. Esto se hace por motivos de rendimiento, de modo que el contenido de la carpeta /node_modules se almacene en caché durante la reconstrucción. Cada línea de comando se almacena en caché por separado.

Al final, cuando se inicia el contenedor, se ejecuta el comando npm run dev. Este comando se describe en package.json:

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

Para ejecutar archivos desde una carpeta / dist, conjunto global http-server, y en el paquete de dependencias de desarrollo spa-http-serverpara que Vue Router funcione correctamente. El indicador --push-state redirige a index.html. El indicador -c con un valor de 1 segundo se ha agregado a servidor http no guardó en caché los scripts. Este es un ejemplo de prueba, en un proyecto real es mejor usar nginx.

Crear un campo en la tienda Vuex apiHost: 'http://localhost:3000', donde se escribe el puerto NodeJS Api. La parte del cliente está lista. Ahora todas las solicitudes del cliente al back-end van a esta URL.

API del servidor NodeJS

En carpeta /server crear servidor.js y Dockerfile:

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

В servidor.js esta indicado url para base de datos const url = 'mongodb://mongo:27017/';. Permitimos solicitudes entre dominios del 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

Ahora ve al directorio del proyecto y ejecuta docker-compose build para imágenes y docker-compose up para ejecutar contenedores. El comando levantará 3 contenedores: servidor, cliente, mongo. Para un servidor NodeJS, puede configurar la recarga en caliente vinculándolo a la carpeta del usuario. Y el cliente está en desarrollo para ejecutarse localmente con recarga en caliente, ejecutándose por separado servidor и mongo. Para iniciar un servicio separado, simplemente especifique su nombre docker-compose up client. No olvides hacerlo de vez en cuando. prune y eliminación de contenedores (contenedores), redes (redes) e imágenes (imágenes) para liberar recursos.

Puedes ver el código completo aquí. El proyecto aún está en desarrollo.

Fuente: habr.com