前端代码自动化部署脚本

前提

在每次部署自己的项目的时候，都需要手动打包之后，然后打开xtp，把包拖进去进行部署，很麻烦

在实习的时候遇到了在公司部署代码的情况，参看我司的前端部署脚本，修改了给自己的代码使用

部署的过程

创建scp.sh文件

第一阶段

# 发布
# 将build文件 推送到 ubuntu是账户名 @后面是你的ip地址+路径，执行后会让你输入密码
scp -r build ubuntu@ip:/home/ubuntu/blog/build

但是在我一次次的推送，发现页面并没有什么变化，原因是这个命令并不会覆盖之前的代码

这样同时也会造成服务器的代码越来越多

第二阶段

于是我查阅资料，有一个命令是使用--force，但是我在执行的时候可能是windows不支持还是什么原因，就是这个命令不行，在这里先纪录一下：scp -r --force build ubuntu@ip:/home/ubuntu/blog/build

既然不能做到上传覆盖，那就在上传之前先删除服务器中的代码，在进行删除

# 删除
echo "正在发布到 ... 环境..." 
ssh ubuntu@ip "rm -rf /home/ubuntu/blog/build"

# 发布
scp -r build ubuntu@ip:/home/ubuntu/blog/build

但这样设置的话，需要输入两次密码，如果想要只输入一次密码，可能需要安装什么东西，在windows上的支持性也不强，目前没有继续输入研究

第三阶段

上述脚本，我们可以将打包的命令融入进来，这样就不需要我们在进行手动的打包一下了，顺便加一些提示

# 打包
echo "正在打包应用..."
npm run build  # 打包命令

# 删除
echo "正在发布到 ... 环境..." 
ssh ubuntu@ip "rm -rf /home/ubuntu/blog/build"

# 发布
scp -r build ubuntu@ip:/home/ubuntu/blog/build

# 检查 scp 命令的退出状态
if [ $? -eq 0 ]; then
    echo "推送成功"
else
    echo "推送失败，请检查错误信息"
fi

完整命令

#!/usr/bin/env bash

# 1. 打包应用
echo "正在打包应用..."
npm run build  # 打包命令

# 2.  先删除服务器上的文件
echo "正在发布到 ... 环境..." 
ssh ubuntu@ip "rm -rf /home/ubuntu/blog/build"

# 3. 发布，如果在之前不删除的话，并不会覆盖之前的文件
# 将build文件 推送到 ubuntu是账户名 @后面是指定路径，执行后会让你输入密码
scp -r build ubuntu@ip:/home/ubuntu/blog/build

# 4. 检查 scp 命令的退出状态
if [ $? -eq 0 ]; then
    echo "推送成功"
else
    echo "推送失败，请检查错误信息"
fi

部署多个环境的情况

echo "选择要部署的环境"
select name in "11.11" "11.12"
do
    case $name in
        "11.11")
            mv build web # 将"build"目录改名为"web"
            scp -r web ubuntu@ip:/home/ubuntu/blog
            mv web build # 将"web"目录改名为"build"
            break
            ;;
        "11.12")
            scp -r build ubuntu@ip:/home/ubuntu/blog
            break
            ;;
        *)
            echo "输入错误，请重新输入"
    esac
done