hello大家好,今天来跟大家聊聊前端部署nginx的过程。其实很多前端小伙伴觉得完成一个项目后直接打个包扔给后端自己的任务就算结束了,或许在有些公司是这样,但是我个人觉得作为一个前端会配置nginx是肯定要会的,我也是一直没接触过nginx,我自己也搞了个腾讯云服务器,想着自己学着去配置,其实配置完之后你会发现单单去部署前端项目上线其实挺简单的,会稍微有一丢丢开心,因为今天又学到新知识啦嘿嘿,下面我来详细说下我配置的过程吧。
1.本地电脑配置(window系统)
1.1 第一步先下载nginx
下载地址:nginx.org/en/download… 建议大家下载稳定版的。
下载完后自己选择安装目录,然后找到文件位置,文件如下图:
1.2 nginx配置只需要在conf这个文件下的nginx修改配置
找到这个配置项,直接把我们前端项目打包出来的dist包的路径位置放在root项,比如我的dist包是放在我新建的itc文件夹下的,你们的dist包路径在哪就写哪,第三行的配置是配置我们项目的路由模式,当我们的项目采用hash方式的时候,没有经过服务器,能匹配到路由页面,但是如果你采用history模式的话,在本地是可以,但是到上线后你进入其中一个路由页面,你刷新浏览器会发现404,因为后端没有匹配到该路由页面,需要在nginx配置 try_files $uri $uri/ /index.html
这个刷新才会正常。
1.3 配置代理的api
1.4 配置gizp
在这里我就不说为什么要配置gizp了,我在上一篇文章写了性能优化总结,有兴趣可以看看
我先上nginx的gizp配置图:
今天配置gizp的时候我产生了一个疑惑,为什么在nginx配置了gizp,在前端还要在打包的再去压缩呢?
后来我去寻找答案终于解决了自己的疑惑,在我们前端打包出来的gizp,如果nginx中没有开启gizp,就算有gizp也不会解压,达不到我们优化性能的结果。所以无论前端有没有压缩包,只要nginx配置了gizp,浏览器就会把我们的资源进行压缩,这叫做动态压缩。动态压缩有一个问题,就是每次请求响应的时候都要压缩,其实都是相同的文件,总是压缩有点浪费资源。所以就需要我们前端把代码压缩啦,当我们去请求响应的时候,会先去我们的静态文件中找gizp包,如果存在直接返回,不存在gizp包,则返回原文件,这叫做静态压缩,这也是优化性能的一方面。
那我们怎么样去看资源到底有没有被压缩了呢?直接F12打开netword就可以一探究竟
如果资源超过1kb的后面就会出现gizp,则证明该资源经过压缩了,此时你可以去对比一下原文件会发现大小会小很多,这大大提高了浏览器的运行速度。
配置完后保存回到nginx文件位置双击ngin就开始运行了,打开任务管理器可以查看进程,此时你访问你的本地电脑ip地址即可访问到项目了,大概部署前端项目就这么多,还有其他的可以一起交流,第一次配置nginx有什么错误的地方可以指点指点。这是在window系统部署的,下面我贴个链接你们自行看看腾讯云服务器linux系统配置,配置方法跟window一样,只不过Linux中采用命令的形式去部署配置