欢迎您的访问
专注架构,Java,数据结构算法,Python技术分享

基于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@122.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和内存理想的状态下,我能不能开三个小窗口去分别并行执行三个项目的构建,然后把项目的构建和上传解耦,这样子设计会更符合软件设计的思想,更加鲁棒。

来源:https://www.cnblogs.com/cnroadbridge/p/16336280.html

 

 

赞(0) 打赏
版权归原创作者所有,任何形式转载请联系作者;码农code之路 博客站点 » 基于bat脚本的前端发布流程设计与实现

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏