Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Я работаю фуллстек-разработчиком, но стараюсь больше заниматься фронтом и прохожу курс<a>"Фронтенд-разработчик"</a>.</p>

2 <p>Мы сейчас пилим один проект и у нас регулярно возникает такая ситуация, что из трех разработчиков обязательно у кого-нибудь что-нибудь не работает после мержа веток - и все из-за разных версий нод на машинах, или каких-то нюансов с архитектурой процессора (у меня MacBook М1) или ОС, у кого-то Windows, у кого-то Ubuntu или MacOS.</p>

3 <p>И было принято ответственное решение как-то все привести к единому виду, чтобы у всех все работало без проблем.</p>

4 <p>Первое же, что пришло в голову - это Docker.</p>

5 <h2>Содержание</h2>

6 <ul><li><a>Что такое Docker</a></li>

7 <li><a>.env</a></li>

8 <li><a>Dockerfile</a></li>

9 <li><a>docker-compose.yml</a></li>

10 <li><a>Makefile</a></li>

11 <li><a>Билд</a></li>

12 <li><a>Запуск</a></li>

13 <li><a>Выключение</a></li>

14 <li><a>.dockerignore</a></li>

15 <li><a>Проблемы</a></li>

16 </ul><h2>Что такое Docker</h2>

17 <p>Docker запускает одну и ту же виртуальную среду разработки на любых операционных системах и никак не связан с версиями ноды на локальных машинах, все устанавливается внутри контейнера докера.</p>

18 <p>Как мы это сделали в двух словах, потом примеры конфигов.</p>

19 <ol><li>Сделать образ на базе которого будут запускаться контейнеры</li>

20 <li>Настроить контейнеры</li>

21 </ol><p>Образ (image) - это как флешка с установочной системой, а после установки системы запускается компьютер - это уже контейнер (container).</p>

22 <p>Структура:</p>

23 <p>/app - внутри папки app находятся все файлы проекта, это как папка с проектом локально, внутри которого находятся package.json, /src, node_modules и так далее, все, что нужно для разработки</p>

24 <p>Dockerfile - инструкции для сборки образа, билдится один раз для создания контейнеров</p>

25 <p>docker-compose.yml - инструкции для запуска контейнера, имя, порты, папки и все такое</p>

26 <p>Makefile - скрипты запуска и билда</p>

27 <p>.env - переменные для изменения образа докера или контейнера</p>

28 <p>В данном случае образ собирается из официального образа Node.js 18</p>

29 <h2>.env</h2>

30 <p>IMAGE_NAME=frontend CONTAINER_NAME=webapp PORT=4444</p>

31 <h2>Dockerfile</h2>

32 <h2>docker-compose.yml</h2>

33 <h2>Makefile</h2>

34 <h2>Билд</h2>

35 <p>В терминале, в папке, где лежит docket-compose.yml, т.е в корне папки project - make build</p>

36 <h2>Запуск</h2>

37 <p>В том же терминале - make up. После этой команды откроется терминал контейнера, т.е терминал той урезанной Ubuntu, у нее нет доступа к ресурсам локальной машины. Билд может происходить долго, в зависимости от мощности вашей машины и скорости интернета.</p>

38 <p>Далее устанавливаем внутри этого виртуального контейнера пакеты, у меня уже есть там файл package.json с пакетами для Vite.</p>

39 <p>npm install</p>

40 <p>Далее запускаем сервер той командой, которая у вас в package.json для запуска сервера.</p>

41 <h2>Выключение</h2>

42 <h2>.dockerignore</h2>

43 <p>app/.parcel-cache/ app/node_modules/ app/dist/ docker-compose.yml Dockerfile .gitignore .DS_Store README.md .idea/ .git/</p>

44 <p>Чтобы это все работало, надо сначала установить Docker на вашу тачку =).</p>

45 <h2>Проблемы</h2>

46 <p>Сборщик Parcel не работает на Windows внутри докера, причина известная, но решения пока нет. Народ пишет, что это проблема связи между локальной машиной WSL и Parcel внутри контейнера. При этом на MacOS и Ubuntu таких проблем нет, там все работает отлично.</p>

47 <p>Знаю точно, проверено, что сборщик Vite работает на всех ОС в контейнера и browser-sync отрабатывает как надо.</p>

48 <p>Webpack тоже как-то через раз работает.</p>

49 <p>Для установки докера на винду нужно проделать дополнительные танцы с бубном, установить Git Bash + WSL и пробовать сбилдить и запускать.</p>

50 <p>Спасибо за внимание =).</p>