使用 Webpack 为单页面应用发布新版本
简介
现在单页面网站开发一般会用 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 权限。还会在每台本地机器暴露服务器上的地址。
原文链接：http://zaishanda.com/post/3
关键字：webpack, node.js, git, npm
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
