Mar a phacaicheas tu tagradh VueJS + NodeJS + MongoDB ann an Docker

Mar a phacaicheas tu tagradh VueJS + NodeJS + MongoDB ann an Docker
Mar a thuigeas tu bhon artaigil roimhe, bha mi ag obair air diofar phròiseactan. Mar as trice bidh a ’chiad làithean ann an sgioba ùr a’ dol san aon dòigh: bidh an backender a ’suidhe sìos còmhla rium agus a’ dèanamh gnìomhan draoidheil gus an tagradh a chuir a-steach agus a chleachdadh. Tha Docker riatanach dha luchd-leasachaidh aghaidh oir tha ... Bidh an backend gu tric air a sgrìobhadh ann an raon farsaing de chruachan PHP / Java / Python / C #, agus chan fheum an aghaidh aire a thoirt don backend a h-uile uair gus a h-uile càil a chuir a-steach agus a chleachdadh. Is ann dìreach ann an aon àite a chunnaic mi measgachadh Docker-Jenkins le cleachdadh follaiseach, logaichean, agus deuchainnean fèin-ghluasadach.

Chaidh mòran artaigilean mionaideach a sgrìobhadh mu Docker. Bruidhnidh an artaigil seo mu bhith a ’cleachdadh Iarrtas Duilleag Singilte a’ cleachdadh VueJS / Vue Router, tha am pàirt frithealaiche ann an cruth API RESTful le NodeJS, agus tha MongoDB air a chleachdadh mar stòr-dàta. Tha Docker Compose air a chleachdadh gus grunn thagraidhean container a mhìneachadh agus a ruith.

Carson a tha feum agad air Docker?

Leigidh Docker leat am pròiseas airson tagradh a chuir a-steach gu fèin-ghluasadach. Chan fheum an leasaiche tuilleadh prògraman a chuir a-steach leis fhèin no dèiligeadh ri neo-fhreagarrachd dreach air an inneal aige. Chan eil agad ach a bhith a’ stàladh Docker agus a’ sgrìobhadh òrdughan 1-2 a-steach don consol. Tha an dòigh as freagarraiche airson seo a dhèanamh air Linux.

A 'tòiseachadh

Stàlaich Docker agus Sgrìobhadh docker

Structar pasgan

Bidh sinn a’ cruthachadh 2 phasgan airson tagraidhean teachdaiche is frithealaiche. Tha faidhle leis an leudachadh .yml na config Companaidh Docker, far a bheil soithichean tagraidh air am mìneachadh agus co-cheangailte riutha.
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

Bidh sinn a’ cruthachadh 3 seirbheisean ann an Docker: airson NodeJS, MongoDB agus airson feadhainn statach ann an Vue. Air a chur ris gus cliant a cheangal ris an fhrithealaiche an urra ris an fhrithealaiche. Gus MongoDB a cheangal ri API an fhrithealaiche, cleachd ceanglaichean mongo. Server, neach-dèiligidh, mongo - ainmean sheirbheisean.

Cliant VueJS

Anns a ’phasgan / neach-dèiligidh Tha an tagradh stèidhichte air VueJS. Chaidh an tagradh a chruthachadh a’ cleachdadh Vue Cli. Nuair a bhios tu a’ togail ìomhaigh, tha an tagradh teachdaiche air a chuir a-steach do sheata de fhaidhlichean statach sa phasgan /dist. Tha an Dockerfile a’ toirt cunntas air seata òrdughan airson ìomhaigh a thogail:

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

Thoir an aire gu bheil pack.json air a chopaigeadh agus air a chuir a-steach air leth bhon chòrr de na faidhlichean pròiseict. Tha seo air a dhèanamh airson adhbharan dèanadais gus am bi susbaint a’ phasgan /node_modules air a thasgadh nuair a thèid a thogail a-rithist. Tha gach loidhne-àithne air a thasgadh fa leth.

Mu dheireadh, nuair a thòisicheas an soitheach, thèid an àithne a chuir gu bàs npm run dev. Tha an àithne seo air a mhìneachadh ann am package.json:


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

Gus faidhlichean a ruith o phasgan /dist, air a chuir a-steach air feadh na cruinne http-server, agus ann an dev-eisimeileachd a 'phacaid spa-http-servergus am bi Vue Router ag obair gu ceart. Bidh bratach --push-state ag ath-stiùireadh gu index.html. Chaidh a’ bhratach -c le luach 1 diog a chur ris http-fhrithealaiche cha do thaisg e na sgriobtaichean. Is e seo eisimpleir deuchainn; air pròiseact fìor tha e nas fheàrr nginx a chleachdadh.

Ann an stòr Vuex bidh sinn a’ cruthachadh raon apiHost: 'http://localhost:3000', far a bheil port NodeJS Api clàraichte. Tha pàirt an neach-dèiligidh deiseil. A-nis thèid a h-uile iarrtas bhon neach-dèiligidh chun chùl chun an url seo.

API frithealaiche NodeJS

Anns a ’phasgan /server cruthaich frithealaiche.js agus Dockerfile:


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

В frithealaiche.js air a chomharrachadh url airson stòr-dàta const url = 'mongodb://mongo:27017/';. A’ ceadachadh iarrtasan tar-àrainn bhon neach-dèiligidh:


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

co-dhùnadh

A-nis rachamaid gu eòlaire a 'phròiseict agus ruith sinn docker-compose build airson dealbhan a thogail agus docker-compose up gus soithichean a ruith. Togaidh an sgioba 3 soithichean: frithealaiche, neach-dèiligidh, mongo. Airson frithealaiche NodeJS, faodaidh tu ath-luchdachadh teth a rèiteachadh le bhith ga cheangal ri pasgan an neach-cleachdaidh. Agus bu chòir an neach-dèiligidh fo leasachadh a chuir air bhog gu h-ionadail le ath-luchdachadh teth, a ’ruith air leth frithealaiche и mongo. Gus seirbheis air leth a thòiseachadh, dìreach sònraich a h-ainm docker-compose up client. Na dìochuimhnich a dhèanamh uaireannan prune agus cuir às do shoithichean, lìonraidhean, agus ìomhaighean gus goireasan a shaoradh.

Chì thu an còd slàn an seo. Tha am pròiseact fhathast ga leasachadh.

Source: www.habr.com

Cuir beachd ann