我要评论nginx通过location配置代理的原理和方式，是我们作为运维人员需要熟知的内容，前后端服务通过nginx作为桥梁互通访问，今天我们分享一下具体使用场景。
一、场景一：单一网络环境
1、互联网环境
1）不用nginx负载
通过vscode、hbuilder、webstorm 等前端开发工具 ，本地启动启动前端代码，启动后用默认ip（localhost（127.0.0.1））、端口号8080或者是随机生成的，前端页面打开后，直接调用后端接口，接口的ip地址可以直接写在代码里，自动触发直接访问后端服务。前端代码一般会使用相对路径或者没有完整写出 ip 和端口的接口地址，比如：
axios.get('/api/user') 这种情况下：前端系统会根据你当前运行的环境来推断请求的地址。如果你是通过 hbuilder 启动本地开发环境（如使用 hbuilderx 直接启动或者 npm run dev ），它会根据默认的开发服务器（通常是 localhost 或 127.0.0.1）来拼接出完整的请求 url。请求会默认发送到：
http://localhost:8080/api/user
（假设你的本地服务器是在 8080 端口上运行的）。这个过程本质上是因为浏览器或应用会将请求的路径补充为完整的 url，基于当前运行环境的 ip 和端口来自动推导。
假如：你在代码中明确指定了完整的后端接口地址，例如：
axios.get('http://192.168.1.100:3000/api/user')此时，无论你是在本地开发还是部署到服务器，前端代码都会按照这个地址去发送请求。此时，前端不会再使用默认的地址和端口，因为你已经显式提供了完整的域名/ip 和端口。这意味着，在这种情况下，系统不会再进行自动拼接，并且请求会直接发送到你指定的后端地址，而不会涉及默认的本地地址。
2）使用nginx代理前端代码
此环境中把前端代码打包后放到nginx负载包下面的html文件夹下面，nginx.conf 配置文件中简单的配置一下代理地址。
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-f/build/web; #效果
index index.html index.htm;
}
}前端代码通过nginx，后端代码直接在浏览器请求了，不经过nginx负载了。
3）使用nginx代理前后端代码
如果后端的api接口也要通过nginx代理，那么需要额外添加配置
server {
listen 8081;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-jt-f/build-jt/web; #效果
index index.html index.htm;
}
# 后台请求接口转发到接口地址
location /nandao/url1server {
#add_header 'access-control-allow-origin' '*';
#add_header 'access-control-allow-methods' 'post,get,options';
proxy_pass http://localhost:8888/;
rewrite ^/nandao/url1server/(.*) /$1 break;
}
}这样配置之后的运行逻辑如下：
- 浏览器上显示的请求地址如下：
http://localhost:8081/nandao/url1server/basin/selectcity?code=010
- 经过nginx后实际请求后端接口的全路径如下：
http://localhost:8888/basin/selectcity?code=010
即：http://localhost:8081 换成 http://localhost:8888，然后 /nandao/url1server/ 字符串去掉！
2、局域网环境
全局域网环境和互联网环境类似，不牵涉到网络问题，思路是一致的。
二、场景二：多种网络环境
1、页面端互联网访问局域网
前后端服务均部署到局域网，现在要配置通过互联网域名访问局域网的应用。
一般有以下几个方案：配置nat和端口映射（一般通过路由器）、配置反向代理（使用nginx或其他代理服务器）、使用vpn（虚拟专用网络）、通过公网ip直接访问（如果有公网ip）。
此处我们分析常用的nginx反向代理：在公网可访问的服务器上部署 nginx，配置反向代理，将用户请求转发到局域网内的应用。
假设你已经将公网域名 yourdomain.com 解析到 nginx 服务器上，nginx 配置文件如下：
server {
listen 80;
server_name yourdomain.com;
#http://yourdomain.com 转发到 http://192.168.1.100:8080
location / {
proxy_pass http://192.168.1.100:8080; # 将请求转发到内网应用
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_set_header x-forwarded-proto $scheme;
}
#http://yourdomain.com/nandao 转发到 http://192.168.1.100:8080/nandao
location /nandao {
proxy_pass http://192.168.1.100:8080; # 将请求转发到内网应用
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_set_header x-forwarded-proto $scheme;
}
#http://yourdomain.com/nandao 转发到 http://192.168.1.100:8080
location /nandao {
proxy_pass http://192.168.1.100:8080; # 将请求转发到内网应用
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_set_header x-forwarded-proto $scheme;
rewrite ^/nandao/(.*) /$1 break;
}
}注意：http://192.168.1.100:8080 此地址在改服务器上可以 telnet 通。（服务器有内网、外网、浮动ip的区别）
2、api接口代理转发
接着上面的流程：转发到 nginx后 192.168.1.100:8080 ，前端页面和后端接口
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/build-jt-f/build-jt/web; #效果
index index.html index.htm;
}
# 后台请求接口转发到接口地址
location /nandao/url1server {
#add_header 'access-control-allow-origin' '*';
#add_header 'access-control-allow-methods' 'post,get,options';
proxy_pass http://localhost:8888/;#或者是其他ip,其他此服务器里可以ping 通
rewrite ^/nandao/url1server/(.*) /$1 break;
}
}三、匹配规则
默认匹配：
server {
listen 8081;
server_name localhost;
location / {
root html/build-jt-f/build-jt/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
#页面访问地址http://localhost:8081/nandao/没有/nandao/ 模块配置时，请求会默认匹配 location /，nginx 会将 /nandao/ 转发到 html/build-jt-f/build-jt/web/nandao/ 目录下查找静态文件。
server {
listen 8081;
server_name localhost;
location / {
alias html/build-jt-f/build-jt/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}如果是alias 参数：
- 使用
alias指令时，nginx 会将请求路径中的/nandao/前缀替换为alias指定的路径。 - 指定了静态文件的实际目录，
/nandao/前缀被移除，路径变为html/build-jt-f/build-jt/web/。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论