როგორ შეფუთოთ VueJS + NodeJS + MongoDB აპლიკაცია Docker-ში

როგორც წინა სტატიიდან მიხვდით, სხვადასხვა პროექტზე ვმუშაობდი. ახალ გუნდში პირველი დღეები, როგორც წესი, იგივე გზით მიდის: დამხმარე ზის ჩემთან და ასრულებს მაგიურ მოქმედებებს აპლიკაციის ინსტალაციისა და განსათავსებლად. Docker შეუცვლელია წინა დეველოპერებისთვის, რადგან... Backend ხშირად იწერება PHP/Java/Python/C# სტეკების ფართო დიაპაზონში და წინა მხარეს არ არის საჭირო ყოველ ჯერზე ბექენდის ყურადღების გადატანა ყველაფრის ინსტალაციისა და განსათავსებლად. მხოლოდ ერთ ადგილას დავინახე Docker-Jenkins კომბინაცია გამჭვირვალე განლაგებით, ჟურნალებითა და ავტომატური ტესტებით.

დოკერის შესახებ ბევრი დეტალური სტატია დაიწერა. ამ სტატიაში ვისაუბრებთ VueJS/Vue როუტერის გამოყენებით ერთი გვერდის აპლიკაციის განთავსებაზე, სერვერის ნაწილი არის RESTful API-ის სახით NodeJS-ით, ხოლო MongoDB გამოიყენება როგორც მონაცემთა ბაზა. Docker Compose გამოიყენება მრავალი კონტეინერის აპლიკაციის განსაზღვრისა და გასაშვებად.

რატომ არის საჭირო დოკერი

Docker საშუალებას გაძლევთ ავტომატიზიროთ აპლიკაციის განლაგების პროცესი. დეველოპერს აღარ სჭირდება პროგრამების დამოუკიდებლად ინსტალაცია ან ვერსიების შეუთავსებლობა თავის აპარატზე. ყველაფერი რაც თქვენ გჭირდებათ არის დააინსტალიროთ Docker და ჩაწერეთ 1-2 ბრძანება კონსოლში. ამის გაკეთების ყველაზე მოსახერხებელი გზაა Linux-ზე.

ნაცნობობა

უცნობია 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 სერვერის 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-ზე. დაემატა -c დროშა 1 წამის მნიშვნელობით http-სერვერი არ ქეშირებული სკრიპტები. ეს არის ტესტის მაგალითი; რეალურ პროექტზე უმჯობესია გამოიყენოთ nginx.

Vuex მაღაზიაში ვქმნით ველს apiHost: 'http://localhost:3000', სადაც რეგისტრირებულია NodeJS Api პორტი. კლიენტის ნაწილი მზად არის. ახლა ყველა მოთხოვნა კლიენტიდან უკან გადადის ამ url-ზე.

NodeJS სერვერის API

საქაღალდეში /server შექმნა სერვერი. js და Dockerfile:

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