Vue + Webpack 灰度釋出控制

_zysndy發表於2018-03-11
VueWeb

目的

實現前端專案多個版本共存。如果只存在一份資源，會導致每次修改都會影響到所有的使用者，對於持續更新的Web專案來說，需要保證每次的修改只會影響到小部分使用者，而不是所有的，控制範圍，減少損失。

實現

專案採用的是git版本控制

原直接以master分支作為production，功能修改完善合併到master上，然後直接在master上編輯提交，線上更新程式碼。

現在修改成：通過分支來控制，並保留多份程式碼，保留以後老版本修改的可能性

  • 從master生成分支release-1.0.0
  • releaes-1.0.0 線上上部署，通過指定路徑來訪問改目錄的編譯後檔案
  • 當有其他新功能時，產生新的分支release-x.x.x，部署訪問

最後達到test.com/v1/，test.com/v2 這種訪問效果。

專案配置的修改

  • config/index.js 
// webpack 編譯的配置檔案，
// 主要修改時動態改變編譯後的檔案放置目錄，配合Apache控制訪問

// 增加版本獲取函式 getVersion()，通過匹配當前版本名稱，來獲取具體的版本號
// 要求，對版本號的命名有格式的要求
var shell = require('shelljs')
var os = require('os')
function getVersion() {
  function exec (cmd) {
    return shell.exec(cmd, {silent: true}).toString().trim()
  }
  var releaseName = exec("git branch -vv|grep '*'")
  if (os.platform === 'win32') {
    releaseName = exec("git branch -vv|findstr '*'")
  }
  var reg = /\[origin\/release\-v[\d.?]*\]/
  if (reg.test(releaseName)) {
    var arr = releaseName.match(reg)
    return arr[0].replace('[origin/release-', '').replace(/\./g, '').replace(']', '').toString()
  }
}

// 修改env配置 和 build下的assetsPublicPath
module.exports = {
  build: {
    env: {...require('./prod.env'), version: "'" + getVersion() + "'"},
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/' + getVersion() + '/',
  },
  dev: {
    env: {...require('./dev.env'), version: "'" + getVersion() + "'"},
  }
}

複製程式碼
  • src/router/index.js
// 修改route陣列，增加根path路徑
mode: 'history',
routes: [
    {
      path: process.env.NODE_ENV === 'development' ? '/' : ('/' + process.env.version + '/'),
      component: xxx,
      children: [
          ...
      ]
    }
]
複製程式碼

上線時Apache配置

配置Apache

當訪問test.com/xxx，訪問的是實際伺服器部署的test目錄下xxx/dist/index.html檔案

訪問多個版本

原本伺服器上之後一個test目錄，所有的檔案都在test目錄下，包括編譯後的檔案

現在伺服器的test目錄下有多個檔案，如果vxx1， vxx2，根據實際的路由情況，訪問到具體的目錄下，如果有必要

  • 可以以ip 或cookie 通過nginx來控制訪問
  • 可以通過登陸後的資訊，在實際的專案程式碼中來控制
// vue-router 中有beforeEach
router.beforeEach((to, from, next) => {
    // 通過程式碼進行實際的訪問控制
})

複製程式碼

具體的要求還需要具體的去看，如果有什麼更好的方式，或者哪裡有問題，請留言～～

相關文章