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

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

我使用下面源代码中的 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

解决方法

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

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

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

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

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