Как настроить команду pm2 serve для обслуживания многостраничного приложения React?

Я создал приложение ReactJS с помощью Create-React-App и хотел развернуть его на сервере Linux. Я следовал руководству, в котором показано, как это сделать очень просто, установив pm2 и serve, а затем после выполнения команды:

npm run build

Я выполнил команду, в которой размещалось приложение:

pm2 serve build

Теперь проблема в том, что всякий раз, когда я посещаю URL-адрес, который не является базовым, или нажимаю перезагрузку из браузера, когда я нахожусь на странице, отличной от домашней, я получаю ошибку 404 not found.

Я понимаю, что предыдущая команда предназначена для обслуживания только одной страницы. Мой вопрос: есть ли способ сделать так, чтобы URL-адрес, например, http://myserver:port/a, перешел в Маршрут в моем приложении? Или, по крайней мере, перейти на http://myserver:port/?

У меня уже установлен Nginx на том же сервере, поскольку я использую его для размещения приложения Flask Python, но я новичок во всем этом, и я ищу простой способ, который работает, так как я столкнулся с некоторыми трудностями, чтобы получить Размещено приложение Python.

Обратите внимание, что я использую только React, без Redux, Express или любую базу данных, если это имеет какое-то отношение. Я также использую BrowserRouter в своем приложении.


reactjs pm2 serve
person Karim Taha    schedule 29.08.2018    source источник

Ответы (3)


arrow_upward
3
arrow_downward

pm2 serve имеет режим одностраничного приложения (https://pm2.keymetrics.io/docs/usage/expose/#serving-spa-redirect-all-to-indexhtml)

Из документов:

Для автоматического перенаправления всех запросов в index.html используйте параметр --spa:

pm2 serve build --spa

Или при использовании ecosystem.config.js файла:

module.exports = {
  script: "serve",
  env: {
    PM2_SERVE_PATH: 'build',
    PM2_SERVE_PORT: 8080,
    PM2_SERVE_SPA: 'true',
    PM2_SERVE_HOMEPAGE: '/index.html'
  }
}
person Rohit    schedule 06.01.2020
comment
Параметр --spa действительно сработал, но из-за этого моя аутентификация не прошла, потому что запросы, которые должны давать ответ 404 (поскольку пользователю не разрешен доступ к этому сайту), теперь возвращают ответ 200 (после успешного перенаправления на страницу индекса) . - person schadenfreude; 09.03.2020
comment
Как вы определяете, не разрешен ли пользователю доступ к сайту? Если у вас есть внутренний сервер, вероятно, используйте статический маршрут обслуживания для обслуживания вашего приложения и маршрут / api для разделения ваших запросов. - person Rohit; 17.03.2020
comment
Мне удалось решить свою проблему с помощью сервис-воркера, поэтому я не особо углублялся в ваше решение. У меня есть маршрут / api к моему бэкэнду, но я хочу использовать несколько маршрутов для моего интерфейса. Если я правильно помню, моя проблема заключалась в том, что если пользователю не разрешен доступ к определенным маршрутам, он перенаправляется на страницу / login моим сервером. Параметр --spa перенаправляет / login на страницу индекса, чего я не хотел. Я просто хотел прокомментировать тот факт, что опция --spa может вызвать другие проблемы, чтобы проинформировать других. - person schadenfreude; 18.03.2020

arrow_upward
1
arrow_downward

pm2 serve build просто статически обслуживает папку сборки. Итак, http://myserver:port/a запросит файл с именем 'a' в папке сборки. Если не находит, возвращает 404

Чтобы сервер ur мог обрабатывать другие маршруты, вы не можете использовать pm2 serve. Вместо этого вы должны запустить свой фляжный сервер через pm2. Вы можете ознакомиться с Как запустить скрипт Python например pm2 для nodejs

person Yongzhi    schedule 29.08.2018
comment
Я не понимаю, зачем использовать pm2 для Flask. Приложение Flask правильно работает как API, который использует приложение React, в то время как все мои проблемы связаны с маршрутизацией приложения React. Я понимаю, вы говорите, что то, что я хочу, невозможно, так есть ли обходной путь с использованием pm2? Или простая альтернатива для использования в целом? - person Karim Taha; 29.08.2018
comment
О, сервер фляги - это просто сервер api, и он не содержит приложение реакции клиента ur? если это так, я бы написал простой экспресс-сервер, который обслуживает приложение реакции и обрабатывает для него маршруты - person Yongzhi; 29.08.2018

arrow_upward
1
arrow_downward

Я использую Vue.js, команда npm run build генерирует статические файлы в папку dist, команда pm2 выглядит так:

pm2 --name <appName> serve --spa <staticFolder> <port>
person jarraga    schedule 15.02.2021