[英]Nginx reverse proxy to frontend and backend
I have two react app running on localhost:3000(frontend) and localhost:3001(backend).我有两个在 localhost:3000(frontend) 和 localhost:3001(backend) 上运行的反应应用程序。 I want to serve both backend and front end from same server_name.. For example, if a user hits example.com the Nginx should route the traffic to frontend running on (localhost:3000) and if a user hits example.com/admin/login traffic should get routed to the backend (localhost:3001).我想从同一个 server_name 为后端和前端提供服务。例如,如果用户点击 example.com,Nginx 应该将流量路由到在 (localhost:3000) 上运行的前端,如果用户点击 example.com/admin/登录流量应该路由到后端 (localhost:3001)。
''' '''
server {
listen 80;
server_name example.com;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $remote_addr;
location / {
proxy_pass http://localhost:3001;
}
location /admin-login {
proxy_pass http://localhost:3000;
}
}
''' '''
Using above configuration.使用上述配置。 I have frontend running on example.com.我在 example.com 上运行前端。 However, when I call example.com/admin/login I am getting redirected to app running on frontend (localhost:3000) instead of backend running on (localhost:3001).但是,当我调用 example.com/admin/login 时,我被重定向到在前端 (localhost:3000) 上运行的应用程序,而不是在 (localhost:3001) 上运行的后端。
Updating as per the answer given below.根据下面给出的答案进行更新。 I have below configuration.我有以下配置。 it still have the same behavior.它仍然具有相同的行为。
server {
listen 80;
server_name example.com;
location /admin-login {
proxy_pass http://127.0.0.1:3000/admin-login;
}
location / {
proxy_pass http://127.0.0.1:3001;
}
location /home {
proxy_pass http://127.0.0.1:3001/home;
}
location /login {
proxy_pass http://127.0.0.1:3001/login;
}
location /signup {
proxy_pass http://127.0.0.1:3001/signup;
}
location /article {
proxy_pass http://127.0.0.1:3001/article;
}
}
I think the problem here is that我认为这里的问题是
location / {
proxy_pass http://localhost:300
}
matches all queries so will also redirect anything to /admin-login
匹配所有查询,因此也会将任何内容重定向到/admin-login
You could either rearrange your blocks to have the admin-login
block above the /
block in the config file, or make the adjustment below:您可以重新排列块以在配置文件中将admin-login
块置于/
块上方,或者进行以下调整:
location = / {
proxy_pass http://localhost:300
}
This adjusted block should only redirect queries to /
rather than /*
这个调整后的块应该只将查询重定向到/
而不是/*
If you want to read more, it's explained in the documentation here - https://nginx.org/en/docs/http/ngx_http_core_module.html#location如果您想阅读更多内容,请在此处的文档中进行说明 - https://nginx.org/en/docs/http/ngx_http_core_module.html#location
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.