Запускаем приложение в Linux с фронтом на React и бэком на .Net Core

  • Михаил
  • 8 мин. на прочтение
  • 14
  • 28 Nov 2024
  • 28 Nov 2024

Для настройки запуска фронтенда исполненного на React и бэкенда на .NET Core на сервере CentOS с использованием Nginx для HTTP и HTTPS, а также для настройки бэкенда как сервиса на порту 5000, следуйте этим шагам:

1. Установка необходимых пакетов

Установите Nginx и .NET Core:

sudo yum install epel-release -y
sudo yum install nginx -y
sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm
sudo yum install dotnet-sdk-6.0 -y

2. Настройка Nginx для фронтенда

Создайте конфигурационный файл для вашего сайта в /etc/nginx/conf.d/:

sudo vi /etc/nginx/conf.d/myapp.conf

Добавьте следующую конфигурацию:

server {
   listen 80;
   server_name your_domain.com;
   location / {
       root /var/www/myapp/build;
       try_files $uri $uri/ /index.html;
   }
   location /api {
       proxy_pass http://localhost:5000;
       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;
   }
}
server {
   listen 443 ssl;
   server_name your_domain.com;
   ssl_certificate /etc/nginx/ssl/your_domain.com.crt;
   ssl_certificate_key /etc/nginx/ssl/your_domain.com.key;
   location / {
       root /var/www/myapp/build;
       try_files $uri $uri/ /index.html;
   }
   location /api {
       proxy_pass http://localhost:5000;
       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;
   }
}

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

Создайте директорию для SSL сертификатов и поместите туда ваши сертификаты:

sudo mkdir /etc/nginx/ssl
sudo cp /path/to/your/certificate.crt /etc/nginx/ssl/your_domain.com.crt
sudo cp /path/to/your/private.key /etc/nginx/ssl/your_domain.com.key

4. Развертывание фронтенда

Соберите ваше React приложение и скопируйте его в директорию /var/www/myapp/build:

npm run build
sudo cp -r build/* /var/www/myapp/build/

5. Настройка бэкенда как сервиса

Создайте файл сервиса для вашего .NET Core приложения:

sudo nano /etc/systemd/system/myapp.service

Добавьте следующую конфигурацию:

[Unit]
Description=My .NET Core App
[Service]
WorkingDirectory=/var/www/myapp
ExecStart=/usr/bin/dotnet /var/www/myapp/myapp.dll
Restart=always
RestartSec=10
SyslogIdentifier=myapp
User=www-data
Environment=ASPNETCORE_ENVIRONMENT=Production
[Install]
WantedBy=multi-user.target

6. Запуск и включение сервисов

Запустите и включите сервисы Nginx и вашего .NET Core приложения:

sudo systemctl start myapp
sudo systemctl enable myapp
sudo systemctl start nginx
sudo systemctl enable nginx

7. Проверка конфигурации

Проверьте конфигурацию Nginx на наличие ошибок:

sudo nginx -t

Если все в порядке, перезапустите Nginx:

sudo systemctl restart nginx

Теперь ваш фронтенд должен быть доступен по HTTP и HTTPS, а Nginx должен проксировать запросы к /api на ваш бэкенд, работающий на порту 5000.

P.S.

И не забываем про настройку SELinux и firewalld.