Como compactar o aplicativo VueJS + NodeJS + MongoDB no Docker

Como você pode ver no artigo anterior, trabalhei com diferentes projetos. Os primeiros dias em uma nova equipe geralmente acontecem da mesma maneira: o back-end é para mim e executa ações mágicas para instalar e implantar o aplicativo. O Docker é indispensável para o front-end, pois o back-end geralmente é escrito em uma grande variedade de pilhas PHP / Java / Python / C # e a frente não precisa distrair o back-end toda vez para instalar e implantar tudo. Somente em um lugar vi um monte de Docker-Jenkins com uma implantação transparente, logs, danificados por autoteste.

Sobre estivador escrito muitos artigos detalhados. Este artigo discutirá a implantação do Aplicativo de Página Única usando o VueJS / Vue Router, a parte do servidor como uma API RESTful com NodeJS e o MongoDB é usado como banco de dados. O Docker Compose é usado para descrever e executar vários aplicativos de contêiner.

Por que preciso de uma janela de encaixe

Docker permite automatizar o processo de implantação de aplicativos. O desenvolvedor não precisa mais instalar programas por conta própria, para lidar com a incompatibilidade de versões em sua máquina. É suficiente instalar o Docker e direcionar 1-2 equipes para o console. A maneira mais conveniente de fazer isso no Linux.

Introdução

Instalar o Docker e o Docker componham

Estrutura de pastas

Criamos 2 pastas para aplicativos cliente e servidor. Um arquivo com a extensão .yml é uma configuração do Docker Compose em que os contêineres do aplicativo são definidos e vinculados.
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 três serviços no docker: para NodeJS, MongoDB e para estática no Vue. Para conectar o cliente ao servidor, depende do servidor ser adicionado. O mongo de links é usado para vincular o MongoDB à API do servidor. Nomes de servidor, cliente, mongo - serviço.

Cliente no VueJS

A pasta / client contém o aplicativo no VueJS. Aplicativo criado usando o Vue Cli . Ao criar a imagem, o aplicativo cliente cria um conjunto de arquivos estáticos na pasta / dist . O Dockerfile descreve um conjunto de comandos para criar 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 o package.json é copiado e instalado separadamente do restante dos arquivos do projeto. Isso é feito para desempenho, para que o conteúdo da pasta / node_modules seja armazenado em cache durante a reconstrução. Cada linha de comando é armazenada em cache separadamente.

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

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

Para executar arquivos da pasta / dist , o http-server instalado globalmente e o pacote spa-http-server é configurado nas dependências de dev, para que o Vue Router funcione corretamente. O sinalizador –push-state redireciona para index.html. O sinalizador -c com um valor de 1 segundo é adicionado para que o servidor http não armazene em cache scripts. Este é um caso de teste para o projeto real é melhor usar nginx.

Na loja Vuex, crie o campo apiHost: 'http://localhost:3000' , em que a porta NodeJS Api está registrada. A parte do cliente está pronta. Agora todas as solicitações do cliente para trás vão para este URL.

API do servidor NodeJS

Na pasta /server , crie server.js e Dockerfile:

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

Server.js especifica o URL para o banco de dados const url = 'mongodb://mongo:27017/'; . Permitimos 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)); }); -Origin', clientUrl); 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 vá para o diretório do projeto e execute o docker-compose build imagens e o docker-compose up para iniciar os contêineres. O comando irá gerar 3 contêineres: servidor, cliente, mongo . Para um servidor no NodeJS, você pode configurar o hot-reload associando-o à pasta do usuário. E o cliente está em desenvolvimento para rodar localmente com recarga a quente, rodando separadamente servidor e mongo . Para iniciar um serviço separado, basta especificar seu nome docker-compose up client . Lembre-se de às vezes remover e excluir contêineres, redes e imagens para liberar recursos.

O código completo pode ser encontrado aqui . O projeto ainda está em desenvolvimento.