searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

前端dist文件实现半自动化部署

2024-03-29 09:25:26
42
0

用脚本实现连接服务器进行文件传输过程,保证打包后能够运行脚本自动化上传文件,打包部署命令为:npm run build:deploy

脚本实现原理:

利用node中ssh进行文件传输,前提是需要连通服务器以及服务器开启ssh。 脚本实现过程分两步:

  1. 连接远程服务器,并修改服务器dist文件名称
// 安装node-ssh包
const { NodeSSH } = require('node-ssh')

async function main() {
    const ssh = new NodeSSH()
    // 获取当前日期
    const currentDate = new Date().toISOString().split('T')[0]
    // 新dist文件名
    const newDistName = `dist-${currentDate}`
    // 旧dist文件名
    const oldDistName = 'dist'
    
    try {
        // 连接远程服务器
        await ssh.connect({
            host: 'xxx.xxx.xxx.xxx',
            username: '用户名',
            password: '密码'
        })
        // 判断服务器dist文件是否存在
        let i = 1
        let newDistExists = await ssh.execCommand(`ls /nginx/${newDistName}-${i}`)
        while(newDistExists.code === 0) {
            i ++
            newDistExits = await ssh.execCommand(`ls /nginx/${newDistName}-${i}`)
        }
        // 重命名旧的dist文件
        await ssh.execCommand(`mv /nginx/${oldDistName} /nginx/${newDistName}-${i}`)
        console.log('远程服务器操作成功!')
    } catch(error) {
        console.error('远程服务器操作失败:', error)
        ssh.dispose()
        return
    }
}
  1. 上传新dist文件
try {
    // 上传dist目录到nginx服务器
    await ssh.putDirectory(oldDistName, '/nginx/dist/', {
        recursive: true,
        concurrency: 10,
        tick(localPath, remotePath, error) {
            if(error) {
                console.log(`无法上传${localPath}到${remotePath}: ${error}`)
            } else {
                console.log(`${localPath}上传至${remotePath}`)
            }
        }
    })
    console.log('dist目录上传成功!')
} catch(error) {
    console.error('上传dist目录失败:', error)
}
// 断开ssh连接
ssh.dispose()

main()

由于通过ssh.connect连接服务器,可能存在安全风险,此种方式安全性有待考证!

其中服务器信息采用password-prompt插件,将用户名密码采用terminal终端窗口输入,同时不保存输入记录

const passwordPrompt = require('password-prompt')
const getUsernameAndPassword = async() => {
    const username = await passwordPrompt('Enter your username:')
    const password = await passwordPrompt('Enter your password:', { method: 'hide' })
    return { username, password }
}

将输入的username、password输入到远程服务器即可

0条评论
0 / 1000
w****n
17文章数
1粉丝数
w****n
17 文章 | 1 粉丝
原创

前端dist文件实现半自动化部署

2024-03-29 09:25:26
42
0

用脚本实现连接服务器进行文件传输过程,保证打包后能够运行脚本自动化上传文件,打包部署命令为:npm run build:deploy

脚本实现原理:

利用node中ssh进行文件传输,前提是需要连通服务器以及服务器开启ssh。 脚本实现过程分两步:

  1. 连接远程服务器,并修改服务器dist文件名称
// 安装node-ssh包
const { NodeSSH } = require('node-ssh')

async function main() {
    const ssh = new NodeSSH()
    // 获取当前日期
    const currentDate = new Date().toISOString().split('T')[0]
    // 新dist文件名
    const newDistName = `dist-${currentDate}`
    // 旧dist文件名
    const oldDistName = 'dist'
    
    try {
        // 连接远程服务器
        await ssh.connect({
            host: 'xxx.xxx.xxx.xxx',
            username: '用户名',
            password: '密码'
        })
        // 判断服务器dist文件是否存在
        let i = 1
        let newDistExists = await ssh.execCommand(`ls /nginx/${newDistName}-${i}`)
        while(newDistExists.code === 0) {
            i ++
            newDistExits = await ssh.execCommand(`ls /nginx/${newDistName}-${i}`)
        }
        // 重命名旧的dist文件
        await ssh.execCommand(`mv /nginx/${oldDistName} /nginx/${newDistName}-${i}`)
        console.log('远程服务器操作成功!')
    } catch(error) {
        console.error('远程服务器操作失败:', error)
        ssh.dispose()
        return
    }
}
  1. 上传新dist文件
try {
    // 上传dist目录到nginx服务器
    await ssh.putDirectory(oldDistName, '/nginx/dist/', {
        recursive: true,
        concurrency: 10,
        tick(localPath, remotePath, error) {
            if(error) {
                console.log(`无法上传${localPath}到${remotePath}: ${error}`)
            } else {
                console.log(`${localPath}上传至${remotePath}`)
            }
        }
    })
    console.log('dist目录上传成功!')
} catch(error) {
    console.error('上传dist目录失败:', error)
}
// 断开ssh连接
ssh.dispose()

main()

由于通过ssh.connect连接服务器,可能存在安全风险,此种方式安全性有待考证!

其中服务器信息采用password-prompt插件,将用户名密码采用terminal终端窗口输入,同时不保存输入记录

const passwordPrompt = require('password-prompt')
const getUsernameAndPassword = async() => {
    const username = await passwordPrompt('Enter your username:')
    const password = await passwordPrompt('Enter your password:', { method: 'hide' })
    return { username, password }
}

将输入的username、password输入到远程服务器即可

文章来自个人专栏
Vue前端开发
17 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0