5

Новичок в Docker. Основной мой язык - TypeScript, потому мои FullStack-приложения разделены на исходный код и выходной JavaScript.

Я владею такими инструментами, как gulp и webpack, которые могут пересобрать проекты по мере внесения изменений в код (т. н. инкрементальная сборка), но мне непонятно, как заставить Docker видеть эти изменения.

В комментарии к вопросу Какие существуют походы для интеграции Docker-контейнера и инкрементальной сборки FullStack-проекта с серверной частью на NodeJS? мне порекомендовали такой подход:

Примонтировать папку с собираемым проектом в докер и дергать в докере команду на перезапуск сервера последним шагом при сборке.

Я не совсем понял, идёт ли речь о volum-ах, но в ответе на вопрос Какова правильная интерпретация сообщения “Creating network ”XXX“ with the default driver” при запуске Docker-а? мне порекомендовали их не использовать:

Cкорее все что указано в volume не нужно монтировать в контейнер, а указываться в Dockerfile через COPY.

(Оригинал)

Для того, чтобы попросить Вас показать реализацию одной из выше приведённых концепций, я взял такую структуру:

введите сюда описание изображения

  • 00-Source - исходные файлы
  • 01-DevelopmentBuild - локальная сборка

Пока не знаю, как будет выглядеть окончательная структура проекта (консультируюсь по этому поводу в вопросе Являются ли папки с исходным и выходным кодом “приложением” в проектах использованием Docker?), но для конкретики начну с этой.

Начальный docker-compose.yaml:

version: "3"

services:
  webpack:
    build: ./
    volumes:
      - ./00-Source:/Application/00-Source
      - ./01-DevelopmentBuild:/Application/01-DevelopmentBuild
      - ./.eslintignore:/Application/.eslintignore
      - ./.eslintrc.yaml:/Application/.eslintrc.yaml
      - ./.mocharc.yaml:/Application/.mocharc.yaml
      - ./package.json:/Application/package.json
      - ./tsconfig.json:/Application/tsconfig.json
    ports:
      - 5000:5000

Пока что единственный Dockerfile

FROM node:12.4

WORKDIR /Application

RUN npm i

CMD [ "npm", "run", "'Incremental development build'" ]

Как в данном примере можно организовать инкрементальную сборку?

Важный момент

Не знаю, сколько времени нужно на создание нового контейнера и его запуск, но я не думаю, что это займёт пару секунд. Поскольку уже второй раз вижу в ответах предложение создавать новый контейнер при обновлении кода и ещё какие-то манипуляции с системой контроля версий проводить, то на конкретном примере поясню, что мне надо:

  1. Добавил новое CSS-свойство -> сохранил файл -> стили тут же пересобрались -> изображение в браузере обновилось
  2. Удалил это CSS-свойство -> сохранил файл -> стили тут же пересобрались -> изображение в браузере вернулось к предыдущему

Без Dockera с помощью Gulp или Webpack и соответствующих плагинов каждый из этих процессов занимает 2-5 секунд для маленьких проектов, а при хорошей настройке время цикла будет порядка 10 секунд для крупных проектов. Не соврем понял, зачем мне предлагают создание новых контейнеров и манипуляции с системой контроля версий, но я так думаю, там уже этот цикл будет занимать уже минуты. С точки зрения высокотехнологической веб-разработки ждать по несколько минут, чтобы увидеть в браузере результат добавления нового CSS-свойства неприемлемо.

И да, конечно я говорю про режим локальной разработки, а что касается деплоя тестовой и продакшен-сборки, то там сделаю всё что потребуется: и управление системой контроля версий, и создание контейнеров, и CI.

Запрошенное уточнение

В этом вопросе полагается, что CI/CD собирается на стороне разработчика, а заказчик может только пользоваться готовым продуктом.

4
  • Тут стоило бы уточнить, что никакого CI/CD у вас нет, а докер используется только для создания окружения в котором запускается код при разработке. 13 окт 2020 в 8:43
  • Объясните, с какой целью вы хотите использовать докер для разработки? А именно, какую проблему вы пытаетесь решить запуская, собственно, разрабатываемое приложение в докере? Вопрос не о сервисах типа БД, которые нужны приложению, это как раз понятно и тут докер очень хорошо подходит. Вопрос именно о самом приложении. 17 окт 2020 в 11:49
  • @RomanKonoval "С какой целью вы хотите использовать докер для разработки?" - 1) чтобы использовать базу данных и другие технологии без их локальной установки на компьютер 2) чтобы девелопмент и продакшен сборка работали в одном и том же окружении (а иначе как я буду уверен, что на продакшене приложение будет работать так же хорошо, как отлаженная локальная сборка, если девелопмент сборка работает от локального Node.js, а продакшен - из контейнера?). "А именно, какую проблему вы пытаетесь решить запуская, собственно, разрабатываемое приложение в докере?" - те же причины. 17 окт 2020 в 12:22
  • @RomanKonoval "Вопрос именно о самом приложении" - в данном случае идёт речь об обычном full-stack приложении, для отладки функционала которого нужна база данный в условиях локальной разработки. Не мне Вам объяснять, с какими проблемами сопряжено использование локально установленной базы данных. 17 окт 2020 в 12:29

2 ответа 2

3
+50

Сразу оговорюсь, что я слабо знаком с backend разработкой на js, по-этому привожу пример для клиентской части. Главная ведь суть вопроса в том, как в докер контейнере увидеть изменения, и пример с клиентской частью, все же лучше чем без примера. В общем, надеюсь, что ответ будет полезен.

Наиболее практичный вариант (очень подробно описан тут, правда серверная часть там на php, но все равно очень рекомендую почитать. Ниже я привожу сильно упрощенный, но рабочий код) выглядит следующим образом.

Нужно создать отдельный контейнер (назовем его buildchain-контейнер), который будет использоваться чисто для сборки проекта как с нуля так и в инкрементальном режиме. Т.е. для запуска приложения нужно использовать отдельный контейнер (назовем его app). В примере ниже в нем запущен nginx и он использует результат работы buildchain контейнера.

Исходники в buildchain нужно добавлять именно через volume для того, чтобы не нужно было в режиме разработки пересобирать контейнер при каждом изменении файлов. Так конечно будет работать медленней чем на локальном хосте, но это неизбежная плата (для большого проекта она может быть довольно существенной, по крайней мере для MacOS, про другие ОС не скажу) за то, что не нужно засорять хост средствами разработки, у всех одинаковые версии и т.д.

Он может находится в ./docker-config/buildchain/Dockerfile и выглядит так:

FROM node:12.4

# тут инсталируем yarn

WORKDIR /project

RUN cd /project && yarn install

CMD yarn run build

./docker-config/buildchain/package.json:

{
  ...
  "scripts": {
    "watch": "npm-watch",
    "build": "yarn run build-css && yarn run build-js",
    "build-css": "./node_modules/.bin/node-sass --output-style compressed ./src/assets/css/app.scss > ./src/web/assets/css/app.css",
    "build-js": "./node_modules/.bin/babel ./src/assets/js/app.js --presets es2015 --out-file ./src/web/assets/js/app.js"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "node-sass": "^4.10.0",
    "npm-watch": "^0.6.0"
  },
  "watch": {
    "build-css": {
      "patterns": [
        "src/assets/css"
      ],
      "extensions": "scss",
      "quiet": false
    },
    "build-js": {
      "patterns": [
        "src/assets/js"
      ],
      "extensions": "js",
      "quiet": false
    }
  }
}

Запускать контейнер удобно из docker-compose. Для этого в docker-compose.yml нужно добавить:

services:
  nginx:
      build:
        context: .
        dockerfile: ./docker-config/nginx/Dockerfile
      ports:
          - 8080:80
      volumes:
          - ./src/web:/var/www/html/web

  buildchain:
      build:
        context: .
        dockerfile: ./docker-config/buildchain/Dockerfile
      volumes:
          - node-modules:/project/node_modules
          - ./docker-config/buildchain/package.json:/project/package.json
          - ./src:/project/src
      command: yarn run watch

volumes:
  node-modules:

Общая структура проекта:

▾ docker-config/
  ▾ buildchain/
      Dockerfile
      package.json
  ▾ nginx/
      Dockerfile
      default.conf
▾ src/
  ▾ assets/
    ▸ css/
    ▸ js/
  ▾ web/
    ▾ assets/
      ▸ css/
      ▸ js/
      index.html
  docker-compose.yml

Теперь при запуске docker-compose up поднимается и buildchain и nginx. Изменения в файлах в src через volume попадают в buildchain и автоматически собираются. nginx получает их опять же через volume и сразу же видит.

1
1

Следует уточнить, что ключевым в ответе будет понимание с чьей стороны происходят процессы CI/CD, на стороне Заказчика или на стороне Разработчика. Также важно понимать как поставляется образ - путем предоставления Dockerfile или же образа в registry.

В любом случае, каждый раз, когда обновляется код нужно формировать новый образ (контейнер). Из Вашего примера - код содержится в монтируемых каталогах, что не всегда удобно. Можно попробовать добавить в Dockerfile команды git pull из Вашего репозитория, чтобы код при сборке был всегда актуальным.

6
  • Благодарю Вас за ответ! "Следует уточнить..." - обновил в вопрос. "Также важно понимать как поставляется образ" - честно говоря, пока о поставке образа не думаю - рано. Могу только сказать, что я буду искать решение без использования сторонних оналйн-сервисов, в особенности GitHub. "В любом случае, каждый раз, когда обновляется код нужно формировать новый образ (контейнер)" - сколько же тогда времени тогда пройдёт до перезагрузки страницы браузера после добавления одной строки кода? Хотелось бы, чтобы это было порядка 5-10 секунд, как без докера. 12 окт 2020 в 7:25
  • "Можно попробовать добавить в Dockerfile команды git pull из Вашего репозитория, чтобы код при сборке был всегда актуальным." - пока непонятно, зачем. Я же буду коммитить и пушить каждый console.log() в репозиторий. Насчёт этого я обновил вопрос. 12 окт 2020 в 7:28
  • Вы используете докер для чего?
    – GrayHoax
    13 окт 2020 в 8:31
  • Рассмотрите вариант использования volumes в докере. При изменении файлов у вас на диске в контейнере уже будут эти изменения за счет монтирования volume (с хостовой машины)
    – GrayHoax
    13 окт 2020 в 8:32
  • У ОПа нет CI/CD. 13 окт 2020 в 8:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.