程序员的nginx技能包(3)——静态资源管理,资源井井有条,生活风花雪月

点此查看全部文字教程、视频教程、源代码

背景

每次新建项目,都要到处找各种静态资源,是不是很烦。
找那些公司logo图片…
找那些前端样式css…
找那些前端框架vue、jquery…

静态资源太多,前端页面响应慢是不是很烦。
要整理css、js了,否则加载慢…
图片要小一点,否则加载慢…
两个项目都要用公司logo图片,每个项目都得放一份,否则一个项目停了另一个项目咋办…

确实很烦,因为很乱。
自从搞了前端,风花雪月何时再有?敢问苍天能否予一碗酒…
苍天答:用nginx,无烦恼

优势

nginx管理静态资源,优势不少

  1. 首先速度快,性能高,这是nginx看家本领
  2. 多个项目共享资源
  3. 条理而规范
  4. 尽显高端水准…

方法

round1 收集需要部署的静态资源

无非是图片、前端框架等,新建一个目录resoure ,内容如下:

-resource 所有资源根目录
--static 静态资源根目录
----images 图片目录
------1.jpg 测试图片
----plugins 插件目录
------jquery jquery插件
--------jquery.min.js js文件

然后将resource整个文件夹放到nginx目录下。

round2 修改nginx配置文件

虽然在nginx目录下放了自己的东西,但是nginx不认识啊,所以修改下nginx.conf,在server内新增一个location配置

	server {
        listen       80;
        server_name  localhost;
	    #新增部分开始
        location /static/{
            root resource/;
        }
        #新增部分结束
	}

大约解释下location /static/表示匹配含有/static/的请求。root /resource;表示该类请求对应的nginx根目录为resource。
也就是说如果请求/static/test.html,就是请求resource目录下的/static/test.html。

round3 重启后测试

执行nginx -s reload重启,然后浏览器地址栏输入http://127.0.0.1/static/plugins/jquery/jquery.min.js测试,结果如下:
图片描述

从此

从此程序员应该有更多时间做喜欢的事情了。

只需要把css、js、图片、框架等扔给nginx。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员大阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值