Как да пакетирате приложение VueJS + NodeJS + MongoDB в Docker

Както можете да видите от предишната статия, работих с различни проекти. Първите дни в нов екип обикновено протичат по същия начин: бекендърът сяда до мен и изпълнява магическите стъпки за инсталиране и внедряване на приложението. Docker е незаменим за front-end разработчиците, т.к. Бекендът често е написан в широк набор от PHP/Java/Python/C# стекове и предната част не трябва да отвлича вниманието на задната всеки път, за да инсталира и внедри всичко. Само на едно място видях куп Docker-Jenkins с прозрачно разгръщане, логове, прецакани с автотестове.

За docker са написани много подробни статии. Тази статия ще се фокусира върху внедряването на едностранично приложение с помощта на VueJS / Vue Router, сървърната част под формата на RESTful API с NodeJS, а MongoDB се използва като база данни. Docker Compose се използва за описване и изпълнение на множество контейнерни приложения.

Защо имате нужда от Docker

Docker ви позволява да автоматизирате процеса на внедряване на приложение. Разработчикът вече не трябва сам да инсталира програми, да се справя с несъвместимостта на версиите на своята машина. Достатъчно е да инсталирате Docker и да въведете 1-2 команди в конзолата. Най-удобно е да направите това на Linux.

Първи стъпки

инсталирам докер намлява Докер композиране

Структура на папката

Създаваме 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 услуги в 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-dependencies spa-http-serverза да накарате Vue Router да работи правилно. Флагът --push-state пренасочва към index.html. Добавен е флагът -c със стойност 1 секунда http-сървър не кешира скриптове. Това е тестов пример, в реален проект е по-добре да използвате 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 за пускане на контейнери. Командата ще повдигне 3 контейнера: сървър, клиент, mongo. За NodeJS сървър можете да конфигурирате горещо презареждане, като го свържете към потребителската папка. И клиентът е в процес на разработка, за да работи локално с горещо презареждане, като работи отделно сървър и Монго. За да стартирате отделна услуга, просто посочете нейното име docker-compose up client. Не забравяйте да го правите понякога prune и премахване на контейнери (контейнери), мрежи (мрежи) и изображения (изображения), за да се освободят ресурси.

Можете да видите пълния код тук. Проектът все още е в процес на разработка.

Източник: www.habr.com