របៀបវេចខ្ចប់កម្មវិធី VueJS + NodeJS + MongoDB នៅក្នុង Docker

ដូចដែលអ្នកអាចយល់បានពីអត្ថបទមុនខ្ញុំបានធ្វើការលើគម្រោងផ្សេងៗគ្នា។ ថ្ងៃដំបូងនៅក្នុងក្រុមថ្មីជាធម្មតាដើរតាមវិធីដូចគ្នា៖ អ្នកនៅពីក្រោយអង្គុយជាមួយខ្ញុំ ហើយធ្វើសកម្មភាពវេទមន្តដើម្បីដំឡើង និងដាក់ឱ្យប្រើប្រាស់កម្មវិធី។ Docker គឺ​មិន​អាច​ខ្វះ​បាន​សម្រាប់​អ្នក​អភិវឌ្ឍន៍​ផ្នែក​ខាង​មុខ​ព្រោះ... ផ្នែកខាងក្រោយត្រូវបានសរសេរជាញឹកញាប់នៅក្នុងជួរដ៏ធំទូលាយនៃ PHP/Java/Python/C# stacks ហើយផ្នែកខាងមុខមិនចាំបាច់រំខាន backend រាល់ពេលដើម្បីដំឡើង និងដាក់ពង្រាយអ្វីគ្រប់យ៉ាងនោះទេ។ មានតែនៅកន្លែងមួយប៉ុណ្ណោះដែលខ្ញុំឃើញការរួមបញ្ចូលគ្នារវាង Docker-Jenkins ជាមួយនឹងការដាក់ពង្រាយប្រកបដោយតម្លាភាព កំណត់ហេតុ និងការធ្វើតេស្តស្វ័យប្រវត្តិ។

អត្ថបទលម្អិតជាច្រើនត្រូវបានសរសេរអំពី Docker ។ អត្ថបទនេះនឹងនិយាយអំពីការដាក់ឱ្យប្រើប្រាស់នូវ Single Page Application ដោយប្រើ VueJS/Vue Router ផ្នែកម៉ាស៊ីនមេស្ថិតនៅក្នុងទម្រង់ RESTful API ជាមួយ NodeJS ហើយ MongoDB ត្រូវបានប្រើជាមូលដ្ឋានទិន្នន័យ។ Docker Compose ត្រូវបានប្រើដើម្បីកំណត់ និងដំណើរការកម្មវិធីកុងតឺន័រច្រើន។

ហេតុអ្វីបានជា Docker ត្រូវការ

Docker អនុញ្ញាតឱ្យអ្នកធ្វើស្វ័យប្រវត្តិកម្មដំណើរការនៃការដាក់ពង្រាយកម្មវិធី។ អ្នកអភិវឌ្ឍន៍លែងត្រូវការដំឡើងកម្មវិធីដោយខ្លួនឯង ឬដោះស្រាយភាពមិនឆបគ្នានៃកំណែនៅលើម៉ាស៊ីនរបស់គាត់ទៀតហើយ។ អ្វីដែលអ្នកត្រូវធ្វើគឺដំឡើង Docker ហើយវាយពាក្យបញ្ជា 1-2 ទៅក្នុងកុងសូល។ មធ្យោបាយងាយស្រួលបំផុតដើម្បីធ្វើវាគឺនៅលើលីនុច។

ចាប់ផ្តើម

ដំឡើង Dockers និង Docker តែង

រចនាសម្ព័ន្ធថត

យើងបង្កើតថតឯកសារចំនួន 2 សម្រាប់កម្មវិធីម៉ាស៊ីនភ្ញៀវ និងម៉ាស៊ីនមេ។ ឯកសារដែលមានផ្នែកបន្ថែម .yml គឺជាការកំណត់ សរសេរ Dockerដែលកុងតឺន័រកម្មវិធីត្រូវបានកំណត់ និងពាក់ព័ន្ធ។
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 នៅក្នុង Docker: សម្រាប់ NodeJS, MongoDB និងសម្រាប់ឋិតិវន្តនៅក្នុង Vue ។ បានបន្ថែមដើម្បីភ្ជាប់ម៉ាស៊ីនភ្ញៀវទៅម៉ាស៊ីនមេ អាស្រ័យលើម៉ាស៊ីនមេ. ដើម្បីភ្ជាប់ MongoDB ជាមួយ server API សូមប្រើ ភ្ជាប់ mongo. ម៉ាស៊ីនមេ ម៉ាស៊ីនភ្ញៀវ ម៉ុងហ្គោ - ឈ្មោះសេវាកម្ម។

ម៉ាស៊ីនភ្ញៀវ VueJS

នៅក្នុងថតឯកសារ / អតិថិជន កម្មវិធីគឺផ្អែកលើ VueJS ។ កម្មវិធីត្រូវបានបង្កើតដោយប្រើ វឺ គ្លី. នៅពេលបង្កើតរូបភាព កម្មវិធីអតិថិជនត្រូវបានបង្កើតឡើងជាសំណុំនៃឯកសារឋិតិវន្តនៅក្នុងថត / ឌីស. 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. ពាក្យបញ្ជានេះត្រូវបានពិពណ៌នានៅក្នុង package.json៖

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

ដើម្បីដំណើរការឯកសារពីថតឯកសារ / ឌីស, ដំឡើងជាសកល http-serverហើយនៅក្នុង dev-dependencies កញ្ចប់ spa-http-serverដើម្បីឱ្យ Vue Router ដំណើរការបានត្រឹមត្រូវ។ ទង់ --push-state ប្តូរទិសទៅ index.html ។ ទង់ -c ដែលមានតម្លៃ 1 វិនាទីត្រូវបានបន្ថែមទៅ http-server មិនបានរក្សាទុកស្គ្រីបទេ។ នេះ​គឺ​ជា​ឧទាហរណ៍​សាកល្បង​មួយ​នៅ​លើ​គម្រោង​ពិត​វា​ប្រសើរ​ក្នុង​ការ​ប្រើ nginx ។

នៅក្នុងហាង Vuex យើងបង្កើតវាលមួយ។ apiHost: 'http://localhost:3000'ដែលជាកន្លែងដែលច្រក NodeJS Api ត្រូវបានចុះឈ្មោះ។ ផ្នែកអតិថិជនរួចរាល់។ ឥឡូវនេះរាល់សំណើពីអតិថិជនទៅខាងក្រោយ សូមចូលទៅកាន់ url នេះ។

NodeJS server API

នៅក្នុងថតឯកសារ /server បង្កើត server.js និង Dockerfile៖

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 ដើម្បីដំណើរការធុង។ ក្រុមការងារនឹងលើកធុងចំនួន ៣៖ ម៉ាស៊ីនមេ, ម៉ាស៊ីនភ្ញៀវ, ម៉ុងហ្គោ. សម្រាប់ម៉ាស៊ីនមេ NodeJS អ្នកអាចកំណត់រចនាសម្ព័ន្ធ hot-reload ដោយភ្ជាប់វាទៅថតអ្នកប្រើប្រាស់។ ហើយម៉ាស៊ីនភ្ញៀវដែលកំពុងអភិវឌ្ឍគួរតែត្រូវបានបើកដំណើរការក្នុងស្រុកជាមួយនឹងការផ្ទុកឡើងវិញក្តៅ ដោយដំណើរការដោយឡែកពីគ្នា។ ម៉ាស៊ីនបម្រើ и mongo. ដើម្បីចាប់ផ្តើមសេវាកម្មដាច់ដោយឡែក គ្រាន់តែបញ្ជាក់ឈ្មោះរបស់វា។ docker-compose up client. កុំភ្លេចធ្វើវាពេលខ្លះ prune និងការលុបកុងតឺន័រ បណ្តាញ និងរូបភាព ដើម្បីបង្កើនធនធាន។

អ្នកអាចឃើញកូដពេញលេញ នៅទីនេះ. គម្រោងនេះកំពុងស្ថិតក្រោមការអភិវឌ្ឍន៍នៅឡើយ។

ប្រភព: www.habr.com