ਡੌਕਰ ਵਿੱਚ VueJS + NodeJS + MongoDB ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਕਿਵੇਂ ਪੈਕੇਜ ਕਰਨਾ ਹੈ

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਪਿਛਲੇ ਲੇਖ ਤੋਂ ਸਮਝ ਸਕਦੇ ਹੋ, ਮੈਂ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕੀਤਾ. ਨਵੀਂ ਟੀਮ ਦੇ ਪਹਿਲੇ ਦਿਨ ਆਮ ਤੌਰ 'ਤੇ ਉਸੇ ਤਰੀਕੇ ਨਾਲ ਜਾਂਦੇ ਹਨ: ਬੈਕੈਂਡਰ ਮੇਰੇ ਨਾਲ ਬੈਠਦਾ ਹੈ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਲਾਗੂ ਕਰਨ ਲਈ ਜਾਦੂਈ ਕਾਰਵਾਈਆਂ ਕਰਦਾ ਹੈ। ਡੌਕਰ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰਾਂ ਲਈ ਲਾਜ਼ਮੀ ਹੈ ਕਿਉਂਕਿ ... ਬੈਕਐਂਡ ਨੂੰ ਅਕਸਰ PHP/Java/Python/C# ਸਟੈਕ ਦੀ ਇੱਕ ਵਿਸ਼ਾਲ ਸ਼੍ਰੇਣੀ ਵਿੱਚ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਫਰੰਟ ਨੂੰ ਹਰ ਵਾਰ ਸਭ ਕੁਝ ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਤੈਨਾਤ ਕਰਨ ਲਈ ਬੈਕਐਂਡ ਨੂੰ ਭਟਕਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਸਿਰਫ ਇੱਕ ਜਗ੍ਹਾ ਵਿੱਚ ਮੈਂ ਇੱਕ ਪਾਰਦਰਸ਼ੀ ਤੈਨਾਤੀ, ਲੌਗਸ ਅਤੇ ਆਟੋਮੇਟਿਡ ਟੈਸਟਾਂ ਦੇ ਨਾਲ ਇੱਕ ਡੌਕਰ-ਜੇਨਕਿੰਸ ਸੁਮੇਲ ਦੇਖਿਆ.

ਡੌਕਰ ਬਾਰੇ ਬਹੁਤ ਸਾਰੇ ਵਿਸਤ੍ਰਿਤ ਲੇਖ ਲਿਖੇ ਗਏ ਹਨ. ਇਹ ਲੇਖ VueJS/Vue ਰਾਊਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਤੈਨਾਤ ਕਰਨ ਬਾਰੇ ਗੱਲ ਕਰੇਗਾ, ਸਰਵਰ ਦਾ ਹਿੱਸਾ NodeJS ਦੇ ਨਾਲ ਇੱਕ RESTful API ਦੇ ਰੂਪ ਵਿੱਚ ਹੈ, ਅਤੇ MongoDB ਨੂੰ ਇੱਕ ਡੇਟਾਬੇਸ ਵਜੋਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਡੌਕਰ ਕੰਪੋਜ਼ ਦੀ ਵਰਤੋਂ ਮਲਟੀਪਲ ਕੰਟੇਨਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਅਤੇ ਚਲਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।

ਡੌਕਰ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ

ਡੌਕਰ ਤੁਹਾਨੂੰ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਤੈਨਾਤ ਕਰਨ ਦੀ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਵੈਚਾਲਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਡਿਵੈਲਪਰ ਨੂੰ ਹੁਣ ਆਪਣੇ ਆਪ ਪ੍ਰੋਗਰਾਮਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਜਾਂ ਉਸਦੀ ਮਸ਼ੀਨ 'ਤੇ ਸੰਸਕਰਣ ਅਸੰਗਤਤਾ ਨਾਲ ਨਜਿੱਠਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ. ਤੁਹਾਨੂੰ ਬਸ ਡੌਕਰ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਅਤੇ ਕੰਸੋਲ ਵਿੱਚ 1-2 ਕਮਾਂਡਾਂ ਟਾਈਪ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਅਜਿਹਾ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਲੀਨਕਸ 'ਤੇ ਹੈ।

ਸ਼ੁਰੂ ਕਰਨਾ

ਸਥਾਪਿਤ ਕਰੋ ਡੌਕਰ ਅਤੇ ਡੌਕਰ ਕੰਪੋਜ਼

ਫੋਲਡਰ ਬਣਤਰ

ਅਸੀਂ ਕਲਾਇੰਟ ਅਤੇ ਸਰਵਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ 2 ਫੋਲਡਰ ਬਣਾਉਂਦੇ ਹਾਂ। .yml ਐਕਸਟੈਂਸ਼ਨ ਵਾਲੀ ਇੱਕ ਫਾਈਲ ਇੱਕ ਸੰਰਚਨਾ ਹੈ ਡੌਕਰ ਕੰਪੋਜ, ਜਿੱਥੇ ਐਪਲੀਕੇਸ਼ਨ ਕੰਟੇਨਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਅਤੇ ਸੰਬੰਧਿਤ ਕੀਤਾ ਗਿਆ ਹੈ।
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

ਅਸੀਂ ਡੌਕਰ ਵਿੱਚ 3 ਸੇਵਾਵਾਂ ਬਣਾਉਂਦੇ ਹਾਂ: NodeJS, MongoDB ਅਤੇ Vue ਵਿੱਚ ਸਥਿਰ ਸੇਵਾਵਾਂ ਲਈ। ਕਲਾਇੰਟ ਨੂੰ ਸਰਵਰ ਨਾਲ ਕਨੈਕਟ ਕਰਨ ਲਈ ਜੋੜਿਆ ਗਿਆ ਸਰਵਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ. MongoDB ਨੂੰ ਸਰਵਰ API ਨਾਲ ਲਿੰਕ ਕਰਨ ਲਈ, ਵਰਤੋਂ ਮੋਂਗੋ ਨੂੰ ਲਿੰਕ ਕਰਦਾ ਹੈ. ਸਰਵਰ, ਕਲਾਇੰਟ, ਮੋਂਗੋ - ਸੇਵਾਵਾਂ ਦੇ ਨਾਮ।

VueJS ਕਲਾਇੰਟ

ਫੋਲਡਰ ਵਿੱਚ / ਗਾਹਕ ਐਪਲੀਕੇਸ਼ਨ VueJS 'ਤੇ ਅਧਾਰਤ ਹੈ। ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਸੀ Vue Cli. ਇੱਕ ਚਿੱਤਰ ਬਣਾਉਣ ਵੇਲੇ, ਕਲਾਇੰਟ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਫੋਲਡਰ ਵਿੱਚ ਸਥਿਰ ਫਾਈਲਾਂ ਦੇ ਇੱਕ ਸਮੂਹ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ /ਜ਼ਿਲਾ. ਡੌਕਰਫਾਈਲ ਇੱਕ ਚਿੱਤਰ ਬਣਾਉਣ ਲਈ ਕਮਾਂਡਾਂ ਦੇ ਇੱਕ ਸਮੂਹ ਦਾ ਵਰਣਨ ਕਰਦਾ ਹੈ:

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

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ package.json ਨੂੰ ਬਾਕੀ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ ਤੋਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕਾਪੀ ਅਤੇ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਕਾਰਜਕੁਸ਼ਲਤਾ ਲਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਜੋ /node_modules ਫੋਲਡਰ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਣ ਵੇਲੇ ਕੈਸ਼ ਕੀਤਾ ਜਾ ਸਕੇ। ਹਰੇਕ ਕਮਾਂਡ ਲਾਈਨ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਕੈਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਅੰਤ ਵਿੱਚ, ਜਦੋਂ ਕੰਟੇਨਰ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਕਮਾਂਡ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ npm run dev. ਇਸ ਕਮਾਂਡ ਦਾ ਵਰਣਨ package.json ਵਿੱਚ ਕੀਤਾ ਗਿਆ ਹੈ:

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

ਫੋਲਡਰ ਤੋਂ ਫਾਈਲਾਂ ਨੂੰ ਚਲਾਉਣ ਲਈ /ਜ਼ਿਲਾ, ਵਿਸ਼ਵ ਪੱਧਰ 'ਤੇ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ http-server, ਅਤੇ dev-ਨਿਰਭਰਤਾ ਵਿੱਚ ਪੈਕੇਜ spa-http-serverਤਾਂ ਜੋ Vue ਰਾਊਟਰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰੇ। --push-state ਫਲੈਗ index.html 'ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਦਾ ਹੈ। 1 ਸਕਿੰਟ ਦੇ ਮੁੱਲ ਵਾਲਾ -c ਫਲੈਗ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਸੀ http-ਸਰਵਰ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਕੈਸ਼ ਨਹੀਂ ਕੀਤਾ। ਇਹ ਇੱਕ ਟੈਸਟ ਉਦਾਹਰਨ ਹੈ; ਇੱਕ ਅਸਲੀ ਪ੍ਰੋਜੈਕਟ 'ਤੇ nginx ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬਿਹਤਰ ਹੈ.

Vuex ਸਟੋਰ ਵਿੱਚ ਅਸੀਂ ਇੱਕ ਖੇਤਰ ਬਣਾਉਂਦੇ ਹਾਂ apiHost: 'http://localhost:3000', ਜਿੱਥੇ NodeJS Api ਪੋਰਟ ਰਜਿਸਟਰਡ ਹੈ। ਗਾਹਕ ਦਾ ਹਿੱਸਾ ਤਿਆਰ ਹੈ. ਹੁਣ ਕਲਾਇੰਟ ਤੋਂ ਬੈਕ ਦੀਆਂ ਸਾਰੀਆਂ ਬੇਨਤੀਆਂ ਇਸ url 'ਤੇ ਜਾਂਦੀਆਂ ਹਨ।

NodeJS ਸਰਵਰ API

ਫੋਲਡਰ ਵਿੱਚ /server ਬਣਾਓ ਸਰਵਰ .js ਅਤੇ ਡੌਕਰਫਾਈਲ:

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

В ਸਰਵਰ .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