При работе в производстве приложение React представляет собой простой HTML, CSS и JavaScript.Эти файлы отправляются с вашего сервера клиенту по запросу так же, как запросы / ответы обрабатываются для любой веб-страницы.Есть несколько шагов, которые необходимо выполнить, прежде чем ваше приложение React будет готово к производству
1: создание производственной сборки
Сначала необходимо создать производственную сборкувашего приложения.Этот процесс берет все ваши отдельные файлы .js или .jsx и объединяет их в один уменьшенный файл, и то же самое для .css.Затем ваш index.html обновляется, чтобы включить link для CSS и script для JS.Это сделано для того, чтобы отправлять нужно только три файла, а не 10 или 100, которые существуют в разработке.
Если вы использовали create-react-app для запуска приложения, вы можете использовать команду:
npm run build
чтобы сделать это.В противном случае вам нужно установить webpack , а затем запустить:
node_modules/.bin/webpack --config webpack.prod.js --mode production
(который вы, возможно, захотите добавить в качестве сценария для package.json).
См. Реагирование: Оптимизация производительности для получения дополнительной информации.
2.Обслуживание вашего приложения
Теперь на вашем сервере должен быть маршрут для вашего приложения, и когда он получает запрос по этому маршруту, сервер должен ответить, отправив index.html из вашего каталога client/build/ (где client/ - это каталог приложения React.
Вот пример с Node / Express в качестве сервера (в app.js):
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname), 'client', 'build', 'index.html');
});
Обратите внимание, что это простоспособ отправки статического файла с использованием Node и может быть легко сделан с любого сервера.
Дополнительно
Вы упомянули, что хотите отправить формы вместе с заявкой.Если ваши маршруты для приема запросов POST совпадают с маршрутами, на которых находятся формы (например, форма находится на /form, а сервер ожидает POST на /form), вы можете просто использовать отправку HTML-формы по умолчанию.Однако это не лучший способ сделать что-либо при использовании React, потому что тогда маршрутизация будет контролироваться вашим сервером, а не React.Вместо этого вам следует использовать какой-то метод AJAX для отправки формы.
Поскольку ваш сервер теперь обслуживает ваше приложение React (а не React, обслуживающий себя в процессе разработки), вы можете просто сделать относительные запросы, и эти запросы будутбыть сделан на ваш сервер.Например, запрос (с использованием API выборки):
const models = await fetch('/api/models');
По умолчанию будет your_host/api/models.