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

Для проектов, которым требуется только отдельное клиентское приложение React, это руководство является излишним, и следует следовать руководству по запуску приложения create-react-app².

1. Установите инструменты начальной загрузки.

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

npm install --global express-generator create-react-app
# OR
yarn global add express-generator create-react-app

2. Создайте приложение Express.

Используйте инструмент экспресс-загрузки, чтобы создать экспресс-сервер. Этот инструмент предполагает, что вы будете использовать Express для рендеринга пользовательского интерфейса с помощью механизма шаблонов, чтобы этот раздел приложения можно было удалить перед его заменой на React.

express my-server
cd my-server
# Remove the files that will be replaced by React
rm -rf public/ views/
# Install all of the dependancies
npm install
# OR
yarn

3. Создайте приложение React.

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

create-react-app client

4. Создайте образы докеров.

Создайте Dockerfile и скопируйте следующую суть.

touch Dockerfile

5. Создайте docker-compose.yml.

При локальном построении контейнеров смонтируйте папки разработки как тома, доступные только для чтения, чтобы сценарии реагирования / nodemon могли обнаруживать изменения кода.

touch docker-compose.yml

6. Установите пакет горячей перезагрузки.

Чтобы включить горячую перезагрузку сервера, установите nodemon в зависимости от разработчика.

npm install --save-dev nodemon

7. Добавьте команды запуска npm.

Прежде чем приложение можно будет построить локально, npm нужна команда запуска для клиента и сервера. Добавьте эти команды в свой package.json

"start:client": "(cd client && npm start)",
"start:server": "nodemon ./bin/www",

Наконец, проксируйте запросы от приложения React к серверу Express. Для этого добавьте в свой package.json следующее:

"proxy": "http://server:3001"

8. Создайте это

Чтобы создать контейнеры докеров, запустите docker-compose up --build, и ваше новое приложение будет доступно по адресу http: // localhost: 3000.

[1] https://expressjs.com/en/starter/generator.html
[2] https://github.com/facebookincubator/create-react-app#getting-started