前端自动化部署的几种不完全姿势

[spivet]

手动 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人以下免费，非常适合创业团队。

文档就大家自己去看了，免费推广了应用就不免费写教程了，刚开始配置使用的时候还是有些坑，当时也是花了一两天时间才跑起来。

要写的话，篇幅有点长，空了再补，感兴趣的朋友可以亲自尝试踩踩坑，然后写篇文章分享出来，到时候可以给我个链接，我直接放进来 ~ ^^ ~