用Router从Apache到Nginx docker运行ReactJS的反向代理。

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;
    }
}

通过直接进入React应用，访问React应用。http:/example.com:10080 工作就好了，但如果有人要去找。http:/example.comfoo，它将被代理到 http:/localhost:10080foo。 并导致返回空白页，因为不存在一个 傅 途径。

到目前为止，我尝试过的事情，结果不是404就是空白页。

• 重写了URI，删除了 傅 Apache中的一部分。
• 在usrsharenginxhtml中添加了一个foo目录。
• 重写了URI，删除了 傅 内的Nginx，然后代理到self。
• 设置React路由器的基名为 傅.

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

谢谢任何一个花时间阅读这篇文章的人，如果有人能帮助我，我将非常感激。如果有人能帮助我，我将非常感激

Answer 1

你应该考虑用Apache来服务你的react应用，这样你就不需要并排运行2个web服务器了。

Apaches的mod_rewrite可以用来重写React Router的URL。

这里有一个很好的教程，如何配置Apache与JavaScript路由一起工作。https:/www.serverlab.catutorialslinuxweb-servers-linuxhow-to-configure-apache-for-reactjs-and-angularjs

这里是Apache关于mod_rewrite的文档。https:/httpd.apache.orgdocs2.4modmod_rewrite.html。

当然你也可以用Nginx来服务react，也可以让Nginx来做代理。