使用 Webpack 为单页面应用发布新版本

2024年4月13日 139次阅读 来源: 肖建锋

简介

现在单页面网站开发一般会用 npm run build 执行 webpack 打包程序用来压缩 js css 之类。
某一天，跟同事交流时发现可以这样搞：

实现最简便高效的发布新版本

详细步骤

服务器环节

用到三个文件：

  • 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 事件的回调。在回调中执行以下任务：

  1. 同步 Webpack 打包好的静态资源到 CDN 的脚本

  2. 通过访问 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

    原文作者：肖建锋
    原文地址: https://segmentfault.com/a/1190000005721559
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞