Какой правильный деплой react + nodejs + nginx?

Question

[ogneog]

Здравствуйте. Не могу найти правильное решение ...

Скомпилировал приложение на React, выгрузил на VPS сервер с доменным именем, но есть еще backend на nodejs и проблема в том, что не получается настроить правильно конфиг nginx, видимо.

Отправляю POST запрос таким образом, также до этого пробовал http://IP_VPS:порт_nodejs_приложения/api/send-email
Но безуспешно, localhost также не срабатывал...

axios.post('/api/hi', formData)
                .then((response) => {
                    console.log(response);

                })
                .catch((error) => {
                    console.log(error);
                });

В nodejs:

app.post('/api/hi', (req, res) => {
   console.log("OKKKK");
});

Грешу, что проблема в конфигурационном файле:

server {


  root /var/www/html;

  index index.html index.htm index.nginx-debian.html;

  server_name ЗДЕСЬ-МОЙ-ДОМЕН.ru www.ЗДЕСЬ-МОЙ-ДОМЕН.ru;

  location / {
    # serve static frontend first
    try_files $uri $uri/ /index.html;
  }

  # location ~*^/(api) {
  location /api {
    proxy_pass http://localhost:4000/;
    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;
  }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/trade-mobile.ru/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/trade-mobile.ru/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}server {
    if ($host = www.ЗДЕСЬ-МОЙ-ДОМЕН.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = trade-mobile.ru) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


  listen 80 default_server;
  listen [::]:80 default_server;

  server_name ЗДЕСЬ-МОЙ-ДОМЕН.ru www.ЗДЕСЬ-МОЙ-ДОМЕН.ru;
    return 404; # managed by Certbot
}

В proxy_pass localhost:4000; также пытался указать и IP сервера, но никак :(

Как правильно сделать и забыть об этой боли?

Answer 1

[Uno]

так повесь без нгинкса и проверь для начала.

Answer 2

[Дмитрий Макаров]

Проверь политику VPS что он отвечает по 80 и 443 порту.

Answer 3

[foterio]

Проверьте ваше React приложение.
У него должно быть два состояния:
development - когда вы разрабатываете его локально у себя на компе и backend тоже запущен у вас локально
production - когда оно задеплоено у вас на сервере

Затем в вашем коде, вы должны предусмотреть примерно следующее:

// Тут проверяем в каком состоянии мы находимся
const isDev = process.env.NODE_ENV === ‘development’
//  Здесь мы меняем путь к нашему api
const API_URL = isDev ? 'http://localhost:4000' : 'http://ваше-доменное-имя.com/api'
// И затем уже подставляете ваш API_URL куда вам нужно
app.post(`${API_URL}/users`, (req, res) => {
   console.log("fetch users")
})

Где localhost:4000 - это путь к вашему бэкенду у вас на компе, когда вы разрабатываете приложение
http://ваше-доменное-имя.com/api - это путь к вашему backend'у, который запущен у вас на сервере

P. S. Пример сделан для понимая базовых принципов, некоторые моменты специально упрощены. Как делать это красиво и более развернуто, можно поискать в инструкциях по запросу "development production variables react"