Как правильно настроить nginx для обслуживания нескольких статических сайтов, разработанных на React?

Как я могу обновить конфигурацию Nginx, чтобы новое React-приложение, находящееся в папке /home/apps/smetapdf (с итоговыми файлами в /home/apps/smetapdf/build), было доступно по адресу [vps ip address]/smetapdf?
  • 14 ноября 2024 г. 15:43
Ответы на вопрос 1
Для настройки 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 для безопасности вашего приложения. 

Если у вас возникли какие-то вопросы или проблемы, не стесняйтесь задавать!
Похожие вопросы