Давай запустим React-app на vps сервере и привяжем к домену. И так, я уже создал приложение в среде React-app локально и сделал build . Получил статический фронт, готовый для размещения на хостинге. Так как будущее приложение являет собой Чат, то у меня также будет back-end с базой данных, но в этой статье я рассмотрю только как запустить фронт на VPS сервере и привяжу его к домену.

1. DNS-запись

  • У тебя должна быть DNS-запись типа A для chat.weblegko.ru, указывающая на IP твоего VPS.

2. Структура сайта

  • Фронтенд файлы — в папке, например, /var/www/chat-app/chat-frontend/
  • Бэкенд API — запускается на сервере и слушает, например, порт 3000 или 8080.

Загрузи через файловый менеджер хостинга все содержимое папки build в папку /var/www/chat-app/chat-frontend/

3. Настройка Nginx

Обычно для сайта создают отдельный файл внутри /etc/nginx/sites-available/, например chat-app, и создают символическую ссылку в /etc/nginx/sites-enabled/.

sudo nano /etc/nginx/sites-available/chat-app

Эта откроет встроенный редактор для редактирования файла chat-app

Вот базовой пример конфигурации nginx для сервировки React build:

server {
    listen 80;
    server_name chat.weblegko.ru;

    # Обслуживание фронтенда
    location / {
        root /var/www/chat-app/chat-frontend/;
        try_files $uri /index.html;
    }

    # чтобы читалась папка static (возможно это лишнее)
    location /static/ {
        root /var/www/chat-app/chat-frontend;
    }

    # API - проксирование запросов
    location /api/ {
        proxy_pass http://127.0.0.1:3000/;  # порт, на котором работает API
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Прописав конфигурацию нажми Ctrl+0 и Enter, чтобы сохранить. Потом нажми Ctrl+X для выхода из редактора.

Обязательно создай символическую ссылку в sites-enabled для правильной работы nginx:

sudo ln -s /etc/nginx/sites-available/chat-app /etc/nginx/sites-enabled/

Обязательно добавь разрешения nginx для доступа к файлам и папкам, для скриптов, стилей и др.

sudo chown -R www-data:www-data /var/www/chat-app/chat-frontend 
sudo chmod -R 755 /var/www/chat-app/chat-frontend

sudo chown -R www-data:www-data /path/to/your/build
— Эта команда меняет владельца и группу всех файлов и папок внутри /path/to/your/build на www-data, что является стандартным пользователем и группой для nginx на большинстве систем Ubuntu. Это гарантирует, что nginx сможет читать эти файлы.

sudo chmod -R 755 /path/to/your/build
— Эта команда устанавливает права доступа к файлам и папкам, позволяя владельцу читать, писать и выполнять (если это папки), а группе и другим пользователям — только читать и выполнять. Это обеспечивает доступ для nginx и других пользователей к файлам сайта.

Проверьте в порядке ли ваша конфигурация:

sudo nginx -t # проверить синтаксис
sudo systemctl reload nginx # применить все изменения и перезагрузить ngnix
  • Всё, что не начинается с /api/, отдастся как статические файлы фронтенда.
  • Запросы к /api/ будут перенаправляться на локальный сервер API.

На данном этапе первоначальная настройка nginx закончена, и домен прикручен к vps серверу. Если набрать chat.weblegko.ru в браузере то отобразить фронт. Конечно еще нужно настроить ssl — защищенное соединение, но это в следующий раз. Спасибо всем, кто дочитал…