Како упаковати ВуеЈС + НодеЈС + МонгоДБ апликацију у Доцкер

Као што можете разумети из претходног чланка, радио сам на различитим пројектима. Први дани у новом тиму обично иду на исти начин: бекендер седи са мном и изводи магичне радње за инсталирање и примену апликације. Доцкер је неопходан за фронт-енд програмере јер... Позадински део је често написан у широком спектру ПХП/Јава/Питхон/Ц# стекова, а предњи део не мора да одвлачи пажњу позадинског дела сваки пут да би све инсталирао и применио. Само на једном месту сам видео комбинацију Доцкер-Јенкинс са транспарентном имплементацијом, евиденцијама и аутоматизованим тестовима.

О Доцкеру је написано много детаљних чланака. Овај чланак ће говорити о постављању апликације за једну страницу помоћу ВуеЈС/Вуе рутера, серверски део је у облику РЕСТфул АПИ-ја са НодеЈС-ом, а МонгоДБ се користи као база података. Доцкер Цомпосе се користи за дефинисање и покретање више контејнерских апликација.

Зашто је Доцкер потребан

Доцкер вам омогућава да аутоматизујете процес постављања апликације. Програмер више не мора сам да инсталира програме или да се бави некомпатибилношћу верзија на својој машини. Све што треба да урадите је да инсталирате Доцкер и унесете 1-2 команде у конзолу. Најпогоднији начин да то урадите је на Линук-у.

Први кораци

Сет лучки радник Доцкер цомпосе

Структура фолдера

Правимо 2 фолдера за клијентске и серверске апликације. Датотека са екстензијом .имл је конфигурација Доцкер Цомпосе, где су контејнери апликације дефинисани и повезани.
Доцкер-цомпосе.имл:

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 сервиса: за НодеЈС, МонгоДБ и за статичке у Вуе-у. Додато за повезивање клијента са сервером зависи од сервера. Да бисте повезали МонгоДБ са серверским АПИ-јем, користите линкови монго. Сервер, клијент, монго - називи услуга.

ВуеЈС клијент

У фасцикли /клијент Апликација је заснована на ВуеЈС-у. Апликација је креирана помоћу Вуе Цли. Приликом прављења слике, клијентска апликација је уграђена у скуп статичких датотека у фасцикли /дист. Доцкерфиле описује скуп команди за прављење слике:

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"]

Имајте на уму да се пацкаге.јсон копира и инсталира одвојено од осталих пројектних датотека. Ово се ради из разлога перформанси, тако да ће садржај директоријума /ноде_модулес бити кеширан када се поново прави. Свака командна линија се посебно кешује.

Коначно, када се контејнер покрене, команда се извршава npm run dev. Ова команда је описана у пацкаге.јсон:

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

Да бисте покренули датотеке из фасцикле /дист, инсталиран глобално http-server, а у зависностима од развоја пакет spa-http-serverтако да Вуе рутер ради исправно. Ознака --пусх-стате преусмерава на индек.хтмл. Додата је заставица -ц са вредношћу од 1 секунде хттп-сервер није кеширао скрипте. Ово је пробни пример на правом пројекту боље је користити нгинк.

У Вуек продавници креирамо поље apiHost: 'http://localhost:3000', где је регистрован НодеЈС Апи порт. Клијентски део је спреман. Сада сви захтеви од клијента назад иду на овај УРЛ.

НодеЈС серверски АПИ

У фасцикли /server Креирај сервер.јс и Доцкерфиле:

FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

В сервер.јс назначено урл за базу података 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 контејнера: сервер, клијент, монго. За НодеЈС сервер, можете да конфигуришете поновно учитавање тако што ћете га повезати са корисничким фолдером. И клијент који је у развоју треба да се покрене локално са врућим поновним учитавањем, одвојено сервер и монго. Да бисте покренули посебну услугу, само наведите њено име docker-compose up client. Не заборавите да то урадите понекад prune и брисање контејнера, мрежа и слика ради ослобађања ресурса.

Можете видети цео код овде. Пројекат је још у развоју.

Извор: ввв.хабр.цом