使用 Webpack 為單頁面應用釋出新版本

蕭大俠發表於2016-06-15
Web

簡介

現在單頁面網站開發一般會用 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 事件的回撥。在回撥中執行以下任務：

  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

相關文章