前端自动化部署的几种不完全姿势 #20
Description
手动 FTP
这应该是最基础的姿势
执行类似 npm run build 的命令
手动打开 FileZilla 之类的 FTP 软件
手动连接到服务器
手动找到对应目录
手动删除旧数据
手动上传新数据
自动化脚本
如果你们的部署是十天半个月一次，个人觉得上面的手动操作是完全可以接受的，除去构建过程，其余步骤也就两三分钟的事。
但如果像我们一样，一天最多可能会发布十多次到测试环境的时候，那上面的步骤就让人有点烦躁了。
作为一个有理想有追求的软件工程师，这个时候我们就要发挥自己的才能解放自己了，方式就是自动化脚本。
自动化脚本就是写代码，既然是代码，那实现方式就有点多了，这里介绍几种我尝试过的：
1. node 脚本
使用 node 相关的 ftp 库，比如 ssh2-sftp-client，通过这些库，可以连接到服务器，并进行删除，上传，下载等操作。
但这种方式有个缺点，得递归操作，意思就是上传和下载文件得一个个文件操作，遍历文件夹。
我写了一半就放弃了，所以这里就不贴代码了，有兴趣的朋友自己去尝试。
2. gulp 流
怀念以前配置 gulp 自动化脚本的日子，直到现在仍然觉得 gulp 比 webpack 好用，唯一差的就是对模块的打包处理。
废话不多说，直接贴代码：
// package.json
"scripts": {
"deploy-test": "vue-cli-service build --modern --mode development && gulp",
},// gulpfile.js
const gulp = require('gulp')
const sftp = require('gulp-sftp')
gulp.task('default', () => {
return gulp.src('./dist/**/*')
.pipe(sftp({
host: '10.0.23.20',
port: 22,
user: 'root',
pass: '123456',
remotePath: '/remote/path/'
}))
})在需要发布的时候，执行 npm run deploy-test 命令就行。
这个的缺点是需要全局安装 gulp，另外我还没发找到删除旧文件的方法，虽然没有删除的必要，因为 vue-cli 3 开发模式生成的文件没有 md5 戳，上传文件会直接覆盖。
3. shell 脚本
如果不想额外安装任何工具，而且还有删除旧文件的强迫症，那就使用 shell 脚本吧：
# deploy-test.sh
#!/bin/bash
#sftp执行
npm run build-test
sftp username@10.0.0.0 <<EOF
cd ../remote/pathname
rm /remote/pathname
put -r dist/.
bye
EOF
username 是服务器账号，10.0.0.0 这个是你们的服务器 IP
mac 用户直接在 terminal 工具里执行 bash deploy-test.sh 命令就行，Windows 用户可以使用 git bash，大家在安装 Git 的时候应该都有选安装 git bash 吧。
另外这种方式也有个问题，就是每次连接要输入密码，解决这个问题的最简单方式就是在服务器先部署一个公钥，用你使用 git 时生成的那个就可以。
将公钥部署到服务器上：
ssh-copy-id -i ~/.ssh/id_rsa.pub username@10.0.0.0
测试免密码登录：
ssh username@10.0.0
服务器端自动构建
上面的方法都只适合测试环境的开发部署，大家都可以操作，删除修改服务器文件，就是把服务器搞挂了都无所谓。
但正是环境也这样就很危险了，而且正式环境还可能会需要部署多台服务器，这种情况下就要求我们采用更安全可靠的部署方式。
1. jenkins
关于 jenkins 的使用网上有很多文章，这里不介绍具体使用方法，篇幅太长，不了解的同学百度一下 jenkins 自动部署就行。
2. 服务器厂商自带服务
服务器厂商自带服务其实很多也就是把 jenkins 部署到了服务器上，不过提供了其它一些额外的功能。华为云，阿里云都有自家对应的产品，其它云服务没用过，不过近期打算用用腾讯云，到时候可以看看。
这里介绍一下阿里云服务产品，华为云忘记了。
CodePipeline，方便快捷，适合小团队或者不是特别大型复杂的应用。
云效，一站式企业协同研发云，提供从“需求->开发->测试->发布->运维->运营”端到端的协同服务和研发工具支撑。适合研发流程严谨的多人团队和较为复杂的项目，现在还改了收费方式，30人以下免费，非常适合创业团队。
文档就大家自己去看了，免费推广了应用就不免费写教程了，刚开始配置使用的时候还是有些坑，当时也是花了一两天时间才跑起来。
要写的话，篇幅有点长，空了再补，感兴趣的朋友可以亲自尝试踩踩坑，然后写篇文章分享出来，到时候可以给我个链接，我直接放进来 ~ ^^ ~