Это руководство предназначено для проектов, которым требуется веб-сервер 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