Как загрузить react web app и api на один VPS?

Question

[Claaim]

У меня сайт на react и API на express, установил сайт на хостинг и сервер на express, делал всё это в первый раз, react сайт работает у меня на порту 3000 а сервер находится на 5000 порту, но при запросах к API получаю следующую ошибку



Ну и это в целом понятно потому что axios наверное не понимает куда обращаться, ведь сам запрос к api выглядит так

Он обращается к localhost на порту 5000, в общем я думаю я объяснил свою проблему, основное что я не понимаю это как мне сделать так что бы на моей VPS работал и API и сам сайт на react если порты разные, использую nginx

Comments

[szQocks]

тебе надо обращаться уже не к localhost, так как твой фронт - пользователь скачивает к себе на комп ало ?

[Claaim]

szQocks, я это вроде описал, но я не понимаю как мне сделать так что бы и react приложение работало и сам API к чему мне по итогу обращаться, ведь когда я пишу условно говоря свой домен или айпи своего VPS сервера и указываю порт я ничего в ответ не получаю

[szQocks]

Claaim, ну там проксирование настраивать над, гугли, всё это есть в инете, либо хотя бы добавь в вопрос nginx свой

[Claaim]

szQocks, всё я настроил, я просто в nginx сделал ещё одну настройку locate /api и при таком запросе оно меня перекидывает на localhost 5000 там где у меня и находится само api

[Михаил Р.]

Claaim, напишите ответом и выберите решением

Answer 1

[xoxexxx]

вот примерный конфиг nginx
server {
location /api {
proxy_pass 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;
}

location /{
proxy_pass 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;
}

попробуй запустить через pm2
example:
pm2 start npm --name client -- start
pm2 start npm --name server -- start

и не забудь обновить nginx