ඩොකර් හි VueJS + NodeJS + MongoDB යෙදුම ඇසුරුම් කරන්නේ කෙසේද

පෙර ලිපියෙන් ඔබට තේරුම් ගත හැකි පරිදි, මම විවිධ ව්යාපෘතිවල වැඩ කළා. නව කණ්ඩායමක පළමු දින සාමාන්‍යයෙන් එකම ආකාරයකින් ගමන් කරයි: පසුබිම්කරු මා සමඟ වාඩි වී යෙදුම ස්ථාපනය කිරීමට සහ යෙදවීමට ඉන්ද්‍රජාලික ක්‍රියා සිදු කරයි. ඉදිරිපස සංවර්ධකයින් සඳහා ඩොකර් අත්‍යවශ්‍ය වේ මන්ද... පසුපෙළ බොහෝ විට PHP/Java/Python/C# ස්ටැක් වල පුළුල් පරාසයක ලියා ඇති අතර, සෑම දෙයක්ම ස්ථාපනය කිරීමට සහ යෙදවීමට ඉදිරිපස සෑම විටම පසුපෙළ අවධානය වෙනතකට යොමු කිරීමට අවශ්‍ය නොවේ. එක් ස්ථානයක පමණක් මම විනිවිද පෙනෙන යෙදවීමක්, ලඝු-සටහන් සහ ස්වයංක්‍රීය පරීක්ෂණ සහිත ඩොකර්-ජෙන්කින්ස් සංයෝජනයක් දුටුවෙමි.

Docker ගැන බොහෝ සවිස්තරාත්මක ලිපි ලියා ඇත. මෙම ලිපිය VueJS/Vue Router භාවිතයෙන් තනි පිටු යෙදුමක් යෙදවීම ගැන කතා කරනු ඇත, සේවාදායක කොටස NodeJS සමඟ RESTful API ආකාරයෙන් වන අතර MongoDB දත්ත සමුදායක් ලෙස භාවිතා කරයි. බහු බහාලුම් යෙදුම් නිර්වචනය කිරීමට සහ ධාවනය කිරීමට Docker Compose භාවිතා කරයි.

Docker අවශ්‍ය වන්නේ ඇයි

යෙදුමක් යෙදවීමේ ක්‍රියාවලිය ස්වයංක්‍රීය කිරීමට Docker ඔබට ඉඩ සලසයි. සංවර්ධකයාට තවදුරටත් තනිවම වැඩසටහන් ස්ථාපනය කිරීමට හෝ ඔහුගේ යන්ත්‍රයේ අනුවාද නොගැලපීම සමඟ කටයුතු කිරීමට අවශ්‍ය නොවේ. ඔබ කළ යුත්තේ ඩොකර් ස්ථාපනය කර කොන්සෝලයට 1-2 විධාන ටයිප් කිරීමයි. මෙය කිරීමට වඩාත්ම පහසු ක්රමය වන්නේ ලිනක්ස් මත ය.

ඇරඹේ

ස්ථාපනය කරන්න Docker සහ ඩොකර් රචනා කරයි

ෆෝල්ඩර ව්යුහය

අපි සේවාදායක සහ සේවාදායක යෙදුම් සඳහා ෆෝල්ඩර 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

අපි Docker හි සේවා 3ක් සාදන්නෙමු: NodeJS, MongoDB සහ Vue හි ස්ථිතික ඒවා සඳහා. සේවාදායකයට සේවාදායකය සම්බන්ධ කිරීමට එකතු කරන ලදී සේවාදායකය මත රඳා පවතී. සේවාදායක API සමඟ MongoDB සම්බන්ධ කිරීමට, භාවිතා කරන්න සබැඳි mongo. සේවාදායකය, සේවාදායකයා, මොංගෝ - සේවා නම්.

VueJS සේවාදායකයා

ෆෝල්ඩරයේ / සේවාලාභියා යෙදුම VueJS මත පදනම් වේ. යෙදුම නිර්මාණය කර ඇත Vue Cli. රූපයක් තැනීමේදී, සේවාදායක යෙදුම ෆෝල්ඩරයේ ස්ථිතික ගොනු කට්ටලයකට ගොඩනගා ඇත / දිස්ත්රික්කය. Dockerfile රූපයක් තැනීම සඳහා විධාන මාලාවක් විස්තර කරයි:

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. මෙම විධානය pack.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 නිර්මාණය කරනවා 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));
  });

නිගමනය

දැන් අපි project directory එකට ගිහින් Run කරමු docker-compose build රූප තැනීම සඳහා සහ docker-compose up බහාලුම් ධාවනය කිරීමට. කණ්ඩායම බහාලුම් 3 ක් ඔසවයි: සේවාදායකය, සේවාදායකයා, මොංගෝ. NodeJS සේවාදායකයක් සඳහා, ඔබට එය පරිශීලක ෆෝල්ඩරයට සම්බන්ධ කිරීමෙන් උණුසුම් නැවත පූරණය වින්‍යාසගත කළ හැක. සහ සංවර්ධනය යටතේ පවතින සේවාලාභියා උණුසුම් රීලෝඩ් සමඟ දේශීයව දියත් කළ යුතුය, වෙනම ධාවනය කළ යුතුය සේවාදායකය и මොන්ගෝ. වෙනම සේවාවක් ආරම්භ කිරීමට, එහි නම සඳහන් කරන්න docker-compose up client. සමහර වෙලාවට ඒක කරන්න අමතක කරන්න එපා prune සහ සම්පත් නිදහස් කිරීම සඳහා බහාලුම්, ජාල සහ පින්තූර මකා දැමීම.

ඔබට සම්පූර්ණ කේතය දැකිය හැකිය මෙහි. ව්යාපෘතිය තවමත් සංවර්ධනය වෙමින් පවතී.

මූලාශ්රය: www.habr.com