Блог о веб-разработке

Используем Docker для разработки и развертывания React-приложений. Часть 1.

July 21, 2019

Я не являюсь экспертом в DevOps, данный материал предназначен для новичков и может использоваться в ознакомительных целях.

Я планирую серию статей, в которых постараюсь раскрыть следующие темы:

  1. Docker для разработки React-приложения
  2. Docker для развертывания React-приложения + Nginx для раздачи статики
  3. CI использованием Jenkins
  4. CD c использованием Jenkins

Это первая часть, в которой мы разберемся с тем как настроить окружение для разработки с Docker + React

Вступление

Все началось с того, что однажды на рабочем проекте потребовалось обновить зависимости. После долгих мучений я наконец-то запушил свой коммит в репозиторий и отправился к нашему девопсу, чтобы попросить задеплоить сборку из jenkins на тестовый сервер. Ну и как вы уже, наверное, догадываетесь девопсу этого сделать не удалось, потому что на сервере с jenkins стояла node.js другой версии и закешировались старые версии библиотек. Я бы скорее всего решил эту проблему, но на следующий рабочий день меня переводили на другой проект.

Ну собственно я к чему, используя docker, мы точно бы не имели этих проблем, и вот почему:

  1. Единое окружение локально и на сервере
  2. Воспроизводимость

Поэтому я решил немного раскурить Docker и поделиться полезной информацией о том как его использовать для разработки и деплоя.

Репозиторий с итоговым кодом для этой статьи

Предпологается что на вашей машине уже установлено:

  1. Docker v18.09.2
  2. Create React App v3.0.1

Создание проекта

create-react-app dockerized-react
cd dockerized-react

Напишем наш Dockerfile для создания образа

Dockerfile

# Берем node.js v8 в качестве родительского образа
FROM node:8
# Устанавливаем рабочую директорию
WORKDIR /app
# Копируем файлы yarn.lock и package.json в рабочую директорию
COPY package.json yarn.lock /app/
# Устанавливаем зависимости
RUN yarn install
# Открываем порт 3000
EXPOSE 3000
# Запускаем React-приложение после запуска контейнера
CMD ["yarn", "start"]

Добавим в .dockerignore директории/файлы, которые не должны попасть в образ

.dockerignore

.git
node_modules
build

Создание образа

docker build -t dockerized-app:dev .

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

docker run -it -v ${PWD}:/app -v /app/node_modules -p 3001:3000 -e CHOKIDAR_USEPOLLING=true dockerized-app:dev

Для Windows

docker run -it -v %cd%:/app -v /app/node_modules -p 3001:3000 -e CHOKIDAR_USEPOLLING=true dockerized-app

Давайте разберемся для чего и какие аргументы мы передаем

  1. “-it” - интерактивный режим
  2. “-v ${PWD}:/app” - монтируем текущую рабочую директорию в директорию /app docker-контейнера
  3. “-v /app/nodemodules” - используем nodemodules из контейнера
  4. “-p” - сопоставляем порт docker-контейнера порту на хост системе
  5. “-e CHOKIDAR_USEPOLLING=true” - устанавливаем переменную окружения для принудительного слежения webpack за нашим томом.

Осталось открыть приложение в браузере http://localhost:3001/

Готово, теперь webpack отслеживает изменения файлов и изменив код в каком-либо файле мы сможем увидеть результат в браузере.

В следующей статье мы будем разбираться с тем подготовить окружение для развертывания Docker + React


Ренат Рысаев

Персональный блог Рената Рысаева

Я пишу о интересных мне технологиях в веб-разработке