Vue + Webpack 灰度發佈控制

目的

實現前端項目多個版本共存。若是隻存在一份資源,會致使每次修改都會影響到全部的用戶,對於持續更新的Web項目來講,須要保證每次的修改只會影響到小部分用戶,而不是全部的,控制範圍,減小損失。html

實現

項目採用的是git版本控制前端

原直接以master分支做爲production,功能修改完善合併到master上,而後直接在master上編輯提交,線上更新代碼。vue

如今修改爲:經過分支來控制,並保留多份代碼,保留之後老版本修改的可能性webpack

  • 從master生成分支release-1.0.0
  • releaes-1.0.0 在線上部署,經過指定路徑來訪問改目錄的編譯後文件
  • 當有其餘新功能時,產生新的分支release-x.x.x,部署訪問

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

項目配置的修改

  • 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配置

配置Apachegit

當訪問test.com/xxx,訪問的是實際服務器部署的test目錄下xxx/dist/index.html文件web

訪問多個版本

本來服務器上以後一個test目錄,全部的文件都在test目錄下,包括編譯後的文件vue-router

如今服務器的test目錄下有多個文件,若是vxx1, vxx2,根據實際的路由狀況,訪問到具體的目錄下,若是有必要shell

  • 能夠以ip 或cookie 經過nginx來控制訪問
  • 能夠經過登錄後的信息,在實際的項目代碼中來控制
// vue-router 中有beforeEach
router.beforeEach((to, from, next) => {
    // 經過代碼進行實際的訪問控制
})

複製代碼

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

相關文章
相關標籤/搜索