前端工程化之部署篇

前言
    部署简单来说就是将构建产出的代码部署到服务器上，在开发中我们通常的操作就是使用ftp将代码上传到服务器上固定目录下即可，所以这项工作在很多开发看起来是简单而又无聊的工作，这种部署方式从本质上来说没毛病，但是只适用于由少数人维护的规模较小的项目，如果这是个用户量庞大的产品，拥有多体系的技术团队，那么，我们在设计部署流程的时候就需要考虑许多其他的因素了，比如如何多人协作，提高部署效率，控制部署时的安全等等，这个时候就不再是一个简单的ftp上传代码这么简单了。

    要做到前端资源自动化部署首先需要的就是设计合适的部署流程，这个和前端项目的大小和部署的环境是有直接联系的，比如测试环境，准生产环境，生产环境，他们的部署流程差异是比较大的，一般测试环境我们开发人员可以随便造，准生产环境和生产环境就需要专门的运维人员，按照严格的发布流程来部署了，这个时候，我们开发人员一般只需要提供代码的仓库地址和版本号，其他的都交给类似jenkins这种集成化平台来进行统一集成，当然这里面可能需要用到一些脚本，比如我所在的公司每个项目中目录中都创建有一个文件夹里面全部是一些python脚本，用来给jenkis打包使用的，这里不是我们要讲的点，这里只提一下。

    前面提到了部署流程，规范的流程是保障事情有条不紊向前推进的基础，就像我们想去"浪漫的土耳其"，那么我们就得首先办理护照，然后再购买机票，订酒店…然后去找土耳其小姐姐。其实我觉得首先还是得看看自己的钱包还剩多少和房贷还有多少没还。扯远了，回到前端自动化部署上来。在设计流程的时候我们需要考虑的三大因素：

1. 快速部署
2. 协同部署
3. 保证部署安全

下面就一步一步简单总结一下。

---

快速部署

     前面提到的使用sftp工具这种简单粗暴的方式来上传构建好的前端代码到服务器，雖然也相对比較快速，但是手动部署和自动化部署毕竟level还是差很多的，就像坐绿皮車和坐高铁那档次还是有那么一点点的，所以我们需要用自动化部署来代替手动 ，这样一方面可以提高部署效率，另一方面开发人员可以少做一些他们以为的无用功，然后把时间多花点在改bug和写bug这种事上来。
大多数开发在后期都需要频繁的将修改后的代码部署到服务器上去，这个时候我们原始的部署流程是：

看起来简单 ，但是手动去重复这种机械化的工作，不免让人感到乏味。这个时候就需要用代码来帮我部署。下面讲解一下我自己在vue-cli的基础上实现的本地快速部署方案

实现步骤：

1. 配置需要部署的目标服务器信息
2. 实现部署行为
3. 实现命令行

配置需要部署的目标服务器信息：

    在部署的时候我们需要做到目标服务器地址的信息可配置化，所以我在config目录下的index.js文件中增了服务器的相关配置项：