Vue + Webpack 灰度發佈控制

目的

實現前端項目多個版本共存。若是隻存在一份資源，會致使每次修改都會影響到全部的用戶，對於持續更新的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) => {
    // 經過代碼進行實際的訪問控制
})

複製代碼

具體的要求還須要具體的去看，若是有什麼更好的方式，或者哪裏有問題，請留言～～