Как докеризировать приложение React

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

Эта статья посвящена проектам, которые были загружены с помощью create-react-app (CRA). Если вы удалили свою конфигурацию CRA или используете собственный процесс сборки, вам необходимо соответствующим образом настроить команду npm run build.

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

Определение наших требований

CRA включает в себя встроенную систему оперативной сборки и перезагрузки, доступ к которой можно получить через npm run start. Это позволяет вам быстро повторять ваш сайт во время разработки.

При переходе к рабочей среде вам необходимо скомпилировать статические ресурсы с помощью npm run build. Это создает минимизированные пакеты HTML, CSS и JavaScript в вашем каталоге build. Эти файлы вы загружаете на свой веб-сервер.

Базовый подход к Dockerising может заключаться в локальном npm run build. Затем вы скопируете содержимое каталога build в свой образ Docker — используя базовый образ веб-сервера — и на этом закончите.

Этот подход плохо масштабируется, особенно при создании образа Docker в среде непрерывной интеграции. Процесс сборки вашего приложения не полностью инкапсулирован в сборку контейнера, так как он зависит от внешней команды npm run build. Теперь мы перейдем к более полному примеру, в котором вся подпрограмма выполняется в Docker.

Dockerfile для CRA

FROM node:latest AS build
WORKDIR /build

COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm ci

COPY public/ public
COPY src/ src
RUN npm run build

FROM httpd:alpine
WORKDIR /var/www/html
COPY --from=build /build/build/ .

Этот Dockerfile содержит все необходимое для полной контейнеризации проекта. Он использует многоэтапные сборки Docker, чтобы сначала запустить сборку React, а затем скопировать результат в контейнер сервера alpine Apache. Это гарантирует, что конечное изображение будет как можно меньше.

Первый раздел файла определяет этап сборки. Он использует официальный базовый образ Node.js. Файлы package.json и package-lock.json копируются. Затем npm ci используется для установки пакетов npm проекта. ci используется вместо install, потому что он обеспечивает точное соответствие содержимому package-lock.json.

После установки зависимостей каталоги public и src копируются в контейнер. Папки копируются после команды npm ci, потому что они, скорее всего, будут меняться гораздо чаще, чем зависимости. Это гарантирует, что сборка может в полной мере использовать кэширование слоев Docker — потенциально дорогостоящая команда npm ci не будет выполняться, если не будет package.json или package-lock Файлы .json изменяются.

Последним шагом на этом этапе сборки является npm run build. CRA скомпилирует наше приложение React и поместит результат в каталог build.

Второй этап в Dockerfile намного проще. Выбран базовый образ httpd:alpine. Он включает в себя веб-сервер Apache в образе, который весит около 5 МБ. Скомпилированные HTML, CSS и JavaScript копируются из контейнера этапа сборки в финальное изображение.

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

Используйте команду docker build для создания образа:

docker build -t my-react-app:latest .

Это создает изображение и помечает его как my-react-app:latest. Он использует Dockerfile, найденный в вашем рабочем каталоге (указанный как .).

Сборка может занять несколько минут. Последующие сборки будут выполняться быстрее, так как такие слои, как команда npm ci, будут кэшироваться между запусками.

Как только ваш образ будет создан, вы готовы его использовать:

docker run -d -p 8080:80 my-react-app:latest

Docker создаст новый контейнер, используя образ my-react-app:latest. Порт 8080 на хосте (вашей машине) привязан к порту 80 внутри контейнера. Это означает, что вы можете посетить http://localhost:8080 в своем браузере, чтобы увидеть свой проект React! Присутствует флаг -d, поэтому контейнер работает в фоновом режиме.

Переход на NGINX

В приведенном выше примере используется Apache, но вы можете легко переключиться на NGINX.

FROM nginx:alpine
COPY --from=build /build/build/ /usr/share/nginx/html

Аналогичным образом вы можете использовать альтернативные веб-серверы; поскольку CRA производит полностью статический вывод, у вас есть большая гибкость в выборе того, как будет размещаться ваш сайт. Скопируйте содержимое каталога /build/build из этапа build в каталог HTML по умолчанию выбранного вами серверного программного обеспечения.

Преимущества этого подхода

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

Более реалистично, этот образ готов к использованию с сервером CI для автоматического создания образов. Пока доступна среда Docker, вы можете преобразовать исходный код в развертываемый образ без ручного вмешательства.

При использовании многоэтапных сборок окончательный образ остается оптимизированным и должен иметь размер всего несколько мегабайт. Изображение node гораздо большего размера используется только на этапе компиляции, где необходимы Node и npm.