前端自动化部署

先说说我们要实现的目标，在主分支上打个标签，就能自动部署到云服务器上。

准备

• vue-cli3
• codepipeline
• 码云（github是一样的）

vue-cli3的mode

使用vue-cli3的 mode模式 ，可以在生产环境和开发环境切换的时候不用更改任何配置。举个例子，在项目根目录下，新建.env.development文件，内容如下：

VUE_APP_IMG = 'http://127.0.0.1:9999'
复制代码

新建.env.production文件，内容如下：

VUE_APP_IMG = 'http://www.xxxx.com:9999'
复制代码

然后就可以通过process.env.VUE_APP_IMG访问到你定义的变量，开发环境和生产环境会自动替换成相应的地址。（tips:项目启动后再添加环境变量是不会生效的，重启项目就好了）

codepipeline

对于大部分前端，看到这个词，心里都会嘀咕：什么鬼？其实就是 阿里云 的一个服务而已，咱们不展开具体的配置，大体讲一下，它到底能帮我们做什么。

codepipeline的基本流程是：

1. 在沙箱环境中拉取git仓库的代码
2. 打包
3. 测试
4. 将打包后的文件上传到对象存储
5. 从目标esc服务器拉取对象存储的压缩包，解压并复制到对应的文件夹

简而言之就是，打包，测试，备份，部署。（记得开通oss哦）

WebHooks

为什么是打标签的时候自动部署？一般上线的时候我们会在主分支上打标签加一个版本号，方便出现异常时回滚。假设我们已经配置好了codepipeline，如何让codepipeline知道何时需要构建呢？

那就需要使用webHooks了，码云或者github在管理界面可以找到它。选择触发方式，提交、打标签、评论等等。然后它会让你填一个url，它会根据这个url发送一个post请求。codepipeline接收到这个请求后，就会开始构建了。这个url是codepipeline生成的，贴过来就行。

codepipeline配置流程

1. 填写基本信息，前端的项目选择node.js构建环境
2. 在你的esc服务器上执行下面的命令，具体命令看codepipeline的控制台。意思是，下载个东西，然后你在codepipeline配置的shell脚本就可以在这台服务器运行了。

export DEPLOYINDENTIFIER=******************** && wget -nv -O- http://aliclouddeployclient.oss-cn-beijing.aliyuncs.com/alicloud_deployclient_installer.sh | bash
复制代码

3. 源码管理，码云或者github，其它的平台也有。选择要部署的仓库和分支。
4. 构建触发器，生成WebHooks的url。
5. 执行shell脚本，npm run build和npm run test。
6. 归档部署到esc，选择一个oss的bucket存放，最后打包后的压缩文件。
7. 执行部署命令，把解压后的文件夹复制到对应的http容器的web目录下。
8. 工作空间，在哪个目录下拉去oss的压缩包，并执行部署命令。

最后

codepipeline的具体配置，应该有很多文档了，我就不造轮子了。大家有问题，可以在下面留言。

转载于:https://juejin.im/post/5ba9d8ec5188255c7455207d