nginx实现常见场景

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具备极好的IO性能。咱们在平常开发中使用到Nginx的主要有如下几个场景:
css

  • Nginx做为http服务器
  • 跨域请求
  • 负载均衡
  • 网络资源的动静分离

nginx做为http服务器

Nginx自己是一个静态资源的服务器,当只有静态资源的时候,就可使用Nginx来作服务器,以下,咱们使用Nginx来部署一个打包好的vue项目
html

#vue项目
server
{
     listen 8081; #监听端口
     server_name 209.250.235.145; 
     root /app/vue/dist/; # 咱们的资源在服务器中的路径
     index index.html; #指定资源的入口文件
}复制代码

完成后咱们nginx -s reload一下,而后访问209.250.235.145:8081,只要路径没错静态资源就访问的到了vue


跨域请求

先后端分离的项目中因为先后端项目分别部署到不一样的服务器上,咱们首先遇到的问题就是跨域,在这个场景咱们下nginx能够帮助咱们很好地解决这个问题

#跨域请求server
server{
	listen 9000;
	server_name 209.250.235.145;
	root /app/crossDomain/;
	index index.html;
	
	location /douban/ { #添加访问目录为/apis的代理配置
		rewrite   ^/douban/(.*)$ /$1 break;
		proxy_pass   https://m.douban.com;
   }
}
复制代码

在个人服务器下我写了一个node

index.html请求豆瓣接口,模拟跨域

function nginxClick(){
	$.ajax({
		url: '/douban/rexxar/api/v2/muzzy/columns/10018/items?start=0&count=3',
		dataType: 'json',
		type: 'get',
		data: "",
		success:(res)=>{
		    console.log(res)
		}
	})
}
复制代码

当咱们访问点击请求时,匹配到location下的/douban/nginx

rewrite   ^/douban/(.*)$ /$1 break;复制代码

这段配置将请求路径重写为/rexxar/api/v2/muzzy/columns/10018/items?start=0&count=3,其中$1表明正则模糊匹配到的第一个参数,web

proxy_pass   https://m.douban.com;复制代码

这段配置是将请求域名代理到豆瓣的域名下面,因此从本地服务器发出去的请求将被从新重写为:ajax

https://m.douban.com/rexxar/api/v2/muzzy/columns/10018/items?start=0&count=3,咱们就能拿到豆瓣api提供的数据。详情能够看看这篇文章
json

演示地址:http://209.250.235.145:9000/后端

负载均衡

负载均衡也是Nginx经常使用的一个功能,主要的是利用upstream来定义集群服务器。负载均衡配置通常都须要同时配置反向代理,经过反向代理跳转到负载均衡。而Nginx目前支持自带3种负载均衡策略api

  • RR(默认):每一个请求按时间顺序逐一分配到不一样的后端服务器,若是后端服务器down掉,能自动剔除
  • 权重:指定轮询概率,weight和访问比率成正比,用于后端服务器性能不均的状况
  • ip_hash:上面的2种方式都有一个问题,那就是下一个请求来的时候请求可能分发到另一个服务器,当咱们的程序不是无状态的时候(采用了session保存数据),这时候就有一个很大的很问题了,好比把登陆信息保存到了session中,那么跳转到另一台服务器的时候就须要从新登陆了,因此不少时候咱们须要一个客户只访问一个服务器,那么就须要用iphash了,iphash的每一个请求按访问ip的hash结果分配,这样每一个访客固定访问一个后端服务器,能够解决session的问题。
这里用第二900种策略来模拟实现了下负载均衡(同一台服务器上的两个端口起了两个node服务。)


使用upstream定义服务器 

upstream smile.com{	
	server 209.250.235.145:9001 weight=1;
	server 209.250.235.145:9002 weight=2;
}复制代码

server{
	listen  9003;
	server_name 209.250.235.145;
	
	location / {
		proxy_pass		http://smile.com;
		proxy_redirect 		default;
	}
}复制代码

当咱们访问9003这个端口时,会根据咱们设置的权重不一样分别落在不一样的服务器(端口)。




演示地址:http://209.250.235.145:9003/

网络资源的动静分离

当咱们的请求涉及静态资源时,咱们能够将请求分发到不一样的服务器。

#动静分离server
    upstream static {
	    server 209.250.235.145:9006;
    }
    server{
        listen 9005;
	    server_name 209.250.235.145;
	    root /app/dynSta;
		
	    location ~ .*.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
            proxy_pass http://static;
        }
    }
    server{
        listen 9006;
	   server_name 209.250.235.145;
	   root /app/dynSta;
    }
复制代码

咱们定义了一个

为静态资源新增了一个端口,并添加到
upstream模块,当咱们的location匹配到以 (gif|jpg|jpeg|png|bmp|swf|css|js)结尾的文件时,咱们都会把请求转发到9006这个端口下(好想成为土豪,好想拥有两台服务器啊啊啊啊。。)

nginx除了以上的使用场景外,还能够用来适配pc和移动环境

适配pc和移动环境

#适配pc环境和移动环境
	server{
		listen 9007;
		server_name 209.250.235.145;
		root /app/pcAndh5/;
		index pc.html;
		
		location / {
			if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
				set $mobile_request '1';
			}
			if ($mobile_request = '1') {
				rewrite ^.+ https://www.baidu.com/;
				
			}
        }
    }
复制代码

这里咱们使用nginx内置变量$http_user_agent来匹配请求的来源,当来源是(Android|webOS|iPhone|iPod|BlackBerry)时,咱们将请求整个重写,让他去访问百度,不然访问我服务器的地址。

演示地址:http://209.250.235.145:9007/

以上就是nginx服务器在咱们平常开发中使用到的场景

相关文章
相关标签/搜索