前端部署上线自动化shell脚本

前端自动化脚本部署很常用，省去了打包，登录服务器上传打包结果

TIP

1.可以使用代码仓库的CI/CD自动化部署

2.可以使用shell脚本文件，通过链接服务器的方式来上传打包结果

deploy.sh脚本文件。这是一个简单的配置，主要是4-6行，可以自己修改，其他都是固定的

#!/bin/bash

# 基本配置
REMOTE_HOST="127.0.0.1"    # 服务器地址
REMOTE_USER="阿里云默认的是root，你自己定义"                 # 服务器用户名
REMOTE_DIR="/www/wwwroot/www.baidu.com/dist"  # 部署目录
SSH_PORT="22"                      # SSH端口

# 构建项目
echo "正在构建Vue项目..."
npm run build || { echo "构建失败"; exit 1; }

# 上传到服务器
echo "正在上传文件到服务器..."
rsync -avz -e "ssh -p $SSH_PORT" \
  --delete \
  ./dist/ $REMOTE_USER@$REMOTE_HOST:$REMOTE_DIR

# 检查上传结果
if [ $? -eq 0 ]; then
  echo "✅ 部署成功!"
  echo "访问地址: http://$REMOTE_HOST/dist"
else
  echo "❌ 部署失败，请检查连接和权限"
fi

#!/bin/bash

# 基本配置
REMOTE_HOST="127.0.0.1"    # 服务器地址
REMOTE_USER="阿里云默认的是root，你自己定义"                 # 服务器用户名
REMOTE_DIR="/www/wwwroot/www.baidu.com/dist"  # 部署目录
SSH_PORT="22"                      # SSH端口

# 构建项目
echo "正在构建Vue项目..."
npm run build || { echo "构建失败"; exit 1; }

# 上传到服务器
echo "正在上传文件到服务器..."
rsync -avz -e "ssh -p $SSH_PORT" \
  --delete \
  ./dist/ $REMOTE_USER@$REMOTE_HOST:$REMOTE_DIR

# 检查上传结果
if [ $? -eq 0 ]; then
  echo "✅ 部署成功!"
  echo "访问地址: http://$REMOTE_HOST/dist"
else
  echo "❌ 部署失败，请检查连接和权限"
fi

这个deploy.sh脚本文件需要权限，所以需要给这个文件加上权限

chmod +x deploy.sh

chmod +x deploy.sh

然后就可以执行这个脚本文件了

./deploy.sh

./deploy.sh

TIP

1.如果需要上传到其他服务器，只需要修改REMOTE_HOST、REMOTE_USER、REMOTE_DIR、SSH_PORT这几个变量即可

这种脚本其实不难的，主要是配置，配置好之后，就可以自动化部署了。

这也是一个简单版本的（需要输入两次密码（清理旧文件和上传新文件））

#!/bin/bash

# 配置服务器信息
USER="root"
HOST="127.0.0.1"
PORT="22"
REMOTE_DIR="/www/wwwroot/www.baidu.com/dist"

# 本地构建
echo "本地构建..."
npm run build

# 清理远程旧文件
echo "清理服务器旧文件..."
ssh -p $PORT $USER@$HOST "rm -rf $REMOTE_DIR/*"

# 上传新文件
echo "上传新文件..."
scp -r -P $PORT dist/* $USER@$HOST:$REMOTE_DIR/

echo "部署完成！"

#!/bin/bash

# 配置服务器信息
USER="root"
HOST="127.0.0.1"
PORT="22"
REMOTE_DIR="/www/wwwroot/www.baidu.com/dist"

# 本地构建
echo "本地构建..."
npm run build

# 清理远程旧文件
echo "清理服务器旧文件..."
ssh -p $PORT $USER@$HOST "rm -rf $REMOTE_DIR/*"

# 上传新文件
echo "上传新文件..."
scp -r -P $PORT dist/* $USER@$HOST:$REMOTE_DIR/

echo "部署完成！"

前端部署上线自动化shell脚本 ​

前端部署上线自动化shell脚本