ಡಾಕರ್‌ನಲ್ಲಿ VueJS + NodeJS + MongoDB ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೇಗೆ ಪ್ಯಾಕೇಜ್ ಮಾಡುವುದು

ಹಿಂದಿನ ಲೇಖನದಿಂದ ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡಂತೆ, ನಾನು ವಿವಿಧ ಯೋಜನೆಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಿದ್ದೇನೆ. ಹೊಸ ತಂಡದಲ್ಲಿ ಮೊದಲ ದಿನಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅದೇ ರೀತಿಯಲ್ಲಿ ಹೋಗುತ್ತವೆ: ಬ್ಯಾಕೆಂಡರ್ ನನ್ನೊಂದಿಗೆ ಕುಳಿತುಕೊಳ್ಳುತ್ತಾನೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಮತ್ತು ನಿಯೋಜಿಸಲು ಮಾಂತ್ರಿಕ ಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಾನೆ. ಮುಂಭಾಗದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಡಾಕರ್ ಅನಿವಾರ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ... ಬ್ಯಾಕೆಂಡ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ PHP/Java/Python/C# ಸ್ಟಾಕ್‌ಗಳಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಮುಂಭಾಗವು ಎಲ್ಲವನ್ನೂ ಸ್ಥಾಪಿಸಲು ಮತ್ತು ನಿಯೋಜಿಸಲು ಪ್ರತಿ ಬಾರಿಯೂ ಬ್ಯಾಕೆಂಡ್ ಅನ್ನು ವಿಚಲಿತಗೊಳಿಸಬೇಕಾಗಿಲ್ಲ. ಒಂದು ಸ್ಥಳದಲ್ಲಿ ಮಾತ್ರ ನಾನು ಪಾರದರ್ಶಕ ನಿಯೋಜನೆ, ಲಾಗ್‌ಗಳು ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷೆಗಳೊಂದಿಗೆ ಡಾಕರ್-ಜೆಂಕಿನ್ಸ್ ಸಂಯೋಜನೆಯನ್ನು ನೋಡಿದೆ.

ಡಾಕರ್ ಬಗ್ಗೆ ಅನೇಕ ವಿವರವಾದ ಲೇಖನಗಳನ್ನು ಬರೆಯಲಾಗಿದೆ. ಈ ಲೇಖನವು VueJS/Vue ರೂಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯೋಜಿಸುವುದರ ಕುರಿತು ಮಾತನಾಡುತ್ತದೆ, ಸರ್ವರ್ ಭಾಗವು NodeJS ನೊಂದಿಗೆ RESTful API ರೂಪದಲ್ಲಿದೆ ಮತ್ತು MongoDB ಅನ್ನು ಡೇಟಾಬೇಸ್ ಆಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಬಹು ಕಂಟೇನರ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಚಲಾಯಿಸಲು ಡಾಕರ್ ಕಂಪೋಸ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಡಾಕರ್ ಏಕೆ ಬೇಕು

ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯೋಜಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಡಾಕರ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಡೆವಲಪರ್ ಇನ್ನು ಮುಂದೆ ತನ್ನದೇ ಆದ ಪ್ರೋಗ್ರಾಂಗಳನ್ನು ಸ್ಥಾಪಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಅಥವಾ ಅವನ ಗಣಕದಲ್ಲಿ ಆವೃತ್ತಿ ಅಸಾಮರಸ್ಯವನ್ನು ಎದುರಿಸಬೇಕಾಗುತ್ತದೆ. ನೀವು ಮಾಡಬೇಕಾಗಿರುವುದು ಡಾಕರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕನ್ಸೋಲ್‌ನಲ್ಲಿ 1-2 ಆಜ್ಞೆಗಳನ್ನು ಟೈಪ್ ಮಾಡಿ. ಇದನ್ನು ಮಾಡಲು ಅತ್ಯಂತ ಅನುಕೂಲಕರ ಮಾರ್ಗವೆಂದರೆ ಲಿನಕ್ಸ್.

ಶುರುವಾಗುತ್ತಿದೆ

ಸ್ಥಾಪಿಸಿ ಡಾಕರ್ ಮತ್ತು ಡಾಕರ್ ಸಂಯೋಜನೆ

ಫೋಲ್ಡರ್ ರಚನೆ

ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ನಾವು 2 ಫೋಲ್ಡರ್‌ಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ. .yml ವಿಸ್ತರಣೆಯೊಂದಿಗೆ ಫೈಲ್ ಕಾನ್ಫಿಗರ್ ಆಗಿದೆ ಡಾಕರ್ ಕಂಪೋಸ್, ಅಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್ ಕಂಟೈನರ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಮತ್ತು ಸಂಯೋಜಿಸಲಾಗಿದೆ.
ಡಾಕರ್-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

ನಾವು ಡಾಕರ್‌ನಲ್ಲಿ 3 ಸೇವೆಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ: NodeJS, MongoDB ಮತ್ತು Vue ನಲ್ಲಿ ಸ್ಥಿರವಾದ ಸೇವೆಗಳಿಗಾಗಿ. ಕ್ಲೈಂಟ್ ಅನ್ನು ಸರ್ವರ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು ಸೇರಿಸಲಾಗಿದೆ ಸರ್ವರ್ ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಸರ್ವರ್ API ಜೊತೆಗೆ MongoDB ಅನ್ನು ಲಿಂಕ್ ಮಾಡಲು, ಬಳಸಿ ಕೊಂಡಿಗಳು ಮೊಂಗೋ. ಸರ್ವರ್, ಕ್ಲೈಂಟ್, ಮೊಂಗೋ - ಸೇವೆಗಳ ಹೆಸರುಗಳು.

VueJS ಕ್ಲೈಂಟ್

ಫೋಲ್ಡರ್‌ನಲ್ಲಿ / ಗ್ರಾಹಕ ಅಪ್ಲಿಕೇಶನ್ VueJS ಅನ್ನು ಆಧರಿಸಿದೆ. ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲಾಗಿದೆ ವ್ಯೂ ಕ್ಲಿ. ಚಿತ್ರವನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಕ್ಲೈಂಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಫೋಲ್ಡರ್ನಲ್ಲಿ ಸ್ಥಿರ ಫೈಲ್ಗಳ ಸೆಟ್ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ / ಜಿಲ್ಲೆ. ಚಿತ್ರವನ್ನು ನಿರ್ಮಿಸಲು ಡಾಕರ್‌ಫೈಲ್ ಆಜ್ಞೆಗಳ ಗುಂಪನ್ನು ವಿವರಿಸುತ್ತದೆ:

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

ಪ್ಯಾಕೇಜ್.json ಅನ್ನು ನಕಲು ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಉಳಿದ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್‌ಗಳಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ. ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ /node_modules ಫೋಲ್ಡರ್‌ನ ವಿಷಯಗಳನ್ನು ಮತ್ತೆ ನಿರ್ಮಿಸುವಾಗ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಕಮಾಂಡ್ ಲೈನ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ಕಂಟೇನರ್ ಪ್ರಾರಂಭವಾದಾಗ, ಆಜ್ಞೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ npm run dev. ಈ ಆಜ್ಞೆಯನ್ನು package.json ನಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ:

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

ಫೋಲ್ಡರ್‌ನಿಂದ ಫೈಲ್‌ಗಳನ್ನು ರನ್ ಮಾಡಲು / ಜಿಲ್ಲೆ, ಜಾಗತಿಕವಾಗಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ http-server, ಮತ್ತು ದೇವ್-ಅವಲಂಬನೆಯಲ್ಲಿ ಪ್ಯಾಕೇಜ್ spa-http-serverಆದ್ದರಿಂದ Vue ರೂಟರ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. --push-state ಧ್ವಜವು index.html ಗೆ ಮರುನಿರ್ದೇಶಿಸುತ್ತದೆ. 1 ಸೆಕೆಂಡಿನ ಮೌಲ್ಯದೊಂದಿಗೆ -c ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ http-ಸರ್ವರ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲಿಲ್ಲ. ಇದು ಪರೀಕ್ಷಾ ಉದಾಹರಣೆಯಾಗಿದೆ; ನೈಜ ಯೋಜನೆಯಲ್ಲಿ nginx ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮ.

Vuex ಅಂಗಡಿಯಲ್ಲಿ ನಾವು ಕ್ಷೇತ್ರವನ್ನು ರಚಿಸುತ್ತೇವೆ apiHost: 'http://localhost:3000', ಅಲ್ಲಿ NodeJS Api ಪೋರ್ಟ್ ಅನ್ನು ನೋಂದಾಯಿಸಲಾಗಿದೆ. ಕ್ಲೈಂಟ್ ಭಾಗ ಸಿದ್ಧವಾಗಿದೆ. ಈಗ ಕ್ಲೈಂಟ್‌ನಿಂದ ಹಿಂದಿನ ಎಲ್ಲಾ ವಿನಂತಿಗಳು ಈ url ಗೆ ಹೋಗುತ್ತವೆ.

NodeJS ಸರ್ವರ್ API

ಫೋಲ್ಡರ್‌ನಲ್ಲಿ /server ರಚಿಸಿ server.js ಮತ್ತು ಡಾಕರ್‌ಫೈಲ್:

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

В server.js ಸೂಚಿಸಲಾಗಿದೆ url ಅನ್ನು ಡೇಟಾಬೇಸ್‌ಗಾಗಿ const url = 'mongodb://mongo:27017/';. ಕ್ಲೈಂಟ್‌ನಿಂದ ಕ್ರಾಸ್-ಡೊಮೇನ್ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸುವುದು:

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

ತೀರ್ಮಾನಕ್ಕೆ

ಈಗ ಪ್ರಾಜೆಕ್ಟ್ ಡೈರೆಕ್ಟರಿಗೆ ಹೋಗಿ ರನ್ ಮಾಡೋಣ docker-compose build ಚಿತ್ರಗಳನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು docker-compose up ಧಾರಕಗಳನ್ನು ಚಲಾಯಿಸಲು. ತಂಡವು 3 ಪಾತ್ರೆಗಳನ್ನು ಎತ್ತುತ್ತದೆ: ಸರ್ವರ್, ಕ್ಲೈಂಟ್, ಮೊಂಗೋ. NodeJS ಸರ್ವರ್‌ಗಾಗಿ, ಬಳಕೆದಾರ ಫೋಲ್ಡರ್‌ಗೆ ಲಿಂಕ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಹಾಟ್-ರೀಲೋಡ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು. ಮತ್ತು ಅಭಿವೃದ್ಧಿಯಲ್ಲಿರುವ ಕ್ಲೈಂಟ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಬಿಸಿ ಮರುಲೋಡ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಬೇಕು, ಪ್ರತ್ಯೇಕವಾಗಿ ಚಾಲನೆಯಲ್ಲಿದೆ ಸರ್ವರ್ и ಮೊಂಗೋ. ಪ್ರತ್ಯೇಕ ಸೇವೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು, ಅದರ ಹೆಸರನ್ನು ಸೂಚಿಸಿ docker-compose up client. ಕೆಲವೊಮ್ಮೆ ಇದನ್ನು ಮಾಡಲು ಮರೆಯಬೇಡಿ prune ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮುಕ್ತಗೊಳಿಸಲು ಕಂಟೈನರ್‌ಗಳು, ನೆಟ್‌ವರ್ಕ್‌ಗಳು ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಅಳಿಸುವುದು.

ನೀವು ಸಂಪೂರ್ಣ ಕೋಡ್ ಅನ್ನು ನೋಡಬಹುದು ಇಲ್ಲಿ. ಯೋಜನೆಯು ಇನ್ನೂ ಅಭಿವೃದ್ಧಿ ಹಂತದಲ್ಲಿದೆ.

ಮೂಲ: www.habr.com