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

Question

我使用下面源代码中的 GitHub 存储库来设置 Dockerfile 和 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" "-"

我尝试修改 , https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html , 之后的 conf 文件。都不行。

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

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

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

Answer 1

在重新思考并阅读这里的解决方案后，我意识到我误解了 React 中路由的概念。

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

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

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

我希望这篇 post 可以为未来的读者提供清晰的思路。

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

How to forward requests between docker containers from nginx reverse proxy to react routes in nginx?

nginx

react-router

docker-compose

nginx-reverse-proxy