阅读 557

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

locationroot/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 那区别是什么呢,当代理的内容为地址时,test.com/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/;
}
复制代码
文章分类
前端
文章标签