Hvernig á að pakka VueJS + NodeJS + MongoDB forriti í Docker

Eins og þú getur skilið af fyrri grein vann ég að mismunandi verkefnum. Fyrstu dagarnir í nýju teymi fara venjulega á sama veg: bakþjónninn sest niður með mér og framkvæmir töfrandi aðgerðir til að setja upp og dreifa forritinu. Docker er ómissandi fyrir framenda forritara vegna þess að... Bakendinn er oft skrifaður í margs konar PHP/Java/Python/C# stafla og framhliðin þarf ekki að afvegaleiða bakendann í hvert skipti til að setja upp og dreifa öllu. Aðeins á einum stað sá ég Docker-Jenkins samsetningu með gagnsæri uppsetningu, annálum og sjálfvirkum prófum.

Margar ítarlegar greinar hafa verið skrifaðar um Docker. Þessi grein mun tala um að setja upp einn síðu forrit með VueJS/Vue Router, miðlarahlutinn er í formi RESTful API með NodeJS og MongoDB er notað sem gagnagrunnur. Docker Compose er notað til að skilgreina og keyra mörg gámaforrit.

Hvers vegna þarf Docker

Docker gerir þér kleift að gera sjálfvirkan ferlið við að dreifa forriti. Framkvæmdaraðilinn þarf ekki lengur að setja upp forrit á eigin spýtur eða takast á við útgáfuósamrýmanleika á vélinni sinni. Allt sem þú þarft að gera er að setja upp Docker og slá inn 1-2 skipanir í stjórnborðið. Þægilegasta leiðin til að gera þetta er á Linux.

Hafist handa

Setja upp Docker og Docker semja

Uppbygging möppu

Við búum til 2 möppur fyrir biðlara og netþjónaforrit. Skrá með .yml endingunni er config Docker Compose, þar sem forritagámar eru skilgreindir og tengdir.
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

Við búum til 3 þjónustur í Docker: fyrir NodeJS, MongoDB og fyrir kyrrstæðar í Vue. Bætt við til að tengja biðlara við netþjón fer eftir server. Til að tengja MongoDB við API netþjónsins, notaðu tenglar mongo. Server, viðskiptavinur, mongo - nöfn þjónustu.

VueJS viðskiptavinur

Í möppu /viðskiptavinur Umsóknin er byggð á VueJS. Forritið var búið til með því að nota Vue Cli. Þegar mynd er byggð er biðlaraforritið innbyggt í sett af kyrrstæðum skrám í möppunni /fjarlægð. Dockerfile lýsir setti skipana til að búa til mynd:

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

Vinsamlegast athugaðu að package.json er afritað og sett upp aðskilið frá öðrum verkefnisskrám. Þetta er gert fyrir frammistöðu, þannig að innihald /node_modules möppunnar er í skyndiminni þegar byggt er aftur. Hver skipanalína er í skyndiminni fyrir sig.

Að lokum, þegar ílátið byrjar, er skipunin keyrð npm run dev. Þessari skipun er lýst í package.json:

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

Til að keyra skrár úr möppu /fjarlægð, sett upp á heimsvísu http-server, og í dev-dependenties pakkanum spa-http-serversvo að Vue Router virki rétt. --push-state fáninn vísar á index.html. -c fánanum með gildið 1 sekúndu var bætt við http-þjónn geymdi ekki forskriftir í skyndiminni. Þetta er prófdæmi; í alvöru verkefni er betra að nota nginx.

Í Vuex verslun búum við til reit apiHost: 'http://localhost:3000', þar sem NodeJS Api höfnin er skráð. Viðskiptavinahlutinn er tilbúinn. Nú fara allar beiðnir frá viðskiptavininum til baka á þessa slóð.

Forritaskil NodeJS miðlara

Í möppu /server búa til server.js og Dockerfile:

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

В server.js gefið til kynna url fyrir gagnagrunn const url = 'mongodb://mongo:27017/';. Leyfa beiðnir milli léna frá viðskiptavini:

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

Ályktun

Nú skulum við fara í verkefnaskrána og keyra docker-compose build til að smíða myndir og docker-compose up að keyra gáma. Liðið mun lyfta 3 gámum: þjónn, viðskiptavinur, mongo. Fyrir NodeJS netþjón geturðu stillt heita endurhleðslu með því að tengja hann við notendamöppuna. Og viðskiptavinurinn sem er í þróun ætti að vera ræstur á staðnum með heitri endurhleðslu, í gangi sérstaklega miðlara и Mongó. Til að hefja sérstaka þjónustu skaltu bara tilgreina nafn hennar docker-compose up client. Ekki gleyma að gera það stundum prune og eyða ílátum, netkerfum og myndum til að losa um auðlindir.

Þú getur séð allan kóðann hér. Verkefnið er enn í þróun.

Heimild: www.habr.com