React + Express как правильо развернуть билд на проде?

Question

[IDONTSUDO]

У меня есть React приложение,и сервер на Еxpress. Так же есть ubuntu 18.04 и Nginix. Когда я прописываю, npm run build. React просит запустить

serve -s build

если я его запускаю статика React работает. Но если отключаю консоль она падает.

Подскажите способ, как мне запустить React приложение. На моем сервере так что бы оно не падало? И настроить прокси сервер Nginix. На то что бы он отдавал статику React. И все запросы который шли с этой статики, перенаправлял на node js.

P.S. я знаю что есть вариант, с подключением через статику Express.

spoiler

Но это задача, слишком криво реализовывалась когда я писал приложение Vue + Express

Answer 1

[Андрей Hecc]

Вам нужен какой-то process manager, через который запустить serve либо тот же express.
Мы юзаем pm2.keymetrics.io/.

Comments

[IDONTSUDO]

Через pm2 я запустил Express. React Server при запуске serve -s build. Через pm2 выдает ошибку. Возможно проблема со стороны Niginix.

[Андрей Hecc]

Так, а зачем вам одновременно и express и serve? Если нужно просто отдать реактовский билд одного из них вполне будет достаточно.

Как вариант, попробуйте запустить процесс pm2 через файл конфигурации, как показала практика, это самый надежый вариант.
Если запускать через консольку напрямую, иногда вылазят непредсказуемые ошибки.

pm2 start config.json

{
    "apps" : [
      {
        "name": "App name",
        "script": "npx",
        "interpreter":"none",
        "args": "serve -l 3000 -s build"
      }
    ]
  }

[ThemeZV]

Express можно запускать с помощью pm2. Но вот раздавать им статику смысла нет. Тем более, когда есть Nginx.

[IDONTSUDO]

ThemeZV, мне бы заказчику проект показать. А не принимать архитектурных решений.

Answer 2

[profesor08]

Ужас, запусти свой express на одном поте, реакт на другом, реакту укажи порт экспресса, чтоб он знал куда слать запросы по api. Пробрось порты в роутере и открой их в фаерволе. Открывай в браузере по порту реакта. Если с пробросом портов все сложно и не понимаешь что это такое, и не понимаешь что такое фаервол, то есть https://ngrok.com/

Если хочешь чтоб консолька закрывалась и не мешалась, то RunHiddenConsole.exe

Если хочешь иметь возможность перезапуска, то сделай батник с такой командой.

Если хочешь какой-то gui, то возьми менеджер из ответов других ответивших тут.

Answer 3

[IDONTSUDO]

В итоге я нашел такой выход, захостить React бандл на обычном хостинге. А node js сервер на VDS.

Comments

[Олег Гамега]

так себе идея, почему на том же vds не поднять nginx ?

[IDONTSUDO]

Олег Гамега, там стоит нгиникс

Answer 4

[ThemeZV]

Запускается pm2, который запускает сервер (express). Собирается продовый билд фронта (это просто статика).
Nginx проксирует запросы на API, и раздает статику. Мануалов много.

Comments

[IDONTSUDO]

за целый день внятного ни одного не нашел

[alex_kulkoff]

Не знаю, как на реакте, но у меня вью приложение развернуто так. Билд фронта лежит в папке паблик експресса. Сам экспресс запущен дефолтно на 3000 порту и nginx проксирует запрос на экспресс. Весь роутинг приложения описан на фронте. Экспресс только API