Kiel paki VueJS + NodeJS + MongoDB-aplikaĵon en Docker

Kiel vi povas vidi el la antaŭa artikolo, mi laboris kun malsamaj projektoj. La unuaj tagoj en nova teamo kutime iras la saman vojon: la subtenanto sidiĝas al mi kaj plenumas la magiajn paŝojn por instali kaj deploji la aplikaĵon. Docker estas nemalhavebla por antaŭfinaj programistoj, ĉar. La backend ofte estas skribita en ampleksa gamo de PHP/Java/Python/C# stakoj kaj la fronto ne bezonas distri la malantaŭon ĉiufoje por instali kaj deploji ĉion. Nur en unu loko mi vidis aron da Docker-Jenkins kun travidebla deplojo, ŝtipoj, ŝraŭbitaj per aŭtotestoj.

Multaj detalaj artikoloj estis skribitaj pri docker. Ĉi tiu artikolo fokusiĝos pri deplojado de Unupaĝa Apliko per VueJS / Vue Router, la servila parto en formo de RESTful API kun NodeJS, kaj MongoDB estas uzata kiel datumbazo. Docker Compose estas uzata por priskribi kaj ruli plurajn ujajn aplikaĵojn.

Kial vi bezonas Docker

Docker permesas vin aŭtomatigi la procezon de deplojado de aplikaĵo. La programisto ne plu bezonas instali programojn memstare, trakti version nekongruon sur sia maŝino. Sufiĉas instali Docker kaj tajpi 1-2 komandojn en la konzolon. Estas plej oportune fari tion en Linukso.

Komencante

Instali Docker kaj Docker kunmeti

Dosierujo strukturo

Ni kreas 2 dosierujojn por klientaj kaj servilaj aplikaĵoj. Dosiero kun la etendo .yml estas agordo Docker Komponikie la aplikaj ujoj estas difinitaj kaj ligitaj.
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

Ni kreas 3 servojn en docker: por NodeJS, MongoDB kaj por statiko ĉe Vue. Por konekti klienton al servilo aldonita dependas de servilo. Por ligi MongoDB kun la servila API, uzu ligoj mongo. Servilo, kliento, mongo estas la nomoj de la servoj.

VueJS-kliento

En la dosierujo /kliento la aplikaĵo troviĝas sur VueJS. Apliko kreita kun vue cli. Dum konstruo de bildo, la klienta aplikaĵo estas enkonstruita en aron de senmovaj dosieroj en dosierujo /dist. La Dockerfile priskribas aron da komandoj por konstrui bildon:

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

Notu, ke package.json estas kopiita kaj instalita aparte de la ceteraj projektdosieroj. Ĉi tio estas farita por agado, por ke la enhavo de la dosierujo /node_modules estu konservita en kaŝmemoro dum rekonstruo. Ĉiu komandlinio estas konservita aparte.

Ĉe la fino, kiam la ujo estas komencita, la komando estas efektivigita npm run dev. Ĉi tiu komando estas priskribita en package.json:

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

Por ruli dosierojn el dosierujo /dist, tutmonde fiksita http-server, kaj en dev-dependencies-pakaĵo spa-http-serverpor ke Vue Router funkciu ĝuste. La flago --push-state alidirektas al index.html. La flago -c kun valoro de 1 sekundo estis aldonita al http-servilo ne kaŝmemoris skriptojn. Ĉi tio estas prova ekzemplo, en reala projekto estas pli bone uzi nginx.

Kreu kampon en la vendejo Vuex apiHost: 'http://localhost:3000', kie la haveno NodeJS Api estas skribita. La klienta parto estas preta. Nun ĉiuj petoj de la kliento ĝis la malantaŭo iras al ĉi tiu url.

NodeJS Server API

En la dosierujo /server krei server.js kaj Dockerfile:

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

В server.js indikita url por datumbazo const url = 'mongodb://mongo:27017/';. Ni permesas transdomajnajn petojn de la kliento:

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

konkludo

Nun iru al la projekta dosierujo kaj rulu docker-compose build por bildigo kaj docker-compose up ruli ujojn. La komando levos 3 ujojn: servilo, kliento, mongo. Por NodeJS-servilo, vi povas agordi varman reŝargon ligante ĝin al la uzanta dosierujo. Kaj la kliento estas evoluinta por funkcii loke kun varma reŝargi, funkciante aparte servilo и Mongo. Por komenci apartan servon, simple specifu ĝian nomon docker-compose up client. Ne forgesu fari ĝin foje prune kaj forigo de ujoj (ujoj), retoj (retoj) kaj bildoj (bildoj) por liberigi rimedojn.

Vi povas vidi la plenan kodon tie. La projekto estas ankoraŭ evoluanta.

fonto: www.habr.com