vue-cli專案+scp2 編譯後,部署到伺服器
npm run build // 構建
npm run deploy // 部署到伺服器
我的專案是vue-cli +寶塔 後端用fastadmin。
每次修改完vue的檔案後都要打包,壓縮,上傳,解壓十分麻煩。因此配合scp自動化完成這一系列步驟是十分舒服的事情。配置很簡單
- 安裝依賴
npm i scp2 ora read chalk -D
- 伺服器資訊 deploy.config.js
- 新增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"
執行效果
本作品採用《CC 協議》,轉載必須註明作者和本文連結