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

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

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

Защо е нужен Docker

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

Започваме

Инсталираме Docker и Docker compose

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

Създаваме 2 папки за клиентското и сървърното приложение. Файл с разширение .yml — това е конфиг Docker Compose, в който се определят и свързват контейнерите на приложението.
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. За да свържем клиента със сървъра е добавено depends on server. За връзка на MongoDB със сървърното API се използва links mongo. Server, client, mongo — имената на услугите.

Клиент на VueJS

В папката /client съдържа приложение на VueJS. Приложението е създадено с помощта на Vue Cli. При изграждането на образа клиентското приложение се билдва в комплект статични файлове в папката /dist. В 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"
}

За да стартирате файловете от папката /dist, глобално се инсталира http-server, а в dev-dependencies пакетът spa-http-server, за да работи Vue Router правилно. Флагът —push-state прави пренасочване към index.html. Флагът -c със стойност 1 секунда е добавен, за да http-server не кешира скриптове. Това е тестов пример, в реален проект е по-добре да се използва nginx.

В Vuex store създаваме поле 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, // някои стари браузъри (IE11, различни SmartTV) може да имат проблеми с 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 контейнера: server, client, mongo. За сървъра на NodeJS може да настроите hot-reload, свързан с папката user. А клиентът на етап разработка да се стартира локално с hot reload, като се пусне отделно server и mongo. За да стартирате отделен сервис, просто задайте името му docker-compose up client. Не забравяйте понякога да правите prune и да изтривате контейнери (containers), мрежи (networks) и образи (images), за да освободите ресурси.

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

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