В этой статье я расскажу Вам как загрузить свое React приложение на сервер, пропишем автозапуск приложения с утилитой pm2, настроим конфиг nginx, установим ssl сертификат, пропишем переадресацию с http н https!
В первую очередь необходимо арендовать сервер на 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 приложения на сервер завершен успешно!
Прочитай также другие мои статьи на тему Программирования:
Самый надежный VPN! Настраиваем Shadowsocks VPN за 5 минут!
ChatGPT у тебя в Telegram! Как создать Telegram бота с ChatGPT?
В статье есть реклама ООО «ТАЙМВЭБ.КЛАУД», ИНН 7810945525, 2VtzqwGwUp4