【nginx】前后端代理配置

清疚 2022-09-09 10:59 221阅读 0赞

### 文件目录 ###

test
    │
    ├─test0
    │      index.html
    ├─test1
    │      index.html
    └─test2
        │  index.html
        ├─test2-1
        │      index.html
        └─test2-2
                index.html

### 代理前端 ###

代理单个前端时，以下eg1、eg2代理的是同一个文件，不用的是url

*  localhost:8080/
 *  localhost:8080/test0

server {
    	listen 8080;
    	server_name  localhost;
    
      # eg1
    	location / {
    		root   /root/test/test0;
    		index  index.html index.htm;
    	}
    
      # eg2
    	location /test0 {
    		root   /root/test;
    		index  index.html index.htm;
    	}
    	
      # eg3
    	location /test1 {
    		alias  /root/test/test1/;
    		index  index.html index.htm;
    	}
    }

细心地读者发现还有第三个代理eg3、它的不同在于19行，是以alias开头的代理。那么他有什么不同呢，按照上面代理文件的路径，test1与test0是一样的，也就是说eg1和eg3是一样的代理。

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>location</th> 
   <th>root/alias</th> 
   <th>文件实际路径</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>eg1</td> 
   <td>/</td> 
   <td>/root/test/test0</td> 
   <td>/root/test/test0/index.html</td> 
  </tr> 
  <tr> 
   <td>eg2</td> 
   <td>/test0</td> 
   <td>/root/test</td> 
   <td>/root/test/test0/index.html</td> 
  </tr> 
  <tr> 
   <td>eg3</td> 
   <td>/test1</td> 
   <td>/root/test/test1/</td> 
   <td>/root/test1/test1/index.html</td> 
  </tr> 
 </tbody> 
</table>

简单的分析出：  
root：root + location 为实际文件路径  
alias：alias 为实际文件路径（ps：必须是以/结尾，因为代理的东西在此目录下）

### 代理多个前端 ###

当代理多个静态文件时，容易发生404问题。  
若把单个配置成`location /`时，又没有问题，那么你需要参考以下配置。  
ps：一般根路径用root，其他为alias代理。

server {
    	listen 8080;
    	server_name  localhost;
    
    	location / {
    		root  /root/test/test0;
    		index  index.html index.htm;
    	}
    
    	location /test1 {
    		alias  /root/test/test1/;
    		index  index.html index.htm;
    	}
    	
    	location /test2 {
    		alias  /root/test/test2/;
    		index  index.html index.htm;
    	}
    
    	location /test2-1 {
    		alias  /root/test/test2/test2-1/;
    		index  index.html index.htm;
    	}
    
    	location /test2-2 {
    		alias  /root/test/test2/test2-2/;
    		index  index.html index.htm;
    	}
    }

### 代理前端和后端 ###

有关`^~`请看FAQ  
12行最后的`/api/;`分号前面的`/`问题请看FAQ

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题
    }
    
    location ^~ /api {  # ^~/api/表示匹配前缀为api的请求
      	# 跨域问题
      	add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        proxy_pass  http://www.test.com:5000/api/;  # 注：proxy_pass的结尾有/， -> 效果：会在请求时将/api/*后面的路径直接拼接到后面
    }

### 代理https请求&转发 ###

因为微信公众号的回调只能调用https，有些时候可能会用到。  
这里需要自己了解一下https，简而言之需要证书，针对某一个url，这里展示一个代理示例

server {
        listen      443  ssl;
        server_name  xxx.somliy.top; # https的url
    
      	# 申请https证书会给这两个文件
        ssl on;
        ssl_certificate      /etc/nginx/test/xxx.somliy.top_bundle.crt;
        ssl_certificate_key  /etc/nginx/test/xxx.somliy.top.key;
    
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
    
        ssl_ciphers  ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers  on;
        ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
    
    
        location / {
            proxy_http_version 1.1; #代理使用的http协议
            proxy_set_header Host $host; #header添加请求host信息
            proxy_set_header X-Real-IP $remote_addr; # header增加请求来源IP信息
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 增加代理记录
            proxy_pass http://x.x.x.x:8080; # 代理到的真正地址
        }
    }

###  ###

### FAQ ###

#### 前端部署后，刷新404问题 ####

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决页面刷新 404 问题
    }

####  ####

#### 代理配置中，location的url尾部的`/`需不需要 ####

简单测试了一下，若是仅仅前端代理，是没有影响的，无论是root还是alias  
那区别是什么呢，当代理的内容为地址时，http://test.com/dir

*  http://test.com/dir 代表文件dir
 *  http://test.com/dir/ 代表目录dir

url尾部的`/`表示目录，没有`/`表示文件，是否需要加，根据情况选择

#### 代理到后端时，不认识代理标记 ####

使用`^~`当做前缀，正则匹配然后代理

location ^~ /api/ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        proxy_pass http://localhost:82/;
    }