В этой статье я расскажу Вам как загрузить свое React приложение на сервер, пропишем автозапуск приложения с утилитой pm2, настроим конфиг nginx, установим ssl сертификат, пропишем переадресацию с http н https!

Заставка к статье про деплой React приложения на Сервер

В первую очередь необходимо арендовать сервер на Ubuntu 22.04 (все приведенные в статье команды полностью совместимы с ней), сам я уже давно использую сервера timeweb, на них у меня установлено уже достаточно много проектов от VPN до собственного сайта, эти ребята меня не подводили!

Промокоды на скидку от меня:

“tehnomaniak” получи 1 месяц в подарок при оплате сервера на 1 год;

“super” получи 3 месяца в подарок при оплате сервера на 2 года;

После того как сервер уже арендован необходимо выполнить следующее:

1) Подключаемся к нашему серверу через ssh, для этого в терминале прописываем следующую команду:

ssh root@xx.xx.xx.xxx (root и xx.xx.xx.xxx логин и ip адрес соответственно, их мы получим на почту при аренде сервера).

2) Устанавливаем node js:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - //setup_18.x вместо 18 ставим ту версию которая стоит у вас локально, проверить версию можно командой node -v, указываем только первое число

sudo apt install -y nodejs // непосредственная установка NodeJS

3) Устанавливаем git:

sudo apt update //обновляем инфомацию о новых версиях пакетов, на всякий sudo apt install git -y //устанавливаем git

4) Клонируем репозиторий нашего React приложения командой: git clone

5) Устанавливаем зависимости

npm install

6) Устанавливаем pm2 и запускаем наше приложение при старте сервера

sudo npm install pm2 -g // ставим Pm2

pm2 start npm -- start // из папки нашего приложения

pm2 startup

pm2 save

7) Настраиваем Файрвол и nginx

sudo apt update //а вдруг кто новый пакет зарелизил

sudo apt install nginx -y // ставим nginx

sudo ufw allow 'Nginx Full' //открываем 80 и 443 порт в ufw

sudo ufw allow OpenSSH // открываем 22 порт

sudo ufw app list // проверить что все все правила корректно добавились, вы увидите это, главное чтобы OpenSSH был в списке, иначе вы закроете доступ к серверу по ssh и другого способа попасть на сервер не будет //Available applications: // Nginx Full // Nginx HTTP // Nginx HTTPS // OpenSSH

sudo ufw enable // запускаем файрвол

sudo systemctl enable --now nginx // добавляем в автозапуска и запускаем nginx sudo ufw status verbose //смотрим что открыто

8) Настройка конфига nginx

sudo nano /etc/nginx/sites-available/default //открываем конфиг и удаляем все, что там есть по умолчанию

Ваш конфиг должен выглядить примерно так, можете скопировать:

server {
listen 443 ssl;
server_name ваш_ip_адрес;
root путь_до_папки_build;
try_files $uri .html;

ssl_certificate /etc/ssl/domain.ru.crt;
ssl_certificate_key /etc/ssl/domain.ru.key;

location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

9) Установка ssl сертификата

Если вы приобрели сертификат, то у вас должны быть на руках файл CRT и ключ, содержимое этих файлов необходимо записать в файлы: /etc/ssl/domain.ru.crt и /etc/ssl/domain.ru.key соответственно;

С подробной инструкцией можете ознакомится тут.

На этом все, деплой React приложения на сервер завершен успешно!

В статье есть реклама ООО «ТАЙМВЭБ.КЛАУД», ИНН 7810945525, 2VtzqxTFHvc