Como empacotar o aplicativo VueJS + NodeJS + MongoDB no Docker

Como você pode entender no artigo anterior, trabalhei em diversos projetos. Os primeiros dias em uma nova equipe geralmente acontecem da mesma forma: o backender senta comigo e realiza ações mágicas para instalar e implantar o aplicativo. Docker é indispensável para desenvolvedores front-end porque... O back-end geralmente é escrito em uma ampla variedade de pilhas PHP/Java/Python/C#, e o front-end não precisa distrair o back-end todas as vezes para instalar e implantar tudo. Apenas em um lugar vi uma combinação Docker-Jenkins com implantação transparente, logs e testes automatizados.

Muitos artigos detalhados foram escritos sobre o Docker. Este artigo falará sobre a implantação de um aplicativo de página única usando VueJS/Vue Router, a parte do servidor está na forma de uma API RESTful com NodeJS e o MongoDB é usado como banco de dados. Docker Compose é usado para definir e executar vários aplicativos de contêiner.

Por que o Docker é necessário

Docker permite automatizar o processo de implantação de um aplicativo. O desenvolvedor não precisa mais instalar programas por conta própria ou lidar com incompatibilidade de versões em sua máquina. Tudo que você precisa fazer é instalar o Docker e digitar 1-2 comandos no console. A maneira mais conveniente de fazer isso é no Linux.

Iniciar

Conjunto Estivador e Composição do Docker

Estrutura de pastas

Criamos 2 pastas para aplicativos cliente e servidor. Um arquivo com extensão .yml é uma configuração Docker Compose, onde os contêineres de aplicativos são definidos e associados.
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

Criamos 3 serviços em Docker: para NodeJS, MongoDB e para estáticos em Vue. Adicionado para conectar o cliente ao servidor depende do servidor. Para vincular o MongoDB à API do servidor, use links mongo. Servidor, cliente, mongo - nomes de serviços.

Cliente VueJS

Na pasta /cliente O aplicativo é baseado em VueJS. O aplicativo foi criado usando Vue Cli. Ao construir uma imagem, o aplicativo cliente é integrado a um conjunto de arquivos estáticos na pasta / dist. O Dockerfile descreve um conjunto de comandos para construir uma imagem:

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

Observe que package.json é copiado e instalado separadamente do restante dos arquivos do projeto. Isso é feito para fins de desempenho, para que o conteúdo da pasta /node_modules seja armazenado em cache durante a construção novamente. Cada linha de comando é armazenada em cache separadamente.

Finalmente, quando o contêiner é iniciado, o comando é executado npm run dev. Este comando é descrito em package.json:

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

Para executar arquivos de uma pasta / dist, instalado globalmente http-server, e nas dependências de desenvolvimento o pacote spa-http-serverpara que o Vue Router funcione corretamente. O sinalizador --push-state redireciona para index.html. O sinalizador -c com valor de 1 segundo foi adicionado a http-server não armazenou scripts em cache. Este é um exemplo de teste; em um projeto real é melhor usar o nginx.

Na loja Vuex criamos um campo apiHost: 'http://localhost:3000', onde a porta NodeJS Api está registrada. A parte do cliente está pronta. Agora todas as solicitações do cliente vão para esta url.

API do servidor NodeJS

Na pasta /server criar 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 banco de dados const url = 'mongodb://mongo:27017/';. Permitindo solicitações entre domínios 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));
  });

Conclusão

Agora vamos para o diretório do projeto e executar docker-compose build para construir imagens e docker-compose up para executar contêineres. A equipe levantará 3 contêineres: servidor, cliente, mongo. Para um servidor NodeJS, você pode configurar o hot-reload vinculando-o à pasta do usuário. E o cliente em desenvolvimento deverá ser lançado localmente com hot reload, rodando separadamente servidor и mongo. Para iniciar um serviço separado, basta especificar seu nome docker-compose up client. Não se esqueça de fazer isso às vezes prune e exclusão de contêineres, redes e imagens para liberar recursos.

Você pode ver o código completo aqui. O projeto ainda está em desenvolvimento.

Fonte: habr.com