Размещение React-приложения на VPS сервере может быть немного сложнее, чем размещение статичного HTML-сайта, но это вполне выполнимо. Вот пошаговая инструкция, как это сделать:
### 1. Подготовка вашего React-приложения
Перед тем как загружать файлы на сервер, убедитесь, что ваше React-приложение готово для продакшн-развертывания:
1. **Создание сборки**: В папке вашего проекта выполните команду:
```bash
npm run build
```
Эта команда создаст папку `build`, в которой будут находиться статические файлы вашего приложения, готовые для развертывания.
### 2. Загружайте файлы на VPS
Теперь вам нужно загрузить сгенерированную сборку на ваш сервер, а не файлы из папки `public`.
1. Используйте **FileZilla** или другой FTP-клиент, чтобы подключиться к вашему VPS.
2. Загружайте содержимое созданной папки `build` на сервер в директорию:
```
/var/www/ваше-доменное-имя
```
### 3. Настройка веб-сервера
На сервере вам нужен веб-сервер, чтобы обслуживать ваши статические файлы. Обычно используются Nginx или Apache. Я рекомендую использовать Nginx, так как он более производителен для статического контента.
#### Установка Nginx
Если у вас еще не установлен Nginx, вы можете установить его с помощью следующих команд (для Ubuntu):
```bash
sudo apt update
sudo apt install nginx
```
#### Настройка Nginx
После установки вам нужно настроить Nginx для обслуживания вашего React-приложения. Откройте файл конфигурации Nginx, например:
```bash
sudo nano /etc/nginx/sites-available/default
```
И замените его содержимое следующим:
```nginx
server {
listen 80;
server_name ваше-доменное-имя; # Укажите ваше доменное имя
root /var/www/ваше-доменное-имя; # Укажите путь к вашей build папке
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html; # Редирект на index.html для клиентских маршрутов
}
location ~ /\.ht {
deny all; # Запрет доступа к скрытым файлам
}
}
```
Сохраните изменения и закройте редактор.
### 4. Перезапуск Nginx
Для применения конфигурации выполните команду:
```bash
sudo systemctl restart nginx
```
### 5. Проверка
Теперь вы можете перейти на ваше доменное имя и проверить, работает ли ваше React-приложение. Если вы все сделали правильно, вы должны увидеть ваш сайт без ошибок.
### 6. Дополнительные рекомендации
- **Убедитесь, что у вас есть действующий SSL-сертификат**, если вы хотите, чтобы ваш сайт использовал HTTPS. Вы можете легко установить бесплатный сертификат от Let's Encrypt.
- **Мониторинг и обслуживание**: Постоянно следите за работой вашего сервера и обновляйте зависимости вашего приложения, чтобы поддерживать безопасность и производительность.
Если у вас возникнут дополнительные вопросы или трудности, дайте знать!