基於node實現Vue打包部署指令碼

前端掃地增發表於2020-03-20

偶然看到一篇文章叫拋棄jenkins,擁抱node。雖然沒什麼興趣點進去看,但也給了我啟示,抽空寫了一個自動部署指令碼

本文使用到的node指令生成在之前文章有寫到,感興趣的可以跳轉過去:juejin.im/post/5dcbb4…

使用技術棧

  • ssh2 (使用ssh登入伺服器)
  • fs (檔案處理)
  • compress (壓縮指令碼)

思維圖

基於node實現Vue打包部署指令碼

程式碼壓縮

 compressing.zip
 .compressDir('./dist/.', './dist.zip')
 .then(() => {
     console.log(`Tip: 檔案壓縮成功`);
     conFun()
 })
 .catch(err => {
     console.log("Tip: 壓縮報錯");
     console.error(err);
 });

複製程式碼

使用函式: compressing.zip.compressDir(source, dest, opts)

注!!! source檔案路徑為:'./dist/.',效果為解壓出的檔案沒有dist目錄,如果需要dist檔案目錄則改成‘./dist’

連線函式

const params = {file: `./dist.zip`, target: `${servicePath}/dist.zip`}
// 連線函式
function conFun(){
  console.log('開始連線...');
  
  connection = new ssh2();
  connection.connect({
      "host": ip ,
      "username": user,
      "password": password
  });
  connection.on('error', function (err) {
      connection.end()
      console.log('連線失敗');
  });
  connection.on('ready', function () {
      upLoadFile(connection, params)
  });
}

// 上傳函式
function upLoadFile(conn, params) {
    const file = params.file  
    const target = params.target
    if (!conn) {
        return
    }
    conn.sftp(function (err, sftp) {
        if (err) {
            throw err
        }
        sftp.fastPut(file, target, {}, function (err, result) {
            if (err) {
                throw err
            }
            // 執行linux命令
            Shell(conn)
        })
    })
}
複製程式碼

params{file: localPath, target: servicePath}, file存放本地dist壓縮檔案,target為伺服器部署地 址

執行指令碼函式

// 執行指令碼函式
const comment = [
  `cd ${servicePath}`,
  'unzip -o dist.zip',
  'rm -f dist.zip',  
  'exit',
  'close'
]

function Shell(conn) {
    conn.shell(function (err, stream) {
        if (err) throw err;
        stream.on('close', function () {
          console.log('釋出完成!!');
          // 刪除壓縮包
          fs.unlinkSync('./dist.zip')
          conn.end();
        }).on('data', function (data) {
          console.log('STDOUT: ' + data)
        });
        stream.end(comment.join('\n'));
    });
    
}
複製程式碼

在伺服器上解壓dist壓縮包,隨後刪除壓縮包。

基於node實現Vue打包部署指令碼

打包後執行上傳指令碼

在安裝完node指令後,只需在vue的打包指令後加上打包指令即可

基於node實現Vue打包部署指令碼

這樣我們只需要在npm run build完成打包後自動將程式碼上傳到指定伺服器,完成自動部署。

完善

當專案較多需要多個部署環境,可以通過定義環境變數決定部署環境。

程式碼:github.com/justworkhar…

相關文章