本地模拟服务器CDN(静态HTML,CSS,JS)开发
本地模拟服务器CDN(静态HTML,CSS,JS)开发
所谓本地开发环境就是和线上cdn(a.longencdn.cn)一样的目录结构和功能,提供了一个本地镜像,开发者直接在本地镜像的对应目录中作开发即可,包括一些html静态文件,css文件及JS文件等。比如说服务器cdn项目目录结构是 a.longencdn.cn/apps/js, 那么我们在本地也和服务器目录一样,访问 a.longencdn.cn 的时候 apache 首先在开发机上寻找文件,找不到去正式环境去 download 文件,一并返回给客户端。a.longencdn.cn/apps/js.这样做的好处有以下几点:
优点:
1. 调式比较方便。 比如线上要更改需求,比如要更改JS,css,那么我们把demo下载到本地,对本地的相应的JS,css更改,如果ok的话,把相应的JS,css文件提交到svn上即可。(因为本地的目录和线上一样的,所以他们会先查找本地的文件,如果没有找到再往服务器找相同的文件名js或者css。)。
2. 也可以模拟combo合并js,css文件。减少请求,提高性能。
比如雅虎的首页JS文件如下:
使用&符合合并或者压缩多个JS,css文件。
比如淘宝首页JS文件如下:
多个JS文件使用逗号(,)隔开,合并,减少请求数。这些都是使用combo进行文件合并,这些,我们完全可以使用php服务器在本地开发模拟,比如:
拔赤github上封装了合并及压缩JS,css文件的PHP,拔赤自动合并或者压缩JS/CSS 。下面我们来看看使用本地PHP来模拟线上CDN。
环境搭建
1. 安装PHP,我这边直接安装wamp5.
2. 进入apache根目录,打开配置文件 httpd.conf 如:
把以下文件都打开:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule expires_module modules/mod_expires.so
LoadModule include_module modules/mod_include.so
接着 再添加一句:让html执行PHP
AddType application/x-httpd-php .html .htm .php .phtml .shtml
将shtml支持打开(开启shtml主要是为了多人协作时更加方便)
# Virtual hosts
Include conf/extra/httpd-vhosts.conf
3. 添加虚机的配置,打开extra/httpd-vhosts.conf,将下面代码拷贝进去,并根据注释提示的内容,自行修改,主要是将 DocumentRoot 和 RewriteCond 中的路径(D:/dev/a.longencdn.cn/)如:
添加如下面代码:
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "D:/wamp5/wamp/www"
ServerName localhost #这里修改为你本机的开发目录
<Directory D:/wamp5/wamp/www>
Options +Includes
Order deny,allow
Allow from All
</Directory> </VirtualHost> <VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "D:/dev/a.longencdn.cn/"
ServerName a.longencdn.cn RewriteEngine On
RewriteCond %{QUERY_STRING} ^\?.*\.(js|css|js,|css,)$ [OR]
RewriteCond %{QUERY_STRING} ^\?.*\.(js?.+|css?.+)$ [OR]
RewriteCond %{REQUEST_FILENAME} -min\.(js|css) [NC]
RewriteRule ^/(.*)$ /cb.php?%{REQUEST_URI} [QSA,L,NS,NC] #这里D:/dev/a.longencdn.cn/修改为你本机开发目录
RewriteCond D:/dev/a.longencdn.cn/%{REQUEST_FILENAME} !-F #这里修改为你本机的开发目录
<Directory D:/dev/a.longencdn.cn>
Options +Includes
Order allow,deny
Allow from All
</Directory>
</VirtualHost>
其中:
DocumentRoot "D:/wamp5/wamp/www" 是指:如下图:
DocumentRoot "D:/dev/a.longencdn.cn/" 是在本地也建立了一个文件目录,D:/dev/a.longencdn.cn, 再下面就是放项目的文件,比如文件名叫apps,再把拔赤写的cb.php复制放到a.longencdn.cn根目录下,如:
其中cb.php文件相对应的地方也要改下:如
4. 接着打开hosts文件 绑定加一句 127.0.0.1 a.longencdn.cn 就ok了。 最后我们可以来演示下: 假如我项目文件apps下有js文件 其中里面有2个js文件,分别为a.js和b.js 代码分别如下: a.js
function A(){
console.log("我是A函数");
}
b.js
function B(){
console.log("我是B函数");
}
那么我们可以直接在本地服务器下访问a.js:如:
b.js访问如下:
当然我们可以连着写a.js,b.js 模拟淘宝的cdn代码,如下:
ok,通过以上可以看到,已经可以访问且对多个js合并了。 下面分别对拔赤的php文件 合并及压缩的文件提供下载 及 我本地的apache2 conf文件配置供下载:
1. 拔赤的php合并及压缩下载。
2. apache2 conf文件配置下载。
本地模拟服务器CDN(静态HTML,CSS,JS)开发的更多相关文章
- Gulp:静态资源(css,js)版本控制
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...
- 从零开始学JAVA(08)-使用SpringMVC4 Restful 风格引用静态文件 css/js/png
在写完helloworld后想给网页加点样式(*.css),结果怎么也显示不了,百度了很多种方法后试行尝试,试验成功并记录下来,方便以后查看. 时隔两年,继续学习JAVA,太久没学了,忘记得差不多,还 ...
- springboot拦截器拦了静态资源css,js,png,jpeg,svg等等静态资源
1.在SpringBoot中自己写的拦截器,居然把静态资源也拦截了,导致了页面加载失败. package com.bie.config; import com.bie.component.MyLoca ...
- django系列4.2--自定义标签, 自定义过滤器, inclusion_tag, 引入静态文件(css,js等)
项目的目录为 在app中创建templates时,最好要再创建一个app名相同的文件夹,因为项目找文件时从第一个app开始遍历,不同app内的同名文件会有冲突,所以这样处理 一.自定义标签和过滤器 1 ...
- django基础知识之管理静态文件css,js,images:
管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 STATIC_URL = '/static/' STATICFILES_DIRS = [ o ...
- YII2-按需加载并管理静态资源(CSS,JS)
参考博客: https://segmentfault.com/a/1190000003742452#articleHeader5
- “限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
里面有80款小游戏源码,支持内置导航,可以拿来练手或者消磨时间,具体功能以及游戏请看下图 维京战争小游戏源码 链接:https://pan.baidu.com/s/ ...
- Spring-Boot整合freemarker引入静态资源css、js等
一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...
- Spring-Boot整合freemarker引入静态资源css、js等(转)
一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/mai ...
随机推荐
- 十分钟搞定mac下的phpstorm增加xdebug调试
一.版本信息 mac 10.10.5 php 5.5.38 phpstorm 10.0.3 xdebug 版本需要与php匹配,匹配地址 :点我匹配 点我查看所有版本 提示:不确定xdebug ...
- oracle 中如何查询当前用户可以看到的表名、表对应的所有字段
前言:利用 oracle 的视图来查询表的相关信息. oracle 查询当前用户下的表名 + 表注释 select t.table_name tableName, f.comments comment ...
- django-templates过滤器
常用内置过滤器: 过滤器会更改量或便签参数的值: title过滤器: {{ django|title }} 在下列context中 {'django': 'the web framework for ...
- maven插件 按配置加载不同环境配置文件进行打包(maven-war-plugin)
1.配置多种不同环境 如(本地local,开发dev,测试test 环境等) <profiles> <profile> <id>local</id> & ...
- influxdb-1.7.2.x86_64安装 install influxdb-1.7.2.x86_64 on RedHat & CentOS
1.下载安装 wget http://dl.influxdata.com/influxdb/releases/influxdb-1.7.2.x86_64.rpm https://portal.infl ...
- 帆软发布大数据直连引擎FineDirect,对焦大数据BI
摘要:近日,帆软官方正式发布大数据直连引擎FineDirect模块.通过该模块,企业在应用FineBI原有功能的基础上,可直接对接现有数据源,无论是传统的关系型数据库,还是Hadoop生态圈.Mpp构 ...
- OpenCV 线条及形状
1.线条 # dst 相当于画板 dst=np.zeros((300,300,3),np.uint8) # #参1 图像 参2 起始点 参3 结束点 参4 颜色 line=cv2.line(dst,( ...
- java EE 监听器
生命周期监听器与属性改变监听器都必须使用@WebListener或在web.xml中声明,容器才会知道要加载.读取相关的监听器.
- Expo大作战(九)--expo的工作原理,以及版本发行说明
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,将全部来与官网 我猜去全部机翻+个人 ...
- windows 7 下安装Oracle 9i 解决方法[转]
这里首先申明下,windows7下安装oracle9i 9.0.1版本肯定是不成功的,楼主安装过无数次,网上也找过很多方法,都不可行,所以就不用试了.这里说下oracle9i 9.2版本安装出现的问题 ...