你不了解的Shell，前端自动化打包一键部署

Lakeiedward
570 阅读5分钟

前言

在学习自动化之前，需要掌握一定的shell基础，可以参考之前的文章;有shell基础的可以直接跳过。

.sh文件是什么？前端需要知道的shell基础

如何在VS Code中把默认终端设置为Bash

git同步上传Gitee和Github的考虑

windows怎么关联ssh服务器，实行免密登录

上传至仓库->打包->部署至服务器

场景：懒羊羊决定做一个博客，这个博客需要同时上传到Github和Gitee,于是懒羊羊每天写啊写啊，每次写完都要执行 上传-打包-部署 操作，很是烦；终于他不再懒了，想到了一个好方法，可以省去这个每次都要手动执行的步骤；我们只需要在Bash中执行sh git.sh 即可完成以上所有步骤，当然在这个步骤里你可以随便自定义自己想要的步骤；

#git.sh
# 1.自动获取当前日期
dateformat=$(date +%Y-%m-%d)
timeformat=$(date +%H:%M:%S)

# 2.回到本地仓库，先删除名为origin的远程分支：
git remote rm origin
git remote rm GitHub
git remote rm Gitee

# 3.添加暂存文件
git add -A

# 4.获取命令行的第一个参数作为提交信息
git commit -m "$1"

# 6.上传到仓库主分支
git push

# 7.打包之前删除原先的dist文件
rimraf dist

# 8.开始打包
npm run build

# 9.生成日志
echo "$dateformat $timeformat" >> dist/log.txt
echo "$1" >> dist/log.txt

# 10.本地dist文件上传到服务器
scp -r dist/* root@xxx.xxx.xx.xx:/usr/local/nginx/html/webpack/

解析一下以上步骤

  1. 获取当前日期
  2. 同时上传至Github和Gitee之前，需要先删除config中的远程分支
  3. 添加暂存文件
  4. 执行 sh git.sh 别看我只是一只羊 获取命令行的第一个参数作为提交信息，别看我只是一只羊就会成为commit的提交信息
  5. 上传到仓库
  6. 打包之前删除原先的dist文件，没了解过rimraf的可以看下www.jianshu.com/p/3c825f5d2…
  7. 上传好之后，开始执行打包命令
  8. 打包好之后，往dist中塞一个log.txt日志文件，部署到服务器后也可以看到本次修改了什么内容
  9. 本地dist文件上传到服务器nginx的目录下，具体情况可以参考windows怎么关联ssh服务器，实行免密登录，在浏览器刷新页面，就发现已经部署成功了。

自定义流程

场景

以下操作在完成任务写好代码之后都要进行反反复复的手动操作

  1. 上传代码到仓库->
  2. 打包家里测试环境包->部署至家里服务器
  3. 打包现场测试包和现场生产包->生成zip压缩包

如果我们不通过自动化，就会是上面的步骤一二三进行，而且时刻要盯着屏幕看有没有完成打包，完成第1步，执行第2步，再执行第3步，整个流程下来最起码好几分钟，此时懒羊羊又不愿意了，有没有一个命令就可以完成上面三个步骤，让他有时间出去玩耍以下呢，当然是有的，请看；

git.sh文件

这完全是我们自定义的，没有固定流程，你可以根据你项目的情况量身制定一套流程；

此时，只需要在终端中输入sh git.sh 更新代码 1,当我们执行这个命令时，更新代码为参数一，1为参数二；在sh文件中$1等于参数一，$2等于参数二，以此类推

根据不同的需求，我们使用参数二为不同的参数

  • 当参数二为1时，①上传git，②执行打包命令，③把打包后的dist目录下的所有文件上传到服务器nginx下，不需要手动部署，浏览器刷新页面，显示的是新内容
  • 当参数二为2时，①执行build.sh文件下的脚本，打包两个环境下的包，最终生成一个.zip压缩包，并且通过explorer .命令，自动打开当前文件目录，是不是很方便，不需要自己打开了，直接把.zip包发给现场人员就行
  • 当参数二为3时，涵盖以上两个步骤，一起全部打包；
# git.sh
git add .

#获取命令行的第一个参数作为提交信息
git commit -m "$1"

git push

# 参数2为1时： 上传git，并且打包家里测试包,直接把dist文件上传至测试服务器
# 参数2为2时： 上传git，并且打包现场两个包
# 参数2为3时： 上传git，先打现场两个包，再打家里测试包，直接把dist文件上传至测试服务器
if [ $2 == 1 ]
then
    rimraf dist
    npm run build:test:h
    # 打包后，dist文件上传到服务器
    scp -r dist/* root@xxx.xxx.xx.xx:/Soft/nginx/html/test
elif [ $2 == 2 ]
then
    sh build.sh $1
    #打开当前目录
    explorer .
elif [ $2 == 3 ]
then
    sh build.sh $1
    npm run build:test:h
    # 打包后，dist文件上传到服务器
    scp -r dist/* root@192.168.20.194:/Soft/nginx/html/test
fi

build.sh文件

这里我们把现场环境的两个包放在一个文件夹内，最终通过zip压缩成一个带有时间的压缩文件，为什么要带时间呢，因为可能一天中不止一次给现场发包，为了区分不同包，带上时间，现场好区分!

Bash内自带的是没有zip命令的，需要下载zip指令，可以借助于这篇文章www.jianshu.com/p/0d495f2ae… ，在你本机下载zip并且使用它

# build.sh
rimraf 档*.zip

#自动获取当前日期
foldername=$(date +%Y%m%d%H%M)
dateformat=$(date +%Y-%m-%d)
timeformat=$(date +%H:%M)

# 先删除已有的dist
rimraf dist

# 打包现场测试环境
npm run build:test:x

cp -r dist 现场测试

rimraf dist

# 打包现场正式环境
npm run build:prod

cp -r dist 现场正式

rimraf dist 

# 压缩两个环境文件到档案文件并压缩
zip -r 现场包-${foldername}.zip 现场测试 现场正式

# 最后删除两个环境的包
rimraf 现场测试 
rimraf 现场正式

这种打包方式是根据--mode环境模式的不同进行打包的，所以会打包这么多次，当然要根据不同项目配置不同的打包方式，也可以参考另外一篇文章 你还不了解Vue项目的模式和环境变量配置吗？

笔者认为，像一般的项目，没有特别多的部署要求，使用Jenkins部署，配置起来有点太费劲了。

avatar
文章
阅读
粉丝