Я работаю фуллстек-разработчиком, но стараюсь больше заниматься фронтом и прохожу курс "Фронтенд-разработчик".
Мы сейчас пилим один проект и у нас регулярно возникает такая ситуация, что из трех разработчиков обязательно у кого-нибудь что-нибудь не работает после мержа веток — и все из-за разных версий нод на машинах, или каких-то нюансов с архитектурой процессора (у меня MacBook М1) или ОС, у кого-то Windows, у кого-то Ubuntu или MacOS.
И было принято ответственное решение как-то все привести к единому виду, чтобы у всех все работало без проблем.
Первое же, что пришло в голову — это Docker.
Docker запускает одну и ту же виртуальную среду разработки на любых операционных системах и никак не связан с версиями ноды на локальных машинах, все устанавливается внутри контейнера докера.
Как мы это сделали в двух словах, потом примеры конфигов.
- Сделать образ на базе которого будут запускаться контейнеры
- Настроить контейнеры
Образ (image) — это как флешка с установочной системой, а после установки системы запускается компьютер — это уже контейнер (container).
Структура:
project
|- /app
|- Dockerfile
|- docker-compose.yml
|- dockerignore
|- Makefile
|- .env
/app — внутри папки app находятся все файлы проекта, это как папка с проектом локально, внутри которого находятся package.json, /src, node_modules и так далее, все, что нужно для разработки
Dockerfile — инструкции для сборки образа, билдится один раз для создания контейнеров
docker-compose.yml — инструкции для запуска контейнера, имя, порты, папки и все такое
Makefile — скрипты запуска и билда
.env — переменные для изменения образа докера или контейнера
В данном случае образ собирается из официального образа Node.js 18
.env
IMAGE_NAME=frontend
CONTAINER_NAME=webapp
PORT=4444
Dockerfile
FROM node:18 # версия ноды, можно поставить любую необходимую, указав ее версию 16.4.0, например
WORKDIR /home/app
COPY ./app . # что куда копируем ./app - папка с проектом, . - рабочая директория
# что надо параллельно установить
RUN apt-get update && apt-get install -y \
nano \
mc \
zsh
# установка ZSH — оболочка для терминала, очень удобная
RUN sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# обновляем npm
RUN npm install -g npm@8.12.1
# проверка на ошибки — отключена
RUN export DOCKER_SCAN_SUGGEST=false
# порт для внешнего доступа
EXPOSE ${PORT}
docker-compose.yml
version: '3'
services:
web:
build: . # откуда брать инструкции для билда
image: ${IMAGE_NAME} # название образа
container_name: ${CONTAINER_NAME} # имя контейнера
restart: always # перезагрузка, если что-то пошло не так
stdin_open: true
tty: true # для открытия терминала после старта
volumes:
- "./app:/home/app" # проброс папок, что и куда разделяется двоеточием, внутри будет запущена урезанная версия Ubuntu с установленной Nodejs, структура папок точно такая же, как в обычной Ubuntu
ports:
- ${PORT}:${PORT} # какой порт показывать снаружи
Makefile
################ Docker commands ################
# создание образа
build:
docker-compose build --no-cache
# создать контейнер
up:
docker-compose up -d; docker exec -it webapp zsh || winpty docker exec -it webapp zsh
# выключить контейнер
down:
docker-compose down
# зайти в терминал контейнера, внутри контейнера урезанная Ubuntu, и все те же команды
bash:
docker exec -it webapp zsh || winpty docker exec -it webapp zsh
Читайте также: Как настроить маппинг портов между хостом и Docker-контейнером
Билд
В терминале, в папке, где лежит docket-compose.yml, т.е в корне папки project — make build
Запуск
В том же терминале — make up. После этой команды откроется терминал контейнера, т.е терминал той урезанной Ubuntu, у нее нет доступа к ресурсам локальной машины. Билд может происходить долго, в зависимости от мощности вашей машины и скорости интернета.
➜ app
Далее устанавливаем внутри этого виртуального контейнера пакеты, у меня уже есть там файл package.json с пакетами для Vite.
npm install
Далее запускаем сервер той командой, которая у вас в package.json для запуска сервера.
Выключение
➜ app exit # выкинет из виртуального терминала
# чтобы опять войти в терминал рабочего контейнера — make bash внутри папки project
make down # контейнер выключается — это как комп вырубить
.dockerignore
app/.parcel-cache/
app/node_modules/
app/dist/
docker-compose.yml
Dockerfile
.gitignore
.DS_Store
README.md
.idea/
.git/
Чтобы это все работало, надо сначала установить Docker на вашу тачку =).
Проблемы
Сборщик Parcel не работает на Windows внутри докера, причина известная, но решения пока нет. Народ пишет, что это проблема связи между локальной машиной WSL и Parcel внутри контейнера. При этом на MacOS и Ubuntu таких проблем нет, там все работает отлично.
Знаю точно, проверено, что сборщик Vite работает на всех ОС в контейнера и browser-sync отрабатывает как надо.
Webpack тоже как-то через раз работает.
Для установки докера на винду нужно проделать дополнительные танцы с бубном, установить Git Bash + WSL и пробовать сбилдить и запускать.
Спасибо за внимание =).
