Докеризация приложения React дает множество преимуществ, включая упрощенное развертывание, улучшенную масштабируемость и улучшенную согласованность.
Этот пост в блоге проведет вас через процесс контейнеризации вашего приложения React с помощью Docker, а также продемонстрирует вам мощь контейнеров и откроет целый мир возможностей для вашего рабочего процесса разработки.
Давайте погрузимся и изучим предварительные условия, шаги и лучшие практики, связанные с докеризацией вашего приложения React.
Предпосылка
Чтобы следовать этому руководству, вам понадобятся:
- Установлен Докер Рабочий стол
- Базовые знания Docker CLI
- Установлен нпм
Настроить проект
Чтобы создать этот проект, вам нужно использовать 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
Что тут происходит?
- Команда
docker run
создает и запускает новый экземпляр контейнера из только что созданного образа. -it
запускает контейнер в интерактивном режиме.
Зачем это нужно — Начиная с версии 3.4.1,react-scripts
завершает работу после запуска (если не указан режим CI), что приводит к завершению работы контейнера.
> Таким образом нужен интерактивный режим.-rm
удаляет контейнер и тома после выхода из контейнера.-v ${PWD}:/app
монтирует код в контейнер в /app.- Поскольку мы хотим использовать контейнерную версию папки node_modules, мы настроили другой том:
-v /app/node_modules
. Теперь вы сможете удалить локальный вариант node_modules. -p 3000:3000
предоставляет порт 3000 другим контейнерам Docker в той же сети (для связи между контейнерами), а порт 3001 — хосту.- Наконец,
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 здесь.
Следуя этим шагам, вы будете на пути к тому, чтобы воспользоваться многими преимуществами, которые может предложить контейнеризация.