Для настройки Nginx для обслуживания нескольких статических сайтов, разработанных на React, и чтобы ваше новое React-приложение, находящееся в `/home/apps/smetapdf/build`, было доступно по адресу `http://<ваш_vps_ip>/smetapdf`, вам необходимо выполнить следующие шаги:
1. **Убедитесь, что Nginx установлен**. Если он еще не установлен, вы можете установить его с помощью пакетного менеджера вашей системы. Например, для Ubuntu это можно сделать командой:
```bash
sudo apt update
sudo apt install nginx
```
2. **Создайте или откройте файл конфигурации Nginx**. Обычно файлы конфигурации находятся в `/etc/nginx/sites-available/`. Вы можете создать новый файл для вашего React-приложения:
```bash
sudo nano /etc/nginx/sites-available/smetapdf
```
3. **Настройте сервер для вашего приложения**. В файле конфигурации добавьте следующее:
```nginx
server {
listen 80;
server_name your_vps_ip; # Укажите ваш IP-адрес или доменное имя
location /smetapdf {
alias /home/apps/smetapdf/build;
try_files $uri $uri/ /smetapdf/index.html;
}
location ~ ^/smetapdf/.*\.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public";
}
location / {
return 404; # Возвращаем 404 для всех других запросов
}
}
```
Основные моменты, которые вы должны учесть:
- В директиве `alias` укажите путь к папке `build` вашего React-приложения.
- `try_files $uri $uri/ /smetapdf/index.html;` позволяет Nginx правильно обрабатывать маршрутизацию на стороне клиента, что важно для SPA (Single Page Application), таких как приложения на React.
4. **Создайте символическую ссылку в `sites-enabled`**. Это необходимо для активации вашей конфигурации:
```bash
sudo ln -s /etc/nginx/sites-available/smetapdf /etc/nginx/sites-enabled/
```
5. **Проверьте конфигурацию Nginx на ошибки**:
```bash
sudo nginx -t
```
6. **Перезапустите Nginx, чтобы применить изменения**:
```bash
sudo systemctl restart nginx
```
7. **Проверьте доступность вашего приложения**. Откройте браузер и перейдите по адресу `http://<ваш_vps_ip>/smetapdf`. Вы должны увидеть ваше React-приложение.
### Дополнительные рекомендации:
- Если у вас будут другие React-приложения, вы можете создать дополнительные конфигурации, аналогичные приведенной выше, изменяя соответствующие пути и маршруты.
- Рекомендуется также настроить HTTPS с помощью Let's Encrypt для безопасности вашего приложения.
Если у вас возникли какие-то вопросы или проблемы, не стесняйтесь задавать!