Giunsa ang pag-package sa VueJS + NodeJS + MongoDB nga aplikasyon sa Docker

Sama sa imong makita gikan sa miaging artikulo, nagtrabaho ako sa lainlaing mga proyekto. Ang unang mga adlaw sa usa ka bag-ong team kasagaran moadto sa sama nga paagi: ang backender milingkod kanako ug naghimo sa magic nga mga lakang sa pag-instalar ug pag-deploy sa aplikasyon. Ang Docker kinahanglanon alang sa mga nag-develop sa unahan, tungod kay. Ang backend sagad nga gisulat sa usa ka halapad nga han-ay sa PHP/Java/Python/C# stacks ug ang atubangan dili kinahanglan nga makabalda sa likod sa matag higayon nga i-install ug i-deploy ang tanan. Sa usa ra ka lugar nakit-an nako ang usa ka hugpong sa Docker-Jenkins nga adunay usa ka transparent nga pag-deploy, mga troso, gi-screw sa mga autotest.

Daghang detalyado nga mga artikulo ang gisulat bahin sa docker. Kini nga artikulo mag-focus sa pag-deploy sa usa ka Single Page Application gamit ang VueJS / Vue Router, ang server nga bahin sa porma sa usa ka RESTful API nga adunay NodeJS, ug ang MongoDB gigamit isip database. Ang Docker Compose gigamit sa paghulagway ug pagpadagan sa daghang mga aplikasyon sa sudlanan.

Ngano nga kinahanglan nimo ang Docker

Gitugotan ka sa Docker nga i-automate ang proseso sa pag-deploy sa usa ka aplikasyon. Ang developer dili na kinahanglan sa pag-instalar sa mga programa sa iyang kaugalingon, pag-atubang sa bersyon incompatibility sa iyang makina. Igo na nga i-install ang Docker ug i-type ang 1-2 nga mga mando sa console. Kini mao ang labing sayon ​​sa pagbuhat niini sa Linux.

Kon nagsugod

Pag-instalar Docker ug Pag-compose sa Docker

Istruktura sa folder

Naghimo kami og 2 nga mga folder alang sa mga aplikasyon sa kliyente ug server. Ang file nga adunay .yml extension kay usa ka config Docker Composediin ang mga sudlanan sa aplikasyon gihubit ug gisumpay.
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

Naghimo kami og 3 nga mga serbisyo sa docker: para sa NodeJS, MongoDB ug alang sa statics sa Vue. Aron makonektar ang kliyente sa server gidugang depende sa server. Aron i-link ang MongoDB sa server API, gamita link mongo. Server, kliyente, mongo ang mga ngalan sa mga serbisyo.

Kliyente sa VueJS

Sa folder /kliyente ang aplikasyon nahimutang sa VueJS. Gibuhat ang aplikasyon gamit ang vue cli. Kung nagtukod usa ka imahe, ang aplikasyon sa kliyente gitukod sa usa ka set sa mga static nga file sa usa ka folder /dist. Ang Dockerfile naghulagway sa usa ka hugpong sa mga sugo alang sa pagtukod og usa ka larawan:

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

Timan-i nga ang package.json gikopya ug gi-install nga gilain gikan sa ubang mga file sa proyekto. Gihimo kini alang sa pasundayag aron ang mga sulud sa / node_modules folder ma-cache sa pagtukod pag-usab. Ang matag command line gilain nga gi-cache.

Sa katapusan, sa diha nga ang sudlanan gisugdan, ang sugo gipatuman npm run dev. Kini nga sugo gihulagway sa package.json:

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

Sa pagpadagan sa mga file gikan sa usa ka folder /dist, tibuok kalibutan nga gitakda http-server, ug sa dev-dependencies package spa-http-serveraron mogana ang Vue Router sa hustong paagi. Ang --push-state nga bandila nag-redirect sa index.html. Ang -c nga bandila nga adunay kantidad nga 1 segundo gidugang sa http-server wala mag-cache sa mga script. Kini usa ka pananglitan sa pagsulay, sa usa ka tinuud nga proyekto mas maayo nga gamiton ang nginx.

Paghimo usa ka uma sa tindahan sa Vuex apiHost: 'http://localhost:3000', diin gisulat ang NodeJS Api port. Ang bahin sa kliyente andam na. Karon ang tanan nga mga hangyo gikan sa kliyente hangtod sa likod nga tumoy moadto sa kini nga url.

NodeJS server API

Sa folder /server paghimo server.js ug Dockerfile:

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

В server.js gipakita url alang sa database const url = 'mongodb://mongo:27017/';. Gitugotan namo ang mga hangyo sa cross-domain gikan sa kliyente:

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

konklusyon

Karon adto sa direktoryo sa proyekto ug pagdagan docker-compose build para sa imaging ug docker-compose up sa pagpadagan sa mga sudlanan. Ang sugo mopataas sa 3 ka sudlanan: server, kliyente, mongo. Alang sa NodeJS server, mahimo nimong i-configure ang hot-reload pinaagi sa pag-link niini sa folder sa user. Ug ang kliyente ubos sa pag-uswag aron modagan sa lokal nga adunay init nga pag-reload, nga nagdagan nga gilain server и mongo. Aron makasugod ug bulag nga serbisyo, ipiho lang ang ngalan niini docker-compose up client. Ayaw kalimot sa pagbuhat niini usahay prune ug pagtangtang sa mga sudlanan (mga sudlanan), mga network (mga network) ug mga hulagway (mga hulagway) aron mapagawas ang mga kahinguhaan.

Makita nimo ang tibuuk nga code dinhi. Ang proyekto padayon pa nga gipauswag.

Source: www.habr.com