【nginx】前后端代理配置

文件目录

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是一样的代理。

	location	root/alias	文件实际路径
eg1	/	/root/test/test0	/root/test/test0/index.html
eg2	/test0	/root/test	/root/test/test0/index.html
eg3	/test1	/root/test/test1/	/root/test1/test1/index.html

简单的分析出：
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/;
}