从 Apache 反向代理到 Nginx docker running ReactJS with Router

Question

目前，我有一台运行 Apache 的服务器，它也被配置为充当反向代理。 在同一台服务器上，我有一个 Nginx docker 运行一个带有路由器的 ReactJS 应用程序的 ReactJS 网站。 目标是建立一个从 apache 服务器到 nginx docker 的反向代理，以便人们访问在所述 Nginx docker 容器上运行的 React 应用程序。

这是我的 apache2 配置：

<VirtualHost *:80>
        ServerName example.com
        ServerAlias www.example.com

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        ProxyPreserveHost On

        ProxyPass /foo http://localhost:10080
        ProxyPassReverse /foo http://localhost:10080
</VirtualHost>

这是用于启动 Nginx Docker 的 docker-compose.yml

version: "3"
services:
  www:
    image: nginx
    container_name: react-www
    volumes:
      - ./react-app/build:/usr/share/nginx/html
    ports:
      - 10080:80
      - 10443:443
    networks:
      - www

networks:
  www:
    driver: bridge

最后，这是 Nginx default.conf 文件

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

通过http://example.com:10080直接访问 React 应用程序工作正常，但如果有人要访问http://example.com/foo ，它将被代理到http://localhost :10080/foo并导致返回空白页，因为不存在/foo路由。

到目前为止我尝试过的导致 404 或空白页的事情：

• 通过删除 Apache 中的/foo部分重写了 URI。
• 在 /usr/share/nginx/html 中添加了一个 foo 目录。
• 通过删除 Nginx 中的/foo重写 URI，然后代理给自己。
• 将 React 路由器的基本名称设置为/foo 。

在这一点上，我意识到我对 URI 如何交互的理解是有限的，所以如果有人能够指出我正确的方向，我将不胜感激。 尽管我使用 Apache 作为反向代理这一事实是我无法控制的，但如果有人认为我在做一些非常愚蠢或低效的事情，我愿意接受替代方案的建议。

感谢所有花时间阅读本文的人。 如果有人能帮助我，我将不胜感激！

Answer 1

您应该考虑使用 Apache 为您的 React 应用程序提供服务，这样您就不需要同时运行 2 个 Web 服务器。

Apache mod_rewrite 可用于为 React Router 重写 URL。

这是一个很棒的教程，介绍如何配置 Apache 以使用 JavaScript 路由。 https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-configure-apache-for-reactjs-and-angularjs/

这是关于 mod_rewrite 的 Apache 文档。 https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html

当然，您也可以使用 Nginx 来提供 React，并让 Nginx 进行代理。