文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在nginx反向代理的docker容器之间转发请求到nginx中的react路由？

问如何在nginx反向代理的docker容器之间转发请求到nginx中的react路由？
EN

Stack Overflow用户

提问于 2021-04-06 20:01:27

回答 1查看 199关注 0票数 0

我在下面的源代码中使用了GitHub代码库来设置docker文件和docker-compose，并在此基础上进行构建。

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

这对于单页面的React页面很有效。我通过react-routes-dom在一次react中添加了多个页面。我像下面这样设置它，当我在localhost:3000/path上npm start react代码和访问时，它就可以工作了。

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

当我试图通过反向代理访问它时，问题就出现了。该配置与此处的存储库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

Stack Overflow用户

回答已采纳

发布于 2021-04-06 21:29:28

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

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

我不得不将其应用于承载React构建本身的Nginx。这样，重定向是客户端的。

我应用了上面提到的链接和问题中的链接中提出的Catch-all方法，它工作得很好！

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66968266

复制

相似问题

问如何在nginx反向代理的docker容器之间转发请求到nginx中的react路由？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nginx反向代理的docker容器之间转发请求到nginx中的react路由？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在nginx反向代理的docker容器之间转发请求到nginx中的react路由？
EN