Nginx (4)：nginx动静分离

什么是动静分离不解释了，网上说的很清楚，这里只说配置

• 目的
  02虚拟机运行一个tomcat，处理动态请求，而对静态文件的访问则交给01虚拟机。
• 操作
  下面是01虚拟机的配置文件内容：

server {
	listen 82;
	listen [::]:82;

	#root /var/www/web/index;
	#index index.html;
     
	server_name localhost;
	location / {
		proxy_pass http://192.168.xxx.xxx:8080;
		#try_files $uri $uri/ =404;
	}

	location /css {
		root html;
		index index.html index.htm;
	}
	location /js {
		root html;
		index index.html index.htm;
	}
	location /img {
		root html;
		index index.html index.htm;
	}
}

首先修改proxy_pass，改为02虚拟机的tomcat地址端口，然后设置location，很好理解，访问css就去html目录下的css目录中查找，js和img同理。

• 效果
  下面访问02虚拟机的端口，发现静态文件全是从01虚拟机对应的目录下去取的（前提是提前将对应的静态文件放到01虚拟机的相应目录），此时删除02虚拟机对应目录下的文件依然能够在页面上准确返回相应的内容。
• 原理

反正静态文件是不变的，经过nginx从tomcat去取，取完了返回给nginx，再给用户呈现，还不如直接把静态放到nginx，别经手tomcat，因为tomcat是处理动态请求的服务器。因此就做到了动静分离。

• 正则匹配

可以看到上面js、css、img每人一个location，有些冗余，这里可以使用正则的方法

server {
	listen 82;
	listen [::]:82;

	#root /var/www/web/index;
	#index index.html;
     
	server_name localhost;
	location / {
		proxy_pass http://192.168.xxx.xxx:8080;
		#try_files $uri $uri/ =404;
	}

	location ~*/(js|img|css) {
		root html;
		index index.html index.htm;
	}
}

~表示开始正则。

• 我自己的项目：
  项目路径是这样的：
  
  views里面存放html，以login.html做示范。
  login.html里面的静态文件路径也不复杂，分别来自上面图片里除了views以外的文件夹，也只是js、img、css这几种静态文件，然后在02虚拟机开启tomcat，并将views放到tomcat的web根目录\demo下，01虚拟机去充当nginx服务器，配置文件我是这么写的：

server {
	listen 82;
	listen [::]:82;

	#root /var/www/web/index;
	#index index.html;
     
	server_name localhost;
	location / {
		proxy_pass http://192.168.xxx.xxx:8080/demo/views/login.html;
		#try_files $uri $uri/ =404;
	}

	location ~*/(js|img|css) {
		root /var/www/web ;
		index index.html index.htm;
	}
}

我发现，来自js、css、img这几个文件夹的静态文件确实可以获取到，但是来自layui、assembly等文件夹的静态文件获取不到。。

于是我修改配置文件：

server {
	listen 82;
	listen [::]:82;

	#root /var/www/web/index;
	#index index.html;
     
	server_name localhost;
	location / {
		proxy_pass http://192.168.xxx.xxx:8080/demo/views/login.html;
		#try_files $uri $uri/ =404;
	}

	location ~*/(js|img|css|layui|assembly) {
		root /var/www/web ;
		index index.html index.htm;
	}
}

其实就是匹配规则里添加了这几个文件夹的名字js|img|css|layui|assembly。我之前以为这里的匹配规则匹配的是文件类型，现在才知道，匹配的是路径。。
于是就好了：