如果这在黑暗中有点麻烦,请原谅我,我的DevOps /架构技能是v v最低的,所以我不确定使用正确的术语。
我有一个React应用程序托管在AWS上,我想坐在根mysite.com
以及某些“子目录”上,例如mysite.com/items
和mysite.com/category
。
此外,我想在其他地方托管一个博客,但可以在mysite.com/blog
上访问它,并可以使用一些其他静态页面,例如mysite.com/about
,mysite.com/contact
。我希望将这些静态页面托管在同一位置(我在考虑webflow)。
这似乎有点复杂,但是我想知道什么是最佳解决方案。 Nginx的反向代理是否可以正常工作,如果可以,您将如何配置它?还有其他可行的“无服务器”解决方案吗?
也许有一种方法可以将所有流量发送到静态页面服务器,除非它是根服务器或特定的/items
或/category
或/blog
?
答案 0 :(得分:1)
您的基本配置如下所示:
server {
listen 8080;
return 200 "Blog \n";
}
server {
listen 8081;
return 200 "About and Contact \n";
}
server {
listen 80;
location = /about {
proxy_pass http://localhost:8081;
}
location /blog {
proxy_pass http://localhost:8080;
}
}
让我在其中添加一些文字:)
如果您只想知道某个位置/ about,而该位置中没有其他信息,则可以使用= /about
尝试在/about
之后添加诸如/about/foo
之类的内容会导致404。
如果您要将博客代理到其他位置,请使用/blog
。使用此配置,您可以自由地向您的位置添加一些内容,例如/blog/test/
,它仍然会以200响应。
[root@localhost conf.d]# curl -v localhost/blog/test
* About to connect() to localhost port 80 (#0)
* Trying ::1...
* Connection refused
* Trying 127.0.0.1...
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET /blog/test HTTP/1.1
> User-Agent: curl/7.29.0
> Host: localhost
> Accept: */*
>
< HTTP/1.1 200 OK
< Server: nginx/1.17.6
< Date: Tue, 17 Mar 2020 06:09:31 GMT
< Content-Type: application/octet-stream
< Content-Length: 12
< Connection: keep-alive
<
/blog/test
* Connection #0 to host localhost left intact
在您的react应用中使用某种东西将流量路由到正确的目标。
我为我的一个项目做到了这一点,它的工作很棒!
作为一般参考和想法,我将在不适应您的问题的情况下共享我的文件。
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use('/api', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
app.use('/img', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
app.use('/oauth', proxy({
target: 'http://localhost:8080',
changeOrigin: true,
}));
};
此文件(setupProxy.js)位于根目录下的thr src目录中。
我只知道与node.js的快速ontop集成。由于代理已与http-protocoll紧密相关,因此您迫切需要一个了解http协议的服务器组件。
在过去的几个月中,我注意到使用快速Web服务器作为代理有很多缺点。缓存在NGINX级别上更有效。如果增加了路由复杂度,NGINX可以更好地处理它。