如何从 nginx 反向代理转发 docker 容器之间的请求以响应 nginx 中的路由？答案

【问题标题】：How to forward requests between docker containers from nginx reverse proxy to react routes in nginx?如何从 nginx 反向代理转发 docker 容器之间的请求以响应 nginx 中的路由？
【发布时间】：2021-07-02 05:09:24
【问题描述】：

我使用下面源代码中的 GitHub 存储库来设置 Dockerfiles 和 docker-compose 并在其上进行构建。

它的工作原理是有一个 Nginx 反向代理根据 URL 将请求发送到 client(react) 或 backend(node js)。

这适用于单页 React 页面。我通过react-routes-dom 在一个反应中添加了多个页面。我像下面这样设置它，当我 npm start 反应代码并在 localhost:3000/path 访问时它可以工作。

function Main() {
    return (
        <Switch>
            <Route path='/' exact component={ComponentA} />
            <Route path='/path' exact component={ComponentB} />
        </Switch>
    );
}

当我尝试通过反向代理访问它时，就会出现问题。配置几乎与 repo default.conf 中的配置相同

当我尝试访问其他路由时会出现问题。如果我尝试访问基本路径localhost。有用。如果我尝试访问路径localhost/path，它不起作用。

访问基地/的日志

client | 172.18.0.5 - - [06/Apr/2021:11:51:15 +0000] "GET / HTTP/1.0" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

nginx | 172.18.0.1 - - [06/Apr/2021:11:51:15 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

访问自定义/path的日志

nginx | 172.18.0.1 - - [06/Apr/2021:11:52:43 +0000] "GET /path HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

client | 2021/04/06 11:52:43 [error] 31#31: *7 open() "/usr/share/nginx/html/path " failed (2: No such file or directory), client: 172.18.0.5, server: , request: "GET /path HTTP/1.0", host: "client"

client | 172.18.0.5 - - [06/Apr/2021:11:52:43 +0000] "GET /path HTTP/1.0" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

我尝试修改React-router and nginx、https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html、Nginx proxy_pass then try_file之后的conf文件。它们都不起作用。

我尝试将所有流量重定向到 / 以可能对路径有所帮助，但我得到一个空页面。

location / {
    rewrite /(.*) / break;
    proxy_pass http://client;
  }

来源：https://github.com/LukeMwila/multi-container-nginx-react-node-mongo

【问题讨论】：

标签： nginx docker-compose react-router nginx-reverse-proxy

【解决方案1】：

经过重新思考并在此处阅读此解决方案https://stackoverflow.com/a/36623117/8293176 后，我意识到我误解了 React 中路由的概念。

我之前所做的是尝试将reverse proxy conf 文件中的静态重新路由应用于 Nginx 托管反应，这是不正确的！它只是把我带到了另一个页面。

我必须将它应用到托管 React 构建本身的 Nginx。这样，重定向是客户端的。

我应用了上面引用的链接和问题中的链接中提出的Catch-all 方法，效果很好！

我希望这篇文章可以为未来的读者提供清晰的信息。

【讨论】：