🥇 Bii o ṣe le ṣe akopọ VueJS + NodeJS + ohun elo MongoDB ni Docker

Bi o ṣe le loye lati nkan ti tẹlẹ, Mo ṣiṣẹ lori awọn iṣẹ akanṣe oriṣiriṣi. Awọn ọjọ akọkọ ni ẹgbẹ tuntun nigbagbogbo n lọ ni ọna kanna: alagbẹhin joko pẹlu mi o ṣe awọn iṣe idan lati fi sori ẹrọ ati mu ohun elo naa ṣiṣẹ. Docker jẹ pataki fun awọn olupilẹṣẹ iwaju-ipari nitori… Afẹyinti nigbagbogbo ni kikọ ni ọpọlọpọ awọn akopọ PHP/Java/Python/C #, ati pe iwaju ko ni lati ṣe idiwọ ẹhin ni gbogbo igba lati fi sori ẹrọ ati mu ohun gbogbo lọ. Ni aaye kan nikan ni Mo rii apapo Docker-Jenkins pẹlu imuṣiṣẹ ti o han gbangba, awọn akọọlẹ, ati awọn idanwo adaṣe.

Ọpọlọpọ awọn nkan alaye ni a ti kọ nipa Docker. Nkan yii yoo sọrọ nipa gbigbe Ohun elo Oju-iwe Kanṣoṣo nipa lilo VueJS/Vue Router, apakan olupin wa ni irisi API RESTful pẹlu NodeJS, ati pe MongoDB lo bi data data. Docker Compose ni a lo lati ṣalaye ati ṣiṣe awọn ohun elo eiyan pupọ.

Kini idi ti Docker nilo

Докер позволяет автоматизировать процесс разворачивания приложения. Разработчику больше не нужно самостоятельно устанавливать программы, бороться с несовместимостью версий на своей машине. Достаточно установить Докер и вбить 1-2 команды в консоль. Удобнее всего делать это на Linux.

Bibẹrẹ

Fi sori ẹrọ Docker ati Docker kọ

Ilana folda

A ṣẹda awọn folda 2 fun alabara ati awọn ohun elo olupin. Faili kan pẹlu itẹsiwaju .yml jẹ atunto kan Docker Ṣawewe, nibiti awọn apoti ohun elo ti ṣalaye ati ni nkan ṣe.
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

A ṣẹda awọn iṣẹ 3 ni Docker: fun NodeJS, MongoDB ati fun awọn ti o duro ni Vue. Ṣe afikun lati so onibara pọ mọ olupin da lori olupin. Lati so MongoDB pọ pẹlu olupin API, lo ìjápọ mongo. Olupin, alabara, mongo - awọn orukọ ti awọn iṣẹ.

VueJS onibara

Ninu folda / onibara Ohun elo naa da lori VueJS. Ohun elo naa ni a ṣẹda nipa lilo Vue Cli. Nigbati o ba n kọ aworan kan, ohun elo alabara jẹ itumọ ti awọn faili aimi ninu folda /dist. Dockerfile ṣapejuwe ṣeto awọn aṣẹ fun kikọ aworan kan:

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

Jọwọ ṣe akiyesi pe package.json ti daakọ ati fi sori ẹrọ lọtọ lati iyoku awọn faili iṣẹ akanṣe. Eyi ni a ṣe fun iṣẹ ṣiṣe, ki awọn akoonu inu folda / node_modules ti wa ni ipamọ nigbati o ba kọ lẹẹkansi. Laini aṣẹ kọọkan ti wa ni ipamọ lọtọ.

Nikẹhin, nigbati eiyan naa ba bẹrẹ, aṣẹ naa ti ṣiṣẹ npm run dev. Aṣẹ yii jẹ apejuwe ninu package.json:


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

Lati mu awọn faili ṣiṣẹ lati folda kan /dist, fi sori ẹrọ agbaye http-server, ati ni dev-dependencies awọn package spa-http-serverki Vue olulana ṣiṣẹ bi o ti tọ. Asia --push-state tun darí si index.html. Asia -c pẹlu iye kan ti iṣẹju 1 ni a ṣafikun si http-olupin ko kaṣe awọn iwe afọwọkọ. Eyi jẹ apẹẹrẹ idanwo; lori iṣẹ akanṣe gidi o dara lati lo nginx.

Ninu itaja Vuex a ṣẹda aaye kan apiHost: 'http://localhost:3000', nibiti a ti forukọsilẹ ibudo NodeJS Api. Apa onibara ti šetan. Bayi gbogbo awọn ibeere lati ọdọ alabara si ẹhin lọ si url yii.

API olupin NodeJS

Ninu folda /server ṣẹda olupin.js ati Dockerfile:


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

В olupin.js itọkasi url fun database const url = 'mongodb://mongo:27017/';. Gbigba awọn ibeere agbegbe-agbelebu lati ọdọ alabara:


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

ipari

Bayi jẹ ki ká lọ si ise agbese liana ati ṣiṣe awọn docker-compose build fun a Kọ images ati docker-compose up lati ṣiṣe awọn apoti. Ẹgbẹ naa yoo gbe awọn apoti 3: olupin, klient, mongo. Fun olupin NodeJS, o le tunto atungbejade gbona nipasẹ sisopọ si folda olumulo. Ati pe alabara ti o wa labẹ idagbasoke yẹ ki o ṣe ifilọlẹ ni agbegbe pẹlu atunbere gbona, nṣiṣẹ lọtọ server и mongo. Lati bẹrẹ iṣẹ lọtọ, kan pato orukọ rẹ docker-compose up client. Maṣe gbagbe lati ṣe nigba miiran prune ati piparẹ awọn apoti, awọn nẹtiwọki, ati awọn aworan lati tu awọn orisun laaye.

O le wo koodu kikun nibi. Ise agbese na tun wa labẹ idagbasoke.

orisun: www.habr.com