Докеризация приложения React дает множество преимуществ, включая упрощенное развертывание, улучшенную масштабируемость и улучшенную согласованность.

Этот пост в блоге проведет вас через процесс контейнеризации вашего приложения React с помощью Docker, а также продемонстрирует вам мощь контейнеров и откроет целый мир возможностей для вашего рабочего процесса разработки.

Давайте погрузимся и изучим предварительные условия, шаги и лучшие практики, связанные с докеризацией вашего приложения React.

Предпосылка

Чтобы следовать этому руководству, вам понадобятся:

Настроить проект

Чтобы создать этот проект, вам нужно использовать npx. Если по какой-то причине он недоступен, установите или обновите его следующим образом:

$ npm install -g npx

npx упрощает установку и управление зависимостями, размещенными в реестре npm. Это средство запуска пакетов npm — помогает запускать пакеты без явной установки.

Теперь вы можете создать приложение для реагирования с помощью npx:

$ npx create-react-app my-react-app

Введите в папку вашего проекта

$ cd my-react-app

Удалите папку node_modules в корне вашего проекта, она вам не понадобится в вашей хост-среде, потому что мы будем устанавливать зависимости во время сборки образа.

$ rm -rfv node_modules

Создайте Dockerfile

Добавьте Dockerfile в корень проекта:

FROM node:16-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH="/app/node_modules/.bin:$PATH"

# install app dependencies
COPY package.json ./
COPY package-lock.json ./

RUN npm install
RUN npm install [email protected] -g

# add app
COPY . ./

# start app
CMD ["npm", "start"]

📢 ‧ Вы можете добавить подстановочный знак — молчание к команде установки npm

Создайте файл .dockerignore и добавьте эти строки

node_modules
.dockerignore

Это ускорит процесс сборки Docker, поскольку наши локальные зависимости внутри каталога node_modules не будут отправляться демону Docker.

Создайте и пометьте образ Docker:

$ docker build -f react.dockerfile -t react-app:latest .

Запустите контейнер

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

$ docker run \\
    -it \\
    -d \\
    --rm \\
    -v ${PWD}:/app \\
    -v /app/node_modules \\
    -p 3000:3000 \\
    -e CHOKIDAR_USEPOLLING=true \\
    react-app:latest

📢 ‧ Если вы столкнулись с ошибкой ENOENT: нет такого файла или каталога, откройте ‘/app/package.json’, вам может потребоваться добавить еще один volume: -v /app/package.json

Что тут происходит?

  1. Команда docker run создает и запускает новый экземпляр контейнера из только что созданного образа.
  2. -it запускает контейнер в интерактивном режиме.
    Зачем это нужно — Начиная с версии 3.4.1, react-scripts завершает работу после запуска (если не указан режим CI), что приводит к завершению работы контейнера.
    > Таким образом нужен интерактивный режим.
  3. -rm удаляет контейнер и тома после выхода из контейнера.
  4. -v ${PWD}:/app монтирует код в контейнер в /app.
  5. Поскольку мы хотим использовать контейнерную версию папки node_modules, мы настроили другой том: -v /app/node_modules. Теперь вы сможете удалить локальный вариант node_modules.
  6. -p 3000:3000 предоставляет порт 3000 другим контейнерам Docker в той же сети (для связи между контейнерами), а порт 3001 — хосту.
  7. Наконец, e CHOKIDAR_USEPOLLING=true включает механизм опроса через chokidar (который охватывает fs.watch, fs.watchFile и fsevents), чтобы работала горячая перезагрузка.

Откройте в браузере http://localhost:3000/, и вы должны увидеть приложение.

Попробуйте внести изменения в компонент App в редакторе кода. Вы должны увидеть горячую перезагрузку приложения. ⚡️

Использование Docker Compose

Более распространенный (более чистый) способ избежать использования длинной команды для запуска контейнера — использовать docker compose. Поэтому добавьте docker-compose.yml в корень вашего проекта.

services:
  react-app:
    build:
      context: .
      dockerfile: react.dockerfile
    image: simple-react-app:latest
    container_name: rect-app
    volumes:
      - type: bind
        source: .
        target: /app
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true
    restart: unless-stopped

Обратите внимание на тома → Без анонимного тома '/app/node_modules' каталог node_modules был бы перезаписан при монтировании каталога хоста во время выполнения.

Другими словами, это произойдет:

  • Этап сборки — в образе создается каталог node_modules.
  • Этап запуска — Текущий каталог монтируется (привязка) в контейнер, перезаписывая node_modules, которые были установлены во время сборки.

Создайте образ и запустите контейнер:

$ docker-compose up -d --build

Убедитесь, что приложение запущено в браузере, и снова протестируйте горячую перезагрузку ⚡️.

📬・Спасибо, что прочитали

Вы можете подписаться на меня в Твиттере или подписаться на мою рассылку новостей ниже, чтобы не пропустить предстоящие сообщения, а также советы и приемы, которыми я иногда делюсь в этом блоге.

Заворачивать

В этом руководстве мы рассмотрели предварительные условия для Dockerizing приложения React, шаги, связанные с созданием Dockerfile, и способы использования Docker Compose для упрощения процесса запуска вашего контейнера.

Вы заполняете весь фрагмент кода этого руководства на моем github здесь.

Следуя этим шагам, вы будете на пути к тому, чтобы воспользоваться многими преимуществами, которые может предложить контейнеризация.