前端常用Nginx配置

在Nginx的根目录下执行
start nginx 启动
./nginx -s reload 重启
./nginx -s quit 关闭
./nginx -t 检查配置文件是否正确

正向代理

正向代理.jpg

反向代理

反向代理.png

项目场景

正向代理和反向代理应用场景.png

nginx配置项

• server
  • 服务器主机服务相关设置，主要用于指定虚拟主机域名、IP和端口
  • listen: 监听的IP和端口
  • serve_name:主机名称（IP）
• location
  • URL匹配特定位置后的设置，反向代理、内容篡改相关设置
  • 路由配置
• upstream
  • 上游服务器设置，负载均衡相关配置
  • 实现反向代理的功能，将真正的请求转发到后端服务器上，并从后端服务器上读取响应，发回客户端。upstream模块是一种特殊的handler，只不过响应内容不是真正由自己产生的，而是从后端服务器上读取的

gzip配置

    gzip  on;
    gzip_min_length 1k;
    gzip_buffers    4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain text/javascript application/javascript text/css;
    gzip_vary on;

设定负载均衡后台服务器列表

# backend.com 后端服务器的域名
# 如果需要转发到多台服务器上需要负载均衡配置
  upstream backend.com { 
    # upstream 的负载均衡，weight 是权重，可以根据机器配置定义权重。权值越高被分配到的几率越大。
    server   192.168.10.100:8080 weight=1;  
    server   192.168.10.101:8080 weight=2 ;  
  }
server {
# 域名可以有多个，用空格隔开，fontend.com为前端域名
  server_name  localhost fontend.com;
  location / {
// 对应负载均衡设置upstream中的backend.com
  proxy_pass  backend.com
}
  ......
}

location配置

匹配规则及优先顺序
以=开头表示精确匹配
^~ 开头表示uri以某个常规字符串开头，不是正则匹配
location 完整路径
~ 开头表示区分大小写的正则匹配;
~* 开头表示不区分大小写的正则匹配
location 部分起始路径
/ 通用匹配, 如果没有其它匹配,任何请求都会匹配到

# 当/data/后面有/时，只能访问/data/  以及/data/xxx等路径。当/data后面没有/时，可以访问/data开头的任意路径。
location /data {
   # root 表示文件资源的位置（路径），也就是index.html文件的位置
   // index 表示首页文件，默认为index.html查询顺序自左向右
   root   C:\Users\150xxxxxx\Desktop\vue3\app\dist;
   # root   html;
   index  index.html index.htm;
}

proxy_pass配置

location /data/ {
  # 资源在后端服务器上时
  # 当proxy_pass后面有斜杠时，则实际访问路径会将访问路径中和location中的相同的部分替换掉
  proxy_pass: 192.168.102.12/
  # 反之若
  proxy_pass: 192.168.102.12
  # 访问http://ip/data/index.html实际访问为http://ip/data/index.html
}
# rewrite配置
syntax: rewrite regex replacement [flag]
rewrite的标志位的值
last : 相当于Apache的[L]标记，表示完成rewrite
break : 停止执行当前虚拟主机的后续rewrite指令集
redirect : 返回302临时重定向，地址栏会显示跳转后的地址
permanent : 返回301永久重定向，地址栏会显示跳转后的地址
# 如果不需要/api/，请求时使用rewrite替换掉
location /api/ { 
  rewrite ^/api/(.*) http://localhost;
}
# 或者
location /api/ {
  proxy_pass http://localhost/;
  rewrite ^/api/(.*) /$1 redirect;
}

vue中配置

# publicPath: '/'
# 地址栏localhost访问
location / {
   root   C:\Users\xxx\Desktop\vue3\app\dist;
   index  index.html index.htm;
}
# 地址栏localhost/data/
location /data/ {
   proxy_pass http://localhost/;
   rewrite ^/data/(.*) / redirect
}
# 或者
location /data/ { 
  rewrite ^/data/(.*) http://localhost;
}
# 若publicPath: /data/
# 想要地址栏输入localhost直接访问index.html，则配置如下，// 正则表达式不能少
 location / {
   rewrite // http://localhost/;
 }
// 想要地址栏输入localhost/data/直接访问index.html，配置如下
location /data/ {
  proxy_pass http://localhost/;
  rewrite ^/data/(.*) / redirect;
}
# 或者
location /data/ { 
  rewrite ^/data/(.*) http://localhost;
}