部署scp2自動上傳到伺服器

Meriodas發表於2021-03-26

vue-cli專案+scp2 編譯後,部署到伺服器

npm run build  // 構建
npm run deploy // 部署到伺服器

我的專案是vue-cli +寶塔 後端用fastadmin。
每次修改完vue的檔案後都要打包,壓縮,上傳,解壓十分麻煩。因此配合scp自動化完成這一系列步驟是十分舒服的事情。配置很簡單

  1. 安裝依賴 npm i scp2 ora read chalk -D
  2. 伺服器資訊 deploy.config.js
  3. 新增npm命令

一. 根目錄(與package.json同級)建立deploy.config.js檔案

// deploy.config.js
module.exports = {
  production: {
    ssh: {
      host: '',  //ip地址
      username: '', //使用者名稱
      password: ''  // 密碼
    },
    distPath: '',  // 線上要放 dist資料夾的目錄 如: public/
    targetPath: '', // 目錄 如: /www/wwwroot/xxx/
    checkBranch: false
  }
}

二. 根目錄(與package.json同級)建立deploy.js檔案

// deploy.js  ---------------------------------------------------
const scpClient = require('scp2')
// node模組 - node.js 命令列環境的 loading效果和顯示各種狀態的圖示
const ora = require('ora')
const chalk = require('chalk')
const read = require('read')
const path = require('path')

function upload (server) {
  // 命令 提示文字
  console.log(chalk.green('Scp2釋出模式-->請確認釋出資訊:'))
  console.log(chalk.green('> 環境:' + server.name))
  console.log(chalk.green('> 伺服器:' + server.username + '@' + server.host))
  console.log(chalk.green('> 伺服器釋出路徑:' + server.path))
  read({
    prompt: '確定執行釋出操作嗎?(yes/no)'
  },
  async (err, text) => {
    if (err) {
      console.log('err', err.stack)
    }
    const spinner = ora(
      '正在釋出到' +
      (process.env.NODE_ENV === 'prod' ? '生產' : '測試') +
      '伺服器...'
    )
    // loading
    spinner.start()
    if (text === 'yes') {
      // 執行scp2庫,上傳檔案
      // 第一個引數:要上傳到伺服器的檔案
      // 第二個引數:伺服器配置
      // 第三個引數:上傳回撥函式
      scpClient.scp(
        './dist/', {  // 本地專案目錄
          host: server.host,
          username: server.username,
          password: server.password,
          path: server.path
        },
        function (err) {
          spinner.stop()
          if (err) {
            console.log(chalk.red('釋出失敗.\n'))
            throw err
          } else {
            console.log(
              chalk.green(
                (process.env.NODE_ENV === 'production' ? '生產' : '測試') +
                '伺服器部署完成!\n'
              )
            )
          }
        }
      )
    } else {
      spinner.stop()
    }
  }
  )
}

// 獲取配置
const rcPath = path.resolve('deploy.config.js')
const oldConfig = require(rcPath)
const serverZeploy = oldConfig['production']
const server = {
  name: process.env.NODE_ENV,
  username: serverZeploy.ssh.username,
  password: serverZeploy.ssh.password,
  host: serverZeploy.ssh.host,
  path: serverZeploy.targetPath + '/' + serverZeploy.distPath
}
upload(server)

三. 在package.json 加入一行 "deploy": "node deploy.js"

新增npm命令

執行效果

本作品採用《CC 協議》,轉載必須註明作者和本文連結
K'

相關文章