VueJS + NodeJS + MongoDB програмыг Docker дээр хэрхэн багцлах вэ

Өмнөх нийтлэлээс харахад би өөр өөр төсөл дээр ажиллаж байсан. Шинэ багийн эхний өдрүүд ихэвчлэн ижил аргаар явагддаг: арын ажилтан надтай суугаад програмыг суулгах, байрлуулах ид шидийн үйлдэл хийдэг. Докер нь урд талын хөгжүүлэгчдэд зайлшгүй шаардлагатай, учир нь... Backend нь ихэвчлэн өргөн хүрээний PHP/Java/Python/C# стек дээр бичигдсэн байдаг бөгөөд урд тал нь бүх зүйлийг суулгаж, байршуулахын тулд backend-ийн анхаарлыг сарниулах шаардлагагүй. Докер-Женкинсийн хослолыг ил тод байршуулалт, бүртгэлүүд, автоматжуулсан тестүүдтэй ганцхан газар л харсан.

Докерын талаар олон дэлгэрэнгүй нийтлэл бичсэн. Энэ нийтлэлд VueJS/Vue Router ашиглан Single Page Application-ийг байрлуулах талаар ярих болно, серверийн хэсэг нь NodeJS-тэй RESTful API хэлбэртэй, MongoDB нь мэдээллийн сан болгон ашигладаг. Docker Compose нь олон контейнер програмуудыг тодорхойлж, ажиллуулахад ашиглагддаг.

Яагаад танд Docker хэрэгтэй байна вэ?

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 дахь статик үйлчилгээнд. Үйлчлүүлэгчийг сервертэй холбохын тулд нэмсэн серверээс хамаарна. MongoDB-г серверийн API-тай холбохын тулд ашиглана уу 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. Энэ тушаалыг package.json дээр тайлбарласан болно:

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

Фолдероос файлуудыг ажиллуулахын тулд /дит, дэлхий даяар суулгасан http-server, мөн dev-хамааралтай үед багц spa-http-serverИнгэснээр Vue Router зөв ажиллах болно. --push-state туг нь index.html руу чиглүүлдэг. 1 секундын утгатай -c тугийг нэмсэн http-сервер скриптүүдийг кэш хийгээгүй. Энэ бол туршилтын жишээ бөгөөд бодит төсөл дээр nginx ашиглах нь дээр.

Vuex дэлгүүрт бид талбар үүсгэдэг apiHost: 'http://localhost:3000', NodeJS Api порт бүртгэгдсэн газар. Үйлчлүүлэгчийн хэсэг бэлэн боллоо. Одоо үйлчлүүлэгчээс арын хэсэгт ирсэн бүх хүсэлт энэ url руу очно.

NodeJS серверийн 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 контейнер ажиллуулах. Баг 3 чингэлэг өргөх болно. сервер, үйлчлүүлэгч, mongo. NodeJS серверийн хувьд та хэрэглэгчийн хавтсанд холбосноор халуун дахин ачаалах тохиргоог хийж болно. Боловсруулж буй үйлчлүүлэгчийг тусад нь ажиллуулж, халуун дахин ачааллаар орон нутагт эхлүүлэх хэрэгтэй сервер и Магадгүй. Тусдаа үйлчилгээг эхлүүлэхийн тулд нэрийг нь зааж өгөхөд л хангалттай docker-compose up client. Заримдаа үүнийг хийхээ бүү мартаарай prune нөөцийг чөлөөлөхийн тулд контейнер, сүлжээ, зургийг устгах.

Та бүрэн кодыг харах боломжтой энд. Төслийг боловсруулж байгаа хэвээр байна.

Эх сурвалж: www.habr.com