Com empaquetar l'aplicació VueJS + NodeJS + MongoDB a Docker

Com podeu veure a l'article anterior, he treballat amb diferents projectes. Els primers dies en un nou equip solen anar de la mateixa manera: el backender s'asseu a mi i fa els passos màgics per instal·lar i desplegar l'aplicació. Docker és indispensable per als desenvolupadors front-end, perquè. El backend sovint s'escriu en una àmplia gamma de piles PHP/Java/Python/C# i la part frontal no necessita distreure la part posterior cada vegada per instal·lar i desplegar-ho tot. Només en un lloc vaig veure un munt de Docker-Jenkins amb un desplegament transparent, registres, cargolats amb autotests.

S'han escrit molts articles detallats sobre Docker. Aquest article se centrarà a desplegar una aplicació de pàgina única mitjançant VueJS / Vue Router, la part del servidor en forma d'API RESTful amb NodeJS i MongoDB s'utilitza com a base de dades. Docker Compose s'utilitza per descriure i executar diverses aplicacions de contenidors.

Per què necessiteu Docker

Docker us permet automatitzar el procés de desplegament d'una aplicació. El desenvolupador ja no necessita instal·lar programes pel seu compte, fer front a la incompatibilitat de versions a la seva màquina. N'hi ha prou amb instal·lar Docker i escriure ordres 1-2 a la consola. El més convenient és fer-ho a Linux.

Getting started

Establir estibador i Composició de Docker

Estructura de carpetes

Creem 2 carpetes per a aplicacions client i servidor. Un fitxer amb l'extensió .yml és una configuració Docker Composeon es defineixen i enllaçen els contenidors de l'aplicació.
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

Creem 3 serveis a docker: per a NodeJS, MongoDB i per a estàtica a Vue. S'ha afegit per connectar el client al servidor depèn del servidor. Per enllaçar MongoDB amb l'API del servidor, utilitzeu enllaços mongo. Servidor, client, mongo són els noms dels serveis.

Client VueJS

A la carpeta /client l'aplicació es troba a VueJS. Aplicació creada amb vista cli. Quan es construeix una imatge, l'aplicació client s'integra en un conjunt de fitxers estàtics en una carpeta /dist. El Dockerfile descriu un conjunt d'ordres per crear una imatge:

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

Tingueu en compte que package.json es copia i s'instal·la per separat de la resta de fitxers del projecte. Això es fa per al rendiment de manera que el contingut de la carpeta /node_modules s'emmagatzemi a la memòria cau durant la reconstrucció. Cada línia d'ordres s'emmagatzema a la memòria cau per separat.

Al final, quan s'inicia el contenidor, s'executa l'ordre npm run dev. Aquesta ordre es descriu a package.json:

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

Per executar fitxers des d'una carpeta /dist, establert globalment http-server, i al paquet de dependències de desenvolupament spa-http-serverperquè Vue Router funcioni correctament. El senyalador --push-state redirigeix ​​a index.html. S'ha afegit el senyalador -c amb un valor d'1 segon servidor http no guardava els scripts a la memòria cau. Aquest és un exemple de prova, en un projecte real és millor utilitzar nginx.

Creeu un camp a la botiga Vuex apiHost: 'http://localhost:3000', on s'escriu el port de l'API NodeJS. La part del client està preparada. Ara totes les sol·licituds del client al back-end van a aquesta URL.

API del servidor NodeJS

A la carpeta /server crear server.js i Dockerfile:

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

В server.js indicat url per a la base de dades const url = 'mongodb://mongo:27017/';. Permetem sol·licituds entre dominis del 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));
  });

Conclusió

Ara aneu al directori del projecte i executeu-lo docker-compose build per a la imatge i docker-compose up per fer funcionar contenidors. L'ordre aixecarà 3 contenidors: servidor, client, mongo. Per a un servidor NodeJS, podeu configurar la recàrrega en calent enllaçant-lo a la carpeta d'usuari. I el client està en desenvolupament per executar-se localment amb recàrrega en calent, s'executa per separat servidor и mongo. Per iniciar un servei independent, només cal que especifiqueu el seu nom docker-compose up client. No t'oblidis de fer-ho de vegades prune i eliminació de contenidors (contenidors), xarxes (xarxes) i imatges (imatges) per alliberar recursos.

Podeu veure el codi complet aquí. El projecte encara està en desenvolupament.

Font: www.habr.com