Стек MERN на капле ЛАМПЫ (DigitalOcean)

Question

У меня есть приложение MERN, разделенное на: 1. Папка client: код переднего плана (приложение REACT) 2. Папка server: код API (Express, NodeJs)

По какой-то причине интерфейс вызывает часть приложения /api, но не возвращает ответ. Проблема в настройке Apache2? или что-то в приложении реагировать. И как обычно выполняется связь между ExpressJs (Backend) и ReactJs (Frontend).

Маршрутизация настраивается через обратный прокси-сервер Apache2

<IfModule mod_ssl.c>
<VirtualHost *:443>
  ServerName example.com
  ServerAlias www.example.com
  DocumentRoot /var/www/example.com/
  Options -Indexes

  ProxyRequests on
  ProxyPass /api https://example.com:3000/
  ProxyPassReverse /api https://example:3000/
  ProxyPass / https://example.com:7000/
  ProxyPassReverse / https://example:7000/

  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>

Just уточнить на картинке, чего я пытаюсь достичь:

Answer 1

Я думаю, проблема в том, что вы забыли подготовить свое приложение React к работе. Вы потратили все время на его разработку и использование response-scripts-start или чего-то подобного. Когда вы закончите разработку, вы должны запустить реагирующую-скрипты-сборку, чтобы ваш код мог быть преобразован во что-то, что может прочитать браузер. Веб-браузеры не читают такие вещи, как импорт и требуют.

Вот информация о подготовке к производству (это очень просто) https://create-react-app.dev/docs/production-build

А вот информация о том, как интегрируйте его со своим внутренним сервером: https://create-react-app.dev/docs/deployment#other -решений

По существу: в папке вашего клиента запустите

npm build

На вашем сервере. js добавьте

app.use(express.static(__dirname + '/build')

Теперь клиент запрашивает ваш индекс. html с вашего внутреннего сервера, и он обслуживает ваше приложение реакции. Дополнительное преимущество: больше нет ошибок CORS. Любой обходной путь, который вы сделали для CORS, вы, вероятно, должны устранить.