nginx优化

1.前端history模式404问题:

location / {
    try_files $uri $uri/ /index.html;
}

这段代码的作用是,当用户刷新页面时,Nginx会先检查当前URL是否存在,如果不存在,就会尝试访问index.html,从而可以正常显示页面。
在这里插入图片描述
2.反向代理:
目前前端的主流解决跨域的方式就是
1.开发生产cors解决
2.开发proxy,生产nginx解决。
配置:

#接口端
        location /police/ {
            proxy_pass   http://192.168.1.182:8852/police/;
            proxy_redirect default;
            proxy_http_version 1.1;
            proxy_connect_timeout   60;
            proxy_send_timeout      60;
            proxy_read_timeout      90;
        }

位置:
在这里插入图片描述
理解:
这段代码的意思:大致就是如果遇到以/police请求开头的接口,那么就去访问这个ip地址(http://192.168.1.182:8852/police/)的后台端口。
例如我们通过axios去访问/police/getList这个后台接口时,nginx会将这个请求转发到ip端口为http://192.168.1.182:8852的后台中,后台将结果返回给nginx,nginx再把结果给到浏览器,实现反向代理。

定义多个端口的反向代理:
在这里插入图片描述
3.开启gzip:
作用:
开启gzip对于前端来说还是比较重要的,浏览器加载的包大概能节约一半的空间。例如首页需要加载a.js文件,该文件为900kb,在开启gzip之后,浏览器会去加载a.js经过gzip之后的文件a.js.gz,大概只有450kb,能够很好的提升浏览速度。
配置:

gzip on; # 默认off,是否开启gzip
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# 上面两个开启基本就能跑起了,下面的愿意折腾就了解一下
gzip_static on;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
# gzip_min_length 1k;
gzip_http_version 1.1;

位置:
在这里插入图片描述

4.维护页面:
作用:
在系统进行维护升级时,用户打开我们的网站看到的维护页面。
配置:

 # 系统临时维护请打开下面这行注释,并重启nginx,维护完毕后请注释下年这行,并重启nginx
 # rewrite ^(.*)$ /maintainace.html break;

位置:
在这里插入图片描述
5.一个ip上线多个网站:
作用:
只有一个ip。利用nginx上线多个网站。例如访问192.168.1.154:8080访问我们的个人博客网站,访问192.168.1.154:8081访问我们的直播网站。
配置:
直接复制server块即可,一个server块就代表了一个网站,需要改端口和文件的路径等内容。

 # 第一个网站:个人博客项目配置
	  server {
	  	listen       8080;
	  	root         /data/www/hexo;
	  	index        index.html;
	  	location / {
	  		try_files $uri $uri/ /index.html; # 路由模式history的修改
	  	}
	  }

    # 第二个网站:直播网站项目配置
    server {
    	listen       8081;
    	root         /data/www/geov;
    	index        index.html;
    	location / {}
    }

位置:
在这里插入图片描述注意点:
1.这里的8081一定要你的服务器开放了这个端口才可以使用,否则你按照这个配置了也会访问不到(让后端去配)。
2.如果是云服务器(比如阿里云,腾讯云),则需要开放相应的入口为8081,否则用户访问不到。

6.动静分离
作用:
在Web开发中,通常来说,动态资源其实就是指那些后台资源,而静态资源就是指HTML,JavaScript,CSS,img等文件。
一般来说,都需要将动态资源和静态资源分开,将静态资源部署在Nginx上,当一个请求来的时候,如果是静态资源的请求,就直接到nginx配置的静态资源目录下面获取资源,如果是动态资源的请求,nginx利用反向代理的原理,把请求转发给后台应用去处理,从而实现动静分离。
在使用前后端分离之后,可以很大程度的提升静态资源的访问速度,同时在开过程中也可以让前后端开发并行可以有效的提高开发时间,也可以有些的减少联调时间 。
解析:
实际上我们在代理前端的html和接口时就已经做到了动静分离。我们打包后的dist包实际上就是纯静态的资源,所以直接访问nginx静态资源服务器,就不需要经过后台的tomcat。访问接口时,就需要nginx先去访问后台服务器,拿到结果再给到浏览器
在这里插入图片描述
图解:
在这里插入图片描述
如何配置(其实是优化,因为一般配置会有动静分离):
假设有比较大的图片等需要放置到服务器上,然后通过nginx来转发。或者是有一个纯前端的开源项目(如pdf.js),也需要放在服务器上。如果放在本地代码包,打包出来体积会很大。

location /image/ {
  root   /var/filecenter/;
}
location /static/ {
  root   /var/filecenter/;
}
location /car/ {
  root   /var/filecenter/;
}
location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
  root /Users/dalaoyang/Downloads/static;
}

位置:
在这里插入图片描述

nginx基础命令:安装,启动,重启,关闭:
安装nginx: yum install nginx
看是否有nginx进程:netstat -anput | grep nginx
查看服务器端口占用情况:netstat -ntlp
nginx启动:nginx
nginx重启: nginx -s reload
关闭nginx:
nginx -s stop : 快速停止nginx
nginx -s quit :完整有序的停止nginx
查看默认的nginx配置文件路径: nginx -t
注:如果有nginx.conf配置的更改,需要重启nginx配置才会生效。如果只是更改dist包/html,则可以不重启nginx。

参考文章:http://t.csdnimg.cn/GbID9

  • 25
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值