ProHoster > blog > Utawala > Jinsi ya kufunga programu ya VueJS + NodeJS + MongoDB kwenye Docker

Jinsi ya kufunga programu ya VueJS + NodeJS + MongoDB kwenye Docker

Jinsi ya kufunga programu ya VueJS + NodeJS + MongoDB kwenye Docker
Kama unavyoweza kuelewa kutoka kwa nakala iliyotangulia, nilifanya kazi kwenye miradi tofauti. Siku za kwanza katika timu mpya kwa kawaida huenda vivyo hivyo: msaidizi huketi nami na kufanya vitendo vya kichawi kusakinisha na kupeleka programu. Docker ni muhimu kwa watengenezaji wa mbele kwa sababu... Nyuma mara nyingi huandikwa katika safu mbalimbali za PHP/Java/Python/C#, na sehemu ya mbele si lazima ivuruge mazingira ya nyuma kila wakati ili kusakinisha na kupeleka kila kitu. Ni katika sehemu moja pekee ambapo niliona mchanganyiko wa Docker-Jenkins na uwekaji wazi, kumbukumbu na majaribio ya kiotomatiki.

Nakala nyingi za kina zimeandikwa kuhusu Docker. Nakala hii itazungumza juu ya kupeleka Programu ya Ukurasa Mmoja kwa kutumia VueJS/Vue Router, sehemu ya seva iko katika mfumo wa RESTful API na NodeJS, na MongoDB inatumika kama hifadhidata. Docker Compose hutumiwa kufafanua na kuendesha programu nyingi za kontena.

Kwa nini Docker inahitajika

Docker hukuruhusu kubinafsisha mchakato wa kupeleka programu. Msanidi hahitaji tena kusakinisha programu peke yake au kukabiliana na kutopatana kwa toleo kwenye mashine yake. Unachohitaji kufanya ni kusakinisha Docker na chapa amri 1-2 kwenye koni. Njia rahisi zaidi ya kufanya hivyo ni kwenye Linux.

Kuanza

Weka Docker na Docker kutunga

Muundo wa folda

Tunaunda folda 2 kwa programu za mteja na seva. Faili iliyo na kiendelezi cha .yml ni usanidi Docker Kuandika, ambapo vyombo vya maombi vinafafanuliwa na kuhusishwa.
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

Tunaunda huduma 3 katika Docker: kwa NodeJS, MongoDB na kwa tuli katika Vue. Imeongezwa ili kuunganisha mteja kwenye seva inategemea seva. Ili kuunganisha MongoDB na API ya seva, tumia viungo mongo. Seva, mteja, mongo - majina ya huduma.

Mteja wa VueJS

Katika folda /mteja Programu inategemea VueJS. Programu iliundwa kwa kutumia Vue Cli. Wakati wa kujenga picha, programu ya mteja imejengwa katika seti ya faili tuli kwenye folda /dist. Dockerfile inaelezea seti ya amri za kuunda picha:

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

Tafadhali kumbuka kuwa package.json imenakiliwa na kusakinishwa kando na faili zingine za mradi. Hii inafanywa kwa utendaji, ili yaliyomo kwenye folda ya /node_modules yamehifadhiwa wakati wa kujenga tena. Kila mstari wa amri umewekwa kando.

Hatimaye, wakati chombo kinapoanza, amri inatekelezwa npm run dev. Amri hii imeelezewa katika package.json:


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

Ili kuendesha faili kutoka kwa folda /dist, imewekwa kimataifa http-server, na katika utegemezi wa dev kifurushi spa-http-serverili Vue Router ifanye kazi kwa usahihi. Alama ya --push-state inaelekezwa upya kwa index.html. Bendera ya -c yenye thamani ya sekunde 1 iliongezwa http-seva haikuhifadhi maandishi. Huu ni mfano wa jaribio; kwenye mradi halisi ni bora kutumia nginx.

Katika duka la Vuex tunaunda shamba apiHost: 'http://localhost:3000', ambapo bandari ya NodeJS Api imesajiliwa. Sehemu ya mteja iko tayari. Sasa maombi yote kutoka kwa mteja kwenda nyuma yanaenda kwenye url hii.

API ya seva ya NodeJS

Katika folda /server kuunda seva.js na Dockerfile: 


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

Π’ seva.js imeonyeshwa url kwa hifadhidata const url = 'mongodb://mongo:27017/';. Kuruhusu maombi ya kikoa tofauti kutoka kwa mteja:


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

Hitimisho

Sasa hebu tuende kwenye saraka ya mradi na kukimbia docker-compose build kwa ajili ya kujenga picha na docker-compose up kuendesha vyombo. Timu itainua kontena 3: seva, mteja, mongo. Kwa seva ya NodeJS, unaweza kusanidi upakiaji upya wa moto kwa kuiunganisha kwenye folda ya mtumiaji. Na mteja chini ya maendeleo inapaswa kuzinduliwa ndani ya nchi na upakiaji wa moto, unaoendesha kando server ΠΈ mongo. Ili kuanza huduma tofauti, taja tu jina lake docker-compose up client. Usisahau kuifanya wakati mwingine prune na kufuta vyombo, mitandao na picha ili kutoa rasilimali.

Unaweza kuona msimbo kamili hapa. Mradi bado uko chini ya maendeleo.

Chanzo: mapenzi.com

Kuongeza maoni