前端半自动化部署

在前端项目部署时，通常会经历以下步骤：

构建项目 ：在部署之前，需要使用相应的构建工具（如Webpack、Vite等）对项目进行构建，生成生产环境所需的静态文件（如HTML、CSS、JavaScript、图片等）。构建过程中通常会进行代码压缩、打包、资源优化等操作。
选择部署方式 ：根据项目的实际需求，选择适合的部署方式。常见的部署方式包括将静态文件部署到静态文件托管服务（如Netlify、Vercel、GitHub Pages等）、与后端API服务一起部署到云服务器（如AWS、阿里云、腾讯云等）等。
配置域名和SSL证书 ：如果你有自定义域名，需要在域名服务商处将域名解析到部署好的静态文件托管服务或云服务器上。同时，为了保障网站的安全性，建议配置SSL证书，使网站能够通过HTTPS协议进行访问。
持续集成/持续部署（CI/CD） ：可以考虑使用CI/CD工具（如GitHub Actions、GitLab CI、Travis CI等）来实现自动化的构建和部署流程，以提高开发效率并确保部署过程的稳定性。
性能优化 ：在部署完成后，可以对网站进行性能优化，包括使用CDN加速、资源压缩、缓存配置等，以提高网站的加载速度和用户体验。
监控和日志：部署完成后，建议设置监控系统以及日志记录系统，及时发现和解决线上问题。

具体的部署流程会因项目和需求的不同而有所差异。

本文从部署方案一步步做实践，最终实现半自动化部署，当然也可以直接使用Docker或其他方案实现自动化部署。

手动化的部署流程是利用xshell连接服务器，利用xftp进行文件传输。操作流程相对比较原始化。

假如要实现协同开发人员可以实现共同部署，并且可以减去每次部署都要打开xshell。可以写一段脚本实现连接服务器进行文件传输过程，保证打包后能够运行脚本自动化上传文件。

首先要解决连接服务器问题，可以通过ssh实现。（ftp和ssh是两种常用的远程文件传输协议，可以高效地将代码上传到服务器。）

php 复制代码

await ssh.connect({
    host: '主机名',
    username: '用户名',
    password: '密码'
})

服务器连接成功后，可以进行文件传输

javascript 复制代码

await ssh.putDirectory('本地目录路径', '远程目录路径', {
    recursive: true, // 上传整个目录
    concurrency: 10, // 同时上传的文件数量
    tick(localPath, remotePath, error) { // 通过tick回调函数来监听上传过程中的状态
        if(error) {
            console.log(`无法上传${localPath}到${remotePath}：${error}`)
        } else {
            console.log(`${localPath}上传至${remotePath}`)
        }
    }
})

此时即可实现脚本的基本功能，只需要在每次npm run build结束后，自动执行这段脚本即可。

因此，只需要在package.json文件中scripts命令下添加一行代码即可。

json 复制代码

"build:deploy": "vue-cli-service build && node deploy.js"

这段代码因不同的框架版本可能有所不同，只需要在普通npm run build执行内容后面拼接node deploy.js，deploy.js就是我们所写的脚本文件。

打包完之后，上传文件过程如图所示，非常丝滑：

此时会有一个问题，打包的dist文件每次上传至服务器时，dist文件一直被覆盖，无法实现按版本回滚。

只需要在上传之前，修改服务器旧的dist文件名，这样旧版本就得以保存。

javascript 复制代码

// 判断服务器dist文件是否存在
let newDistExist = await ssh.execCommand(`ls 旧版本`)
while(newDistExist.code === 0) {
    i ++
    newDistExits = await ssh.execCommand(`ls 旧版本i`)
}
// 重命名旧版本dist文件
await ssh.execCommand(`mv 旧版本 新版本`)

此时即可实现旧版本保存，以便可以按版本实现回滚操作。

上述过程仅仅是针对个人打包上传服务器，如果想要实现协同开发，则要实现代码共享（例如上传git仓库），为了安全性，账号密码不能以明文暴露。

可以采取以下三种方案，当然没有绝对意义上的安全。

terminal实现账号密码输入

可以利用password-prompt插件，它可以帮助你在命令行中以安全的方式提示用户输入密码。

javascript 复制代码

const getUserInfo = async() => {
    const username = await passwordPrompt('输入用户名：')
    const password = await passwordPrompt('输入密码：', { method: 'hide' })
    return { username, password }
}

将输入的username、password传到远程服务器进行校验即可。

账号密码加密

由于代码要上传git，所以可以在git上传前进行加密处理，调用git的pre-commit钩子，执行加密，每次pull时候进行解密处理，调用post-merge钩子，调用post-merge钩子时候仅仅需要输入解密口令即可。解密口令只需要做到组员共享即可，此时的解密口令同样可以借助password-prompt插件进行输入。相对第一种方案，输入的内容更少了😂。

javascript 复制代码

const crypto = require('crypto') // 密钥和加密算法 
const secretKey = 'your-secret-key' // 这里替换为你自己的密钥 
const algorithm = 'aes-256-cbc' // 使用的加密算法 
function decryptData(encryptedData) { 
    const decipher = crypto.createDecipher(algorithm, secretKey)
    let decryptedData = decipher.update(encryptedData, 'hex', 'utf8')
    decryptedData += decipher.final('utf8')
    return decryptedData
} 
// 从环境变量或其他安全方式获取加密的敏感信息 
const encryptedInfo = process.env.ENCRYPTED_INFO // 这里假设加密的信息存储在环境变量中 
// 解密敏感信息 
const decryptedInfo = decryptData(encryptedInfo) 
// 在这里使用解密后的敏感信息进行后续操作 
console.log('Decrypted info:', decryptedInfo)

git的钩子函数可以采用git hooks工具哈士奇（husky）进行配置，具体配置方式不再赘述。

以上就是本文在前端半自动化部署方面的探索，大家可以贡献自己的想法/做法呀！