Приложение React в Docker

Создание приложения React

Для чистоты эксперимента создадим простое приложение hello world на react, для этого будем использовать Create React App (CRA) — это инструмент для создания пустого приложения React с помощью одной команды в терминале.

Помимо того, что он работает «из коробки», дополнительным преимуществом является единая структура для приложений React. Также предоставляется готовый скрипт сборки и сервер для разработки.

Используем npm для глобальной установки Create React App (CLI):

npm install -g create-react-app

Чтобы создать проект ReactJS, нужно просто выполнить команду:

npx create-react-app hello-world

Это создаёт все необходимые нам файлы, папки и библиотеки, а также автоматически настраивает все компоненты, чтобы мы могли сразу приступить к работе с React.

Как только Create React App завершит загрузку всех необходимых пакетов, модулей и скриптов, он настроит webpack, и у нас появится новая папка с файлами проекта «Hello, world».

Мы видим три вложенные папки верхнего уровня:

/node_modules: Здесь находятся все внешние библиотеки, используемые для сборки приложения React. Мы не должны изменять какой-либо код в этой папке, так как это будет изменением сторонней библиотеки, и наши изменения будут перезаписаны при следующем запуске команды npm install.

/public: здесь хранятся ресурсы, которые не скомпилированы или не генерируются динамически. Это могут быть статические ресурсы, такие как логотипы или файл robots.txt.

/src: Там, где мы будем проводить большую часть времени.

Можно попробовать запустить и проверить работу приложения:

cd hello-world
npm start

Создание Dockerfile для React

После того, как у нас готовое рабочее приложение на React, можно приступить к его деплою в Docker, для этого создадим Dockerfile со следующим содержимым:

FROM node:13.12.0-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./
RUN npm install

COPY . ./

CMD ["npm", "start"] 

Чтобы ускорить создание контейнера Docker, обязательно добавьте в наш проект файл 
.dockerignore, чтобы исключить такие файлы, как node_modules, из контекста Docker.

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

Создание Docker образа с приложением на React

Создадим образ на основе Dockerfile

docker build -t hello-world:latest .

Запуск приложения React в Docker

docker run -dp 3000:3000 --name hello-world hello-world:latest

Пробуем запустить приложение в браузере: