Node.js может взаимодействовать с фронтендом разработанным в React посредством HTTP запросов. Во время разработки часто используются разные порты (например, React dev server на порту 3000 и Node.js на порту 8080 или 80), но для продакшн сборки обычно используется один порт.
### Организация процесса разработки и продакшена
1. **Разработка:**
- Вы можете продолжить использование созданного приложения React на порту 3000 и Node.js на другом порту.
- Чтобы во время разработки запросы от вашего приложения направлялись на ваш API на Node.js, вы можете использовать прокси. В `package.json` вашего React проекта можно добавить поле `"proxy": "http://localhost:ВАШ_ПОРТ_NODE"`. Это позволит React приложению автоматически перенаправлять API запросы на ваш сервер Node.js.
2. **Продакшн:**
- Ваш сервер Node.js будет также отвечать за сервирование статических файлов сборки React (HTML, CSS, JS).
- В вашем Node.js приложении используйте middleware типа Express.static для обслуживания статических файлов из папки `build`.
Пример кода для Express.js сервера, который отправляет статические файлы и поддерживает клиентский роутинг React:
```javascript
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build'))); // путь к вашей папке build
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 80; // Используем 80 порт для продакшена
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
```
### После использования `npm run build`
Когда вы создаете продакшн версию вашего React приложения потому команду `npm run build`, создается папка `build` с оптимизированными файлами. Вам нужно сконфигурировать ваш Node.js сервер так, чтобы он мог обслуживать эти файлы, как показано в примере кода выше.
### Туториалы и ресурсы
- **Документация Create React App**: Там есть раздел о [развертывании](https://create-react-app.dev/docs/deployment/), который обсуждает различные варианты развертывания, включая Node.js сервера.
- **Full Stack Open**: Онлайн курс, который включает в себя проекты, работающие с React и Node.js: [Full Stack Open](https://fullstackopen.com/en/).
- **YouTube**: На YouTube есть множество учебных роликов, где показано, как развернуть полноценные приложения с React и Node.js. Попробуйте поискать туториалы с запросом "React Node.js production deployment".
Важно также использовать переменные окружения для управления конфигурацией между разработкой и продакшн environments, и обеспечить надлежащее управление зависимостями и версиями для стабильности вашего приложения.