Docker для фронта — как с ним работать

~4 минуты

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

Docker для фронта — как с ним работать главное изображение

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

.env
Dockerfile
docker-compose.yml
Makefile
Билд
Запуск
Выключение
.dockerignore
Проблемы

Мы сейчас пилим один проект и у нас регулярно возникает такая ситуация, что из трех разработчиков обязательно у кого-нибудь что-нибудь не работает после мержа веток — и все из-за разных версий нод на машинах, или каких-то нюансов с архитектурой процессора (у меня 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 и пробовать сбилдить и запускать.

Спасибо за внимание =).