Web应用部署

1 从浏览器缓存问题讲起

对于单应用型网页,假设入口为 index.html, 它引用一些js与css。(部分js会动态加载其它js文件) 当其中的一些文件更新后,看到的现象:

经分析:

我们希望的结果是:

1.1 解决方法

注意:

1.1.1 解决主页文件缓存

在Apache的配置文件中设置目录的AllowOverride All权限,允许目录使用.htaccess自定义规则:

<Directory "/alidata/www/default/cheguanjia/">
	Options FollowSymLinks
	AllowOverride All
	
	Order allow,deny
	Allow from all
#    Require all granted
</Directory>

(新版本的apache可以用Require语句替代上两句)

对于想要禁用缓存的目录(例如移动客户端目录 m2 下),可以添加配置文件 .htaccess:

<FilesMatch "(\.html|\/)$">
	#Header set Cache-Control "max-age=604800"
	Header set Cache-Control "no-cache"
</FilesMatch>

注意:成熟的Web服务器一般都支持文件版本(通过ETag等)检查,即浏览器请求的文件如果没有变化,则不会传输文件。 因而,设置"no-cache"并不意味着客户端每次都要重新到服务器取文件,而是要求浏览器每次都去服务器检查文件是否需要更新。

1.1.2 解决关联文件缓存

对所有的易变资源, 引用时加个标识如__HASH__

html中:
<script src="main.js"></script>
-->
<script src="main.js?__HASH__"></script>

JS中:

loadScript("cordova/cordova.js"); 
-->
loadScript("cordova/cordova.js?__HASH__"); 

通过编译工具以上最终生成

<script src="main.js?v=321f2a"></script>

(__HASH__被改成文件的sha1代码后6位)

以上修改风格称为“覆盖式发布”。如果要使用“非覆盖式发布”,编译工具可生成:

<script src="main_321f2a.js"></script>

2 Web应用编译及部署

2.1 需求

编译工具需求:

部署工具:

2.2 设计

编译工具webcc

webcc {src-folder} -o {web-folder} 

[参数]

src-folder
使用git管理的源代码目录,我们用xeyc-sys/server
web-folder
使用git管理的实际web目录,我们用xeyc-sys-web, 它与ftp上的相应目录应保持一致。

[工作原理]

webcc做以下工作:

它结合git工作,比如取要处理的所有文件,用 git ls-files 取某版本以来的文件,用 git diff rev1 head --name-status 更新完成后,输出VERSION_SRC文件。

[配置文件]

{src-folder}下的webcc.conf.php为配置文件。

示例:

<?php

$COPY_EXCLUDE = [
	'm1/*',
	'wap/*'
];

/*
$FILES = [
	'm2/index.html'
];
 */

$RULES = [
	'm/*.html' => 'HASH', // 对m目录下所有html文件进行HASH处理
	'm/app_fw.js' => 'HASH',  对 m/app_fw.js 文件进行HASH处理

	// 指定脚本,其中先做了js文件归并,再用jsmin工具做压缩; $TARGET表示最终文件。
	'm2/cordova/cordova.js' => '
cd m2/cordova
cat cordova.js cordova_plugins.js \
	plugins/cordova-plugin-splashscreen/www/splashscreen.js \
	plugins/org.apache.cordova.camera/www/Camera.js \
	plugins/org.apache.cordova.camera/www/CameraConstants.js \
	plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js \
	plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js \
	| jsmin > $TARGET ',
];
?>

解读:

[HASH处理规则]

__HASH__ 标识换为实际文件的hash值。对html文件,还可根据WEBCC_BEGIN等标识做文件归并。

例如: m2/index.html中:

	<script src="../m/app_fw.js?__HASH__"></script>

将会替换为

	<script src="../m/app_fw.js?v=3a4bac"></script>

webcc在找文件时,自动以当前文件 (m2/index.html)所在目录(即m2目录)作为相对目录去找。如果目录不正确,可用 __HASH__,{dir} 方式指定正确目录.

例如,在 m/app_fw.js 中:

	loadScript("cordova-ios/cordova.js?__HASH__,m2");  // 缺省webcc以 m/app_fw.js 所在目录即 "m/" 来找文件,而这里指定了目录为 "m2/", 所以webcc会查找文件 "m2/cordova-ios/cordova.js".

可以在html文件中定义了归并规则,例如文件 m2/index.html 中定义

<!-- WEBCC_BEGIN -->
		<script src="../m/common.js"></script>
		<script src="../m/app_fw.js"></script>
		<script src="../m/app.js"></script>
<!-- WEBCC_USE_THIS
		<script src="../m/app.min.js?__HASH__"></script>
WEBCC_END -->

这表示:

2.3 网站发布步骤

工具:

准备:

发布步骤:

注意:

3 附录

推荐: