基于bat脚本的前端发布流程设计与实现

写在前面

本文大致向读者介绍了楼下几点知识，希望在编写bat脚本时候能够帮到读者，如果能够有所启迪，那就更好了。

bat脚本的相关知识和案例编写
用windows自带的命令压缩文件
windows和linux文件传输
如何免密码登录Linux
前端发布流程的优化

背景介绍

笔者目前所在的开发团队，由于一些限制，没有相关的devOps实践，所以也就没持续集成、自动部署什么事了。很多时候，还是依靠人力手动挡操控，先运行诸如yarn build或者npm run build之类的npm script去构建相关的前端项目，然后选中dist文件夹，进行相关的压缩，差一点的就直接命名dist.zip好一点的就带上个时间方便回溯，比如app-202206012002.zip这种，然后打开相关的ftp工具，把压缩好的包传到远程服务器上，最后在服务器上解压，放到nginx指定的html目录下，这一趟发版就算是齐活了。

这种模式比如就一个项目，那你要是能够接受，时间也够充裕那就这么搞吧，也无可厚非的。但是要是有好多个这种项目这么搞，真让人呕吐啊，好tm恶心啊，程序员本身在做的一件事情，应该是把一件繁琐的或者说是复杂的事情简单化，而不是随波逐流，任由事情变得越来越复杂、以致到了最后不可控，那就太鸡肋了。

Larry Wall（拉里 · 沃尔）曾经说过程序员的三大美德：懒惰，急切，傲慢（laziness, impatience, hubris）。楼上的做法显然不是很尊重（懒惰）美德啊，于是我开始蠢蠢欲动地构思颠覆楼上的发布模式。

我物色到了好几位选手，一位是bat选手，一位是cmd选手，还有js选手，py选手等等，经过相关的权衡，我最终选择编写bat（批处理）来解决楼上的问题。

我为什么相中bat选手来解决楼上的问题？

第一个就是，我们在解决当前问题的时候，尽量不要引入一些新事物去增加问题本身的复杂度，基于楼上这件事本身就是敲敲命令行（包括你说压缩、上传，本质上不就是一条命令嘛），所以js选手、py选手pass。第二个就是，我们尽量要做的兼容性足够好，bat和cmd用起来其实都差不多的，但你一定要深究它们，我理了下它们的区别大致是这样子的

bat（ms dos批处理脚本）基于dos设计，更通用一点
cmd（windows nt命令脚本）只能在windows2000以上系统运行，但是命令丰富

所以综上所述，我最后选择编写一个dos批处理脚本来解决楼上的问题。

有哪些人机交互的方案可以实现？

方案一：当用户运行相关bat脚本的时候，可以让用户输入对应的项目名称，然后去匹配对应的项目，再执行构建命令，然后执行压缩命令，再上传到linux服务器
方案二：考虑到项目有可能很长，为了优化用户体验，现在统一让用户输入数字，执行相关的逻辑，比如1、执行app项目构建，2、执行biz项目构建，3、执行app和biz项目构建，然后在进行相关的压缩上传操作。
把项目的粒度放到子项目中去，比如NoteWeb下面有app，biz，fin三个子项目，每个子项目写一个构建脚本，在父项目中，写的着急一点就无脑构建，每个项目都run一把，当然你也可以参考楼上的方案一、二做相应的优化

bat脚本知识科普

@echo off 关闭回显
setlocal enabledelayedexpansion 设置延迟变量
@REM 用来写注释的
chcp 65001 使用utf-8编码，这样中文就不会乱码了，
cls 清屏
cd /D %~dp0 进入当前目录
echo 这个是用来输出的
color 0A 设置文字显示的颜色是一抹“原谅色”
set /p input_source= 讲输入的值赋值给变量input_source

以上列举的是常用的bat脚本知识，具体的建议读者阅读帮助文档来进行了解相关的命令，这里就不再赘述。

deploy.bat脚本的编写

如何实现数字菜单？

这里的思路是让用户输入对应的数字，然后讲参数传给execBuild方法执行相关的逻辑（构建打包，压缩，上传）

@echo off

setlocal enabledelayedexpansion

color 0A

@REM 中电汇融项目构建脚本，Zheng JiangTao(jiangt.zheng@sunyard.com)

chcp 65001

cls

cd /D %~dp0

echo ==========(∩•̀ω•́)⊃-*⋆中电汇融项目构建脚本⋆*-⊂(•̀ω•́∩)==========

:start

echo 中电汇融项目数字菜单:

echo 【1】app, 【2】biz, 【3】fin

echo.

echo 【4】app、biz, 【5】app、fin

echo.

echo 【6】biz、fin,【7】app、biz、fin,

echo.

echo 【0】退出

echo.

echo 请按提示输入相应的数字进行相关的项目构建操作:

set /p input_source=

if !input_source!== 0 ( echo 退出成功 )

if !input_source!== 1 ( call :execBuild app )

if !input_source!== 2 ( call :execBuild biz )

if !input_source!== 3 ( call :execBuild fin )

if !input_source!== 4 ( call :execBuild app,biz )

if !input_source!== 5 ( call :execBuild app,fin )

if !input_source!== 6 ( call :execBuild biz,fin )

if !input_source!== 7 ( call :execBuild app,biz,fin )

echo ========*:ஐ٩(๑´ᵕ`)۶ஐ:*中电汇融项目构建脚本*:ஐ٩(๑´ᵕ`)۶ஐ:*========

:finish

exit /b

如何实现打包文件压缩？

市面上常见的压缩软件有winRar、7-Zip等等，一个思路是设置对应安装的软件的bin目录到环境变量，然后去查阅对应的API，执行相关的打包压缩命令，但是问题就来了，你哪能知道用户装的是winRar还是7-Zip，还是360压缩呢，所以你就需要写一个兼容的方法来抹平这个问题，先去查找有没有对应的文件目录，有的话添加到环境变量，然后执行对应的压缩命令，这样子很繁琐，万一它一个也没有装呢？而且也违背了上面说的（懒惰）美德。

所以在这里，我们试图通过windows自身的一些方法去压缩文件，皇天不负赶路人，我在csdn上看到一篇帖子https://blog.csdn.net/d_r_l_t/article/details/100584748，于是我摸着这位大哥的文件压缩过河，具体的读者可以点开阅读下，我这里就不再赘述了。

创建一个zip.vbs脚本

Set objArgs = WScript.Arguments

ZipFile = objArgs(0)

' Create empty ZIP file and open for adding

CreateObject("Scripting.FileSystemObject").CreateTextFile(ZipFile, True).Write "PK" & Chr(5) & Chr(6) & String(18, vbNullChar)

Set zip = CreateObject("Shell.Application").NameSpace(ZipFile)

' Add all files/directories to the .zip file

For i = 1 To objArgs.count-1

  zip.CopyHere(objArgs(i))

  WScript.Sleep 10000 'REQUIRED!! (Depending on file/dir size)

Next

那么压缩就简单到执行一条命令就好了，例如：cscript ../zip.vbs dest.zip src

如何上传到linux服务器？

scp命令可以进行计算机间的文件传输，具体的例如 scp app-202206012112.zip [root@1](mailto:root@172.1.2.107)22.51.52.169:/root/nginx/html-auxre/zdhr/app就是把app-202206012112.zip传到服务器122.51.52.169的/root/nginx/html-auxre/zdhr/app目录下，当然这里会让你输入密码。

如何解决每次执行scp命令都要输入密码（解决免密登录）？

其实这里写一个auth.bat脚本就好了，代码如下：

@echo off

ssh-keygen -t rsa

cd C:\Users\%USERNAME%\.ssh

type id_rsa.pub >> authorized_keys

xcopy /Q/Y/F/S "C:\Users\%USERNAME%\.ssh\id_rsa.pub" ".\authorized_keys"

xcopy /Q/Y/F/S "C:\Users\%USERNAME%\.ssh\id_rsa.pub" ".\id_rsa.pub"

scp id_rsa.pub authorized_keys root@122.51.52.169:/root/.ssh

最后完整的代码是这样子的，图中ip为了保密已经做了瞎写处理，读者可以拿去参考应用到自己或者公司的项目中（这里，如果是在一些国企、银行单位，那批处理就很有用了，毕竟没网.jpg）

@echo off

setlocal enabledelayedexpansion

color 0A

@REM 中电汇融项目构建脚本，Zheng JiangTao(jiangt.zheng@sunyard.com)

chcp 65001

cls

cd /D %~dp0

echo ==========(∩•̀ω•́)⊃-*⋆中电汇融项目构建脚本⋆*-⊂(•̀ω•́∩)==========

:start

echo 中电汇融项目数字菜单:

echo 【1】app, 【2】biz, 【3】fin

echo.

echo 【4】app、biz, 【5】app、fin

echo.

echo 【6】biz、fin,【7】app、biz、fin,

echo.

echo 【0】退出

echo.

echo 请按提示输入相应的数字进行相关的项目构建操作:

set /p input_source=

if !input_source!== 0 ( echo 退出成功 )

if !input_source!== 1 ( call :execBuild app )

if !input_source!== 2 ( call :execBuild biz )

if !input_source!== 3 ( call :execBuild fin )

if !input_source!== 4 ( call :execBuild app,biz )

if !input_source!== 5 ( call :execBuild app,fin )

if !input_source!== 6 ( call :execBuild biz,fin )

if !input_source!== 7 ( call :execBuild app,biz,fin )

echo ========*:ஐ٩(๑´ᵕ`)۶ஐ:*中电汇融项目构建脚本*:ஐ٩(๑´ᵕ`)۶ஐ:*========

:finish

exit /b 

:execBuild

setlocal

set exec_a=%~1

set exec_b=%~2

set exec_c=%~3

set prefix=NotePBL

set exec_a_src="%~dp0%prefix%-%exec_a%\dist"

set exec_b_src="%~dp0%prefix%-%exec_b%\dist"

set exec_c_src="%~dp0%prefix%-%exec_c%\dist"

set cur_date=%date:~3,4%%date:~8,2%%date:~11,2%%time:~0,2%%time:~3,2%%time:~6,2%

set exec_a_dist="%~dp0%prefix%-%exec_a%\%exec_a%-%cur_date%.zip"

set exec_b_dist="%~dp0%prefix%-%exec_b%\%exec_b%-%cur_date%.zip"

set exec_c_dist="%~dp0%prefix%-%exec_c%\%exec_a%-%cur_date%.zip"

if "%exec_a%" == "" (

  @REM Do Nothing

) else (

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_a%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  cd /D %~dp0\%prefix%-%exec_a%

  call npm run build

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_a%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_a%-%cur_date%.zip开始打包*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  call cscript ../zip.vbs %exec_a_dist% %exec_a_src%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_a%-%cur_date%.zip打包完成*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_a%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  scp %exec_a%-%cur_date%.zip root@122.51.52.169:/root/nginx/html-auxre/zdhr/%exec_a%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_a%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

)

if "%exec_b%" == "" (

  @REM Do Nothing

) else (

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_b%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  cd /D %~dp0\%prefix%-%exec_b%

  call npm run build

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_b%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_b%-%cur_date%.zip开始打包*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  call cscript ../zip.vbs %exec_b_dist% %exec_b_src%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_b%-%cur_date%.zip打包完成*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_b%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  scp %exec_b%-%cur_date%.zip root@122.51.52.169:/root/nginx/html-auxre/zdhr/%exec_b%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_b%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

)

if "%exec_c%" == "" (

  @REM Do Nothing

) else (

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_c%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  cd /D %~dp0\%prefix%-%exec_c%

  call npm run build

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*构建%prefix%-%exec_c%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_c%-%cur_date%.zip开始打包*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  call cscript ../zip.vbs %exec_c_dist% %exec_c_src%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*%exec_c%-%cur_date%.zip打包完成*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_c%开始*:ஐ٩(๑´ᵕ`)۶ஐ:*"

  scp %exec_c%-%cur_date%.zip root@122.51.52.169:/root/nginx/html-auxre/zdhr/%exec_c%

  echo "*:ஐ٩(๑´ᵕ`)۶ஐ:*上传%prefix%-%exec_c%结束*:ஐ٩(๑´ᵕ`)۶ஐ:*"

)

goto:eof

实现效果

可能细心的读者会发现，怎么没有构建这一步啊，这里为了更直观的让大家看到效果，我在运行的时候把npm run build 注释掉了因为它打出来的日志太多了，刷屏了，就把它去掉，展示下整体的效果，图中应该是压缩到上传到Linux服务器的效果

最后

楼上的脚本就作为抛砖引玉，希望能够在前端发包方面帮助到读者，解放劳动力。其实我们还是可以继续优化的，比如说，在CPU和内存理想的状态下，我能不能开三个小窗口去分别并行执行三个项目的构建，然后把项目的构建和上传解耦，这样子设计会更符合软件设计的思想，更加鲁棒。