nginx系统学习5--常用配置3--实现动静分离

最新推荐文章于 2024-06-18 22:50:27 发布

勤径苦舟

最新推荐文章于 2024-06-18 22:50:27 发布

阅读量126

点赞数

分类专栏： nginx

本文链接：https://blog.csdn.net/zhou920786312/article/details/112514437

版权

nginx 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

6.3、实现动静分离

6.3.1、正则表达式拦截静态资源

01、上面的www目录中新建static目录，往里面拷贝一个图片1.png

在这里插入图片描述

02、修改test.html文件，加入图片的展示

在这里插入图片描述

03、结果，看不到图片

在这里插入图片描述

04、修改配置文件

在这里插入图片描述

05、结果，看不到图片

在这里插入图片描述

原因是因为静态文件配置了/static路径，location里面又配置了root，那么在目录中找文件的时候默认会再加上一个static，真实的寻找路径是 html/www/static/static路径，这个路径是没有的，因此404。

06、把root改为alias别名方式，结果

在这里插入图片描述

07、为了防止混乱，最好静态文件都建议用alias。此时修改html文件：

在这里插入图片描述

08、用正则表达式来配置静态资源

	location ~*\.(jpg|png|gif|js|css)$ {  
        root   html/www/static; 
    }

在这里插入图片描述

09、可以看到访问路径变成了根路径，我们在static下面新建一个image文件夹，把图片剪切到里面。这时候只要在后面带上/image/1.png就可以.

在这里插入图片描述

6.3.2、不同域名来拦截静态资源

01、图片位置

…/html/www/static/1.png

02、html 文件位置

…/html/www/test/test.html

03 、修改配置

test.html

<!DOCTYPE html>
<html>
 
<body>
	<h1>test to nginx!</h1>
	<img  src="http://static.learndemo.com:7000/1.png"/>
</body>
</html>

hosts

60.205.188.229 page.learnDemo.com
60.205.188.229 static.learnDemo.com

nginx.conf

worker_processes  1;
 
events {
 
	worker_connections  1024;
} 
http {
	 
	include       mime.types; 
	default_type  application/octet-stream; 
	sendfile        on; 
	keepalive_timeout  65;   
	
	#动态请求拦截
	server {
	 
		listen       7000; 
		server_name  page.learnDemo.com;
		root   html/www/test; 
 
		location / { 
			index  test.html;
		} 
	}
	 #静态请求拦截
	server {
	 
		listen       7000; 
		server_name  static.learnDemo.com;
		root   html/www/static; 
 
		location / { 
		
		} 
	}	
}

04 、效果

在这里插入图片描述

05 、优缺点

优点：
1. 扩展性比较强
2. 静态资源是什么都可以。
缺点：
1. 后端域名和前端不一致导致跨域问题.
  1. 配置相同的一级域名来解决
  2. 域名相同，端口不同来实现动静分离
  3. nginx通过配置可以解决
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

勤径苦舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nginx系统学习5--常用配置3--实现动静分离

6.3、实现动静分离6.3.1、正则表达式拦截静态资源01、上面的www目录中新建static目录，往里面拷贝一个图片1.png02、修改test.html文件，加入图片的展示03、结果，看不到图片04、修改配置文件05、结果，看不到图片原因是因为静态文件配置了/static路径，location里面又配置了root，那么在目录中找文件的时候默认会再加上一个static，真实的寻找路径是 html/www/static/static路径，这个路径是没有的，因此404。06
复制链接

扫一扫