记我写的第一个前端shell部署脚本

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

我现在所在的项目目前只有我一个前端，基本上所有前端涉及的工作都是我在处理，其中当然也包括前端代码部署。 然而本来开发任务就重，有时候为了测试验证一些问题一天发版十几次是常有的，一直都在用SecrueCRT上传打包后的代码，多用几次之后就感觉还是挺麻烦的。之前也看过一些前端大佬通过shell脚本发布代码，这两天想着乘着元旦有时间写一个试试。

在网上查找相关命令，经过一系列试错后终于完成了下面这个具备基本功能的简单脚本。下面简单做一下记录。

下面是我写好的build.sh脚本的代码：

#!/bin/bash

# set -e

echo "====================打包文件===================="
yarn build
echo "====================传输文件===================="
scp -P 22 -r ./dist/** root@IP:/home/web/html
if [ $? == 0 ]; then
    echo "====================部署完毕===================="
else
    echo "====================部署失败===================="
    exit
fi

记录下具体命令的含义，以防忘记：

#!/bin/bash

一般来说"#"是shell里面用来注释的，但在脚本里的第一行 "#!/bin/bash"不是表示注释，而是表示脚本由/bin路径的sh程序来解释

echo "====================打包文件===================="

echo 命令的作用是在命令行输出信息，类似于前端的console.log()

yarn build

这个是项目的打包命令

scp -P 22 -r ./dist/** root@IP:/home/web/html

• scp 是liunx的一个用于复制文件和目录的命令，后面携带的都是相关的参数
• -P 22 如果默认 SSH 端口不是 22，则使用此选项指定 SSH 端口
• -r 此选项递归复制目录及其内容
• ./dist/** 打算复制到远程主机的源文件
• root@IP: 远程系统的用户名和 IP 地址,IP 地址后面要加冒号
• /home/web/html 设置文件复制到的远程系统上的目标目录

$? == 0

$?表示上一条语句执行结果，$? == 0表示运行正常，否则表示出错

if [ 条件表达式 ]; then 指令一 else 指令二 fi

这是一个条件表达式语句，要注意表达式的左右，以及[ ]的左右都要有空格，类似于js的条件语句

把build.sh放在代码根目录，代码根目录创建命令行执行./build.sh就可以通过一个命令把代码部署到服务器。

试了下，之前使用SecrueCRT部署需要6个步骤：

1. 通过build命令打包代码
2. 打开SecrueCRT客户端
3. 找到对应的服务器，并选择连接
4. 找到本地打包出来的代码目录
5. 找到服务器存放代码的目录
6. 拖动本地代码到服务器目录下，进行上传

使用shell脚本后只需要执行一个./build.sh命令然后看结果就好了，还是能省不少麻烦的。