真▪一行代码完成从前端代码build到部署线上

csRyan 发布于2019-08-23 10:55 / 2744人阅读

在经历了6,7个项目同时开工，频繁发布测试，不得不学会一点偷懒的小技巧来提高效率了，所以这篇文章要讲的就是如何更加优化发布流程。

工作以来，经历了build后，然后用FileZilla上传服务器完成部署。再到前端打包后，在build仓库执行git push,后端在自动部署。后端的自动部署的确简化了很多操作，不过对于前端来说，每次发布还需要去build仓库执行push操作，特别是发布频繁的时候，难免会减低效率，这种重复操作还是让脚本来执行比较合适。所以接下来就是围绕如何只需要执行npm run build 就完成项目发布。

（本文所讲的都是基于windows系统和node环境，各个系统的脚本语言可能有所误差，基本思路不变）

本文分为两部分，第一部分主要讲的是前端的打包发布的优化过程，第二部分简单介绍一下后端的自动部署原理。

一：前端发布优化

首先要明确的是目前大部分前端项目的build过程都是基于node环境，所以优化流程的主要思路就是利用node和操作系统交互，调用系统脚本完成文件copy和git操作。在这我们要明白在执行npm run build 的时候发生了什么，npm run build 只是一个语法糖，

在package.json里面可以看到其实是用node 执行了build/build.js文件，下面我们就来改写build文件，为了方便对比，我在这贴一下改写前后的build文件，改写前：
改写后：

我们其实不用全部读懂build.js里面做了什么，我们只需要知道再build成功后在何处执行我们的脚本就可以了，可以很清楚的看到webpack打包后的回调函数，找到位置后，我们需要引入children_process，关于这个模块这里说明两点:

1.children_process这个模块提供了衍生子进程的功能，熟悉shell操作童鞋可以利用这个模块做一些有意思的事情，我们这儿主要利用children_process.exec(commad,options，callback), 主要功能就是创建一个shell，然后在shell里执行命令。执行完成后，将stdout、stderr作为参数传入回调方法。想要详细了解到童鞋可以去node文档看一看

2.就是关于process.argv , 这个提供了获取命令行参数的方法，这个参数就是在执行node命令时后面接的参数，比如执行 node build.js a b c , 那么process.argv[1]就是build.js ，process.argv[2]就是a，以内类推。

知道了这两点后，我们就可以设计我们的自定义命令了，因为优化的目的就是简化操作，所以在build的时候我们接上我们的自定义参数，这关系到后面我们的脚本编写，我设计的命令是 npm run build （push）(commit) (branch) ,这里括号包裹是为了方便表达这是一个自定义变量，实际是没有括号的，三个参数的意思如下：

1.push表示是否打包完直接push到远程；

2.commit 表示push到远程执行git commit -m ‘(提交信息)"，的这里的提交的信息；

3，branch表示git push origin (branch)的那条分支，意味着是发布到正式服务器还是测试服务器

自定义完参数后我们在回调里面利用exec()执行我们的脚本

这时候我们编写我们的脚本了，我们新建一个autopush.bat的文件，放在我们的根目录就可以了，脚本内容很简单，大概就是执行了复制粘贴删除和git操作，脚本如下

cd D:uild	est /* 进入build的仓库*/
git checkout %2  /* 切换build仓库的分支*/
rd /s/q D:uild	eststatic /* 删除build仓库的static文件夹*/
xcopy D:source	estdist D:uild	est /E/I/Y /*从源码仓库的打包后dist的文件夹拷贝并覆盖掉build仓库的文件*/
git add .git commit -m %1 /*提交代码*/
git push origin %2 /*push到远程，后端执行自动部署*/
cd D:myFolder31abc_admin

这里说明三点：

1.先执行删除build仓库的static，在拷贝并覆盖，是因为改动后每次打包后的js文件名都会变动，不删除的话，不会覆盖重名文件，所以会导致js文件累积；

2.window脚本参数是通过%1获得的，例如%1就是获取第一个参数，%2就是获取第二个参数，这样就可以获取我们在build.js中执行脚本的时候传入的关于commit和branch的参数了。

3.关于删除和拷贝中参数的意思，

rd /s/q

  /S 表示删除该目录下所有遍历的子目录和文件
  /Q 删除目录时不提示确认，直接删除

xcopy 后面的/E/I/Y

  /E 复制所有子目录，包括空目录。
 /I 如果“Source”是一个目录或包含通配符，而“Destination”不存在，“xcopy”会假定“destination”指定目录名并创建一个新目录。然后，“xcopy”会将所有指定文件复制到新目录中。默认情况下，“xcopy”将提示您指定“Destination”是文件还是目录
  /y 禁止提示确认要覆盖已存在的目标文件。

通过以上操作我们就可以，通过npm run build push fix master 一行命令完成打包到push的操作了，这个时候后端要是设置了自动部署的话，那么，就直接上线了。

二：后端自动部署

关于自动部署的文章，网上已经一大把了，在这儿为了配合这篇文章就简单介绍了自动部署的原理，自动部署的关键就在于webhook ，主流的代码托管平台都有这个功能，包括coding ， github等，在仓库里可以设置，以github为例，大概在这个位置

这里可以填写一个自己服务器的接口地址和一个seret用于验证，填写完了仓库会监听push操作，一旦有push操作，webhook就会发出一个post请求到你设置的接口，然后在服务器端执行脚本进行git pull操作，把最新的代码拉下来，就完成了部署。

云服务器 GPU云服务器前端代码部署到阿里云服务器上代码部署到服务器码云代码部署到服务器将代码部署到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96816.html

vue-cli3 配置开发-测试环境

摘要：实现输入一行命令，执行两条指令，分别打包线上生产环境和线上测试环境的代码。这样配置好之后，只要执行，它会自动先执行正式环境构建打包，完成之后再自动执行测试环境的构建打包，是方便接着再配置自动压缩，这里就需要使用到一个的插件。需求首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测...

Scott 2019-08-26 13:48 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

wall2flower 2019-07-01 14:02 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

余学文 2019-06-28 17:25 评论0 收藏0
马蜂窝容器化平台前端赋能实践

摘要：本文将结合马蜂窝容器化平台赋能前端应用构建的实践经验，介绍整个平台背后的设计和实现原理，取得的一些效果及问题的优化方案。如果使用容器化平台就不会出现这方面的担忧。容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」 showImg(https://segmentfau...

desdik 2019-08-23 18:14 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0