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 、优缺点
-
优点:
- 扩展性比较强
- 静态资源是什么都可以。
-
缺点:
- 后端域名和前端不一致导致跨域问题.
- 配置相同的一级域名来解决
- 域名相同,端口不同来实现动静分离
- 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;
- 后端域名和前端不一致导致跨域问题.