NodeJS前端自動(dòng)化部署實(shí)現(xiàn)實(shí)例詳解

更新時(shí)間：2023年10月26日 14:09:59 作者：碰磕

這篇文章主要為大家介紹了NodeJS前端自動(dòng)化部署實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

手動(dòng)部署

所需工具

xshell:連接服務(wù)器工具

xftp:圖形化界面?zhèn)鬏斘募ぞ?可有可無(wú),減少命令實(shí)現(xiàn)部分工作

打包并部署

打包

npm run build

一般是上方這個(gè)項(xiàng)目打包命令，具體看項(xiàng)目配置

部署

采用xshell配合x(chóng)ftp手動(dòng)copy文件覆蓋

- 使用xshell連接云服務(wù)器，

- 再使用nginx指向打包文件的地址路徑，然后將打包好的文件放在指定路徑

自動(dòng)部署

天天重復(fù)上邊的工作無(wú)非覺(jué)得浪費(fèi)時(shí)間了，乍一看nodejs好像可以幫我們實(shí)現(xiàn)連接服務(wù)器并且上傳文件等，可以省去這部分繁瑣工作，讓我們開(kāi)始吧！~

安裝依賴

"inquirer": "^8.2.0",

"ssh2-sftp-client": "^9.0.4"

Inquirer 是常規(guī)交互式命令行用戶接口的集合，提供給 Node.js 一個(gè)方便嵌入，漂亮的命令行接口，用于命令行提示交互

ssh2-sftp-client為 node.js 基于 ssh2 封裝的， SFTP客戶端，用于連接操作服務(wù)器

代碼編寫(xiě)

在項(xiàng)目根目錄下創(chuàng)建文件夾deploy方便管理

編寫(xiě)命令行交互文件helper.js

const inquirer = require('inquirer')
new inquirer.Separator()
const selectTip = 'project name:'
const options = [
  {
    type: 'checkbox',
    name: selectTip,
    message: `您希望把項(xiàng)目部署到哪個(gè)環(huán)境？`,
    choices: []
  }
]
// 顯示選擇提示窗
function showHelper (config) {
  console.log("config=",config)
  return new Promise((resolve, reject) => {
    initHelper(config) // 初始化helper
    inquirer.prompt(options).then(answers => {
      console.log(answers,answers[selectTip],selectTip)
      resolve({ value: findInfoByName(config,["測(cè)試環(huán)境"]) }) // 查找所選配置項(xiàng)
    }).catch((err) => {
      reject(console.error(' helper顯示或選擇出錯(cuò)！', err))
    })
  })
}
// 初始化helper
function initHelper (config) {
  for (let item of config) {
    options[0].choices.push(item.name)
  }
  console.log('正在檢查全局配置信息...')
  // 檢查是否存在相同name
  if (new Set(options[0].choices).size !== options[0].choices.length) {
    console.error('請(qǐng)檢查配置信息，存在相同name！')
    process.exit()
  }
}
// 查找符合條件的配置項(xiàng)
function findInfoByName (config, nameArr) {
  console.log("自定義配置",config,"選中的環(huán)境",nameArr)
  const arrInfo = []
  for (let item of config) {
    for(let name of nameArr) {
      console.log(name,item)
      if(item.name === name) {
        arrInfo.push(item)
      }
    }
  }
  return arrInfo
}
module.exports = showHelper

編寫(xiě)操作服務(wù)器進(jìn)行上傳發(fā)布文件ssh.js

const Client = require('ssh2-sftp-client')
const helper = require ('./helper')
const config = [
  {
    name: '測(cè)試環(huán)境',
    enviroment: 'development',
    ssh: {
      host: '你的服務(wù)器地址',
      port: 22,//端口號(hào)
      username: '服務(wù)器用戶名',
      password: '服務(wù)器密碼',
    },
    romotePath: '/lvdu/appHtml',// 遠(yuǎn)程地址
    localPath:'../dist',// 本地地址
  }
]
function connect(config) {
  const sftp = new Client()
  return sftp
    .connect(config.ssh)
    .then(() => {
      console.log(`正在部署 ${config.name}`)
      return sftp.uploadDir(config.localPath, config.romotePath)
    }).finally(() => {
      sftp.end()
    })
}
async function main() {
  const ps = []
  const table = []
  const SELECT_CONFIG = (await helper(config)).value // 所選部署項(xiàng)目的配置信息
  console.log(SELECT_CONFIG)
  for(let config of SELECT_CONFIG) {
    table.push({
      enviroment: config.enviroment,
      status: 'OK'
    })
    ps.push(() => connect(config))
  }
  const p = Promise.resolve()
  ps.reduce((p, c) => {
    return p.then(c)
  }, p).then(() => {
    console.log('success completed')
    console.table(table);
  }).catch((err) => {
    console.log(err,'出了點(diǎn)問(wèn)題，快去看看吧~~')
  })
}

main()

最后可編寫(xiě)腳本文件deploy.sh用于執(zhí)行上方文件，也可手動(dòng)執(zhí)行