简介
现在单页面网站开发一般会用 npm run build 执行 webpack 打包程序用来压缩 js css 之类。
某一天，跟同事交流时发现可以这样搞：
- 服务器上跑一个 nodejs 进程，如 http://yoursite.com:8080
- 在 Webpack 打包结束时自动 request.get 一下服务器 http://yousite.com:8080/?newhash=xxx
- 服务器接收到 get 请求后有 nodejs 脚本将单页面应用的 index.html 中引用的版本号替换成这个新的版本
实现最简便高效的发布新版本
详细步骤
服务器环节
用到三个文件：
- index.html 单页面应用入口
-
tpl.html 作为 index.html 的母版，引用的 js 地址为 http://CDN_URL/site-assets/xxx.VERSION.js，其中
__VERSION__是版本号的 placeholder - index.js 跑 nodejs 服务器和替换版本号程序的脚本
**index.js ** 代码示例
var startCopyHtml = function(newhash) {
var tplContent = fs.readFileSync('./tpl.html').toString()
tplContent = tplContent.replace('__VERSION__', newhash)
fs.writeFileSync('./index.html', tplContent)
}
require("http").createServer(function(req, res) {
var parsedUrl = require("url").parse(req.url, true);
var queryAsObject = parsedUrl.query;
if(queryAsObject.newhash) {
startCopyHtml(queryAsObject.newhash)
}
res.end('ok');
}).listen(8080);
以上代码只是示范，不要用于生产环境。
推荐可以做以下安全措施
- 本地设置特殊的请求头，服务器检查请求头。如特殊的 user agent
- 校验 newhash 参数
- 检查传入的 newhash 对应的 js 和 css 的 cdn 地址是否已生效（cdn 回源有延时）
- 白名单限制 IP 来源
- 本地和服务器做一个密文对照表，访问时带上密文进行验证
服务器环节配置可以参考：webpack-deploy-markdown-site-server
Webpack 配置环节
在 Webpack 中的 output.publicPath 配置为 CDN 的绝对地址。如：
config.output.publicPath = "http://__CDN_URL__/site-assets/"
config.output.filename = "build.[hash].js"
在 Webpack config.plugins 配置中，添加监听 done 事件的回调。在回调中执行以下任务：
- 同步 Webpack 打包好的静态资源到 CDN 的脚本
- 通过访问 http://yoursite.com:8080/?new-deploy-hash=xxx 来更新网站的静态资源引用地址。
config.plugins = [
function() {
this.plugin('done', function(stats) {
require('./upload-qiniu')
require('./update-assets-version')(stats.hash)
})
},
// 其他插件 ...
}
./upload-qiniu.js 代码
var qiniu = require('gulp-qiniu');
var cdnConfig = {
accessKey: "__QINIU_KEY__",
secretKey: "__QINIU_SECRET__",
bucket: "__QINIU_BUCKET__",
private: false
}
var uploadCdn = function (src, cdnDest) {
if(!src || !cdnDest)
return
cdnConfig.dest = cdnDest
require('vinyl-fs').src(src)
.pipe(qiniu(cdnConfig, {
dir: cdnDest,
versioning: false,
concurrent: 10
}))
}
uploadCdn(/*webpack打包产生的 build 地址*/'./build/**', 'site-assets/')
./update-assets-version.js
module.exports = function(hash) {
var deployHashUrl = 'http://yoursite.com:8080/?newhash=' + hash
require('http').get(deployHashUrl);
}
Demo
我的博客（http://zaishanda.com/）就是用这种方法部署的。
这个博客的代码在此：webpack-deploy-markdown-site
Q&A
安全吗？
服务器环节，替换 index.html 中的版本之前要检查传入的 newhash 对应的 cdn 地址是真实存在的才去替换。
再在服务器上加上 IP 白名单限制访问 http://yoursite.com:8080/ 这样就足够安全了。
跟 git 发布有什么优势啊?
比 git 发布门槛低很多。这个方案只要服务器上有 nodejs 就可以处理所有事情了。不用在服务器建 git repo，也不需要配置 hook 操作。
跟运行 ssh 命令把修改后的 index.html 上传比有何优势？
scp rsync 之类的部署方案得在 Webpack 中运行 ssh 脚本，这要每台本地机器都有 ssh 权限。还会在每台本地机器暴露服务器上的地址。
