使用 Shell 脚本自动部署 Vue.js 项目到远程服务器

本文适合读者：

技术水平：初学者对自动化部署流程不熟悉，有经验的开发者希望了解更有效的部署方法。

兴趣程度：对前端技术感兴趣的人群，可能是正在学习或已掌握一些 Vue.js 技能的开发者，希望提高项目部署效率。

需求目标：希望简化项目部署流程，减少手动操作，提高工作效率。不愿花费过多时间处理繁琐的部署过程，而希望专注于项目开发和优化。

解决问题：针对可能遇到的手动部署繁琐、容易出错的问题，寻求简单有效的自动化部署方式，提高工作效率。

工作环境：适用于小型团队或个人开发者，项目规模较小，不需要复杂的 CI/CD 工具，但仍希望通过自动化部署简化工作流程。

场景引入

假设你是一名初中级前端工程师，正在开发一个基于 Vue.js 的前端项目。项目已经开发和测试完成，现在需要将它部署到远程服务器上，让用户能够访问和使用你的应用。但是，每次手动部署都很繁琐，你想通过一个简单的脚本来自动化这个过程，省去重复劳动，提高效率。

在这个项目中，你的团队可能只有几个人，项目规模也不大，所以不需要使用复杂的 CI/CD 工具。你只需要一种简单有效的方式来自动化部署流程，让每次部署都能快速可靠地完成。

你可以编写一个 Shell 脚本，包含一系列命令来编译、压缩、上传和解压项目文件。执行这个脚本后，你的项目就会轻松部署到远程服务器上，无需手动操作，简单快捷。这种自动化部署方式不仅高效省事，而且让你可以更专注于项目开发，为用户提供更好的体验。

解决方案

为了实现自动化部署，我们可以编写一个 Shell 脚本，其中包含了一系列命令来完成项目的编译、压缩、上传和解压等操作。具体步骤如下：

定义全局变量：首先定义了几个全局变量，包括本地和远程服务器的路径以及服务器的 IP 地址。
编译项目 ：使用 Vue CLI 提供的 vue-cli-service build 命令编译项目，生成静态文件并存放在 dist 目录中。
压缩 dist 目录 ：使用 zip 命令将 dist 目录压缩成一个 zip 文件，以便在上传到服务器时传输更快。
删除远程服务器上的 dist.zip 文件 ：使用 SSH 连接到远程服务器，执行命令删除原有的 dist.zip 文件，为后续上传做准备。
发送 dist.zip 文件到服务器 ：使用 scp 命令将本地的 dist.zip 文件发送到远程服务器指定的目录。
删除旧版本dist&解压 dist.zip 文件 ：使用 SSH 连接到远程服务器，进入指定目录并解压上传的 dist.zip 文件，覆盖原有的 dist 目录。
进入服务器指定目录：最后进入服务器指定的目录，并启动一个新的 Bash 会话，以便在服务器上进行进一步的检查和测试。

示例脚本

bash 复制代码

#!/bin/bash

# 定义全局变量
LOCAL_DIST_ZIP="/Users/dddmw/cms/dist.zip"
SERVER_IP="127.0.0.1"
SERVER_DIR="/usr/share/nginx/html/cms"

# 配置本地SSH免密登录, 自行配置
# ssh-copy-id root@127.0.0.1

# 删除本地 dist.zip
sudo rm -rf $LOCAL_DIST_ZIP

# 编译项目
echo "开始编译项目..."
sudo vue-cli-service build --dest dist
if [ $? -ne 0 ]; then
    echo "编译项目失败！"
    exit 1
fi
echo "项目编译完成"

# 压缩 dist 目录
echo "开始压缩 dist 目录..."
zip -r $LOCAL_DIST_ZIP dist
if [ $? -ne 0 ]; then
    echo "压缩 dist 目录失败！"
    exit 1
fi
echo "dist 目录压缩完成"

# 删除服务器上的 dist.zip
echo "开始删除服务器上的 dist.zip..."
ssh root@$SERVER_IP 'rm $SERVER_DIR/dist.zip'
if [ $? -ne 0 ]; then
    echo "删除服务器上的 dist.zip 失败！"
fi
echo "服务器上的 dist.zip 删除完成"

# 发送 dist.zip 到服务器
echo "开始发送 dist.zip 到服务器..."
scp $LOCAL_DIST_ZIP root@$SERVER_IP:$SERVER_DIR
if [ $? -ne 0 ]; then
    echo "发送 dist.zip 到服务器失败！"
    exit 1
fi
echo "dist.zip 发送到服务器完成"

# 进入服务器指定目录
echo "进入服务器指定目录..."
# 首先进入指定目录 $SERVER_DIR，
# 然后删除原有的 dist 文件夹，
# 接着解压新上传的 dist.zip 文件，
# 最后启动一个新的 Bash 会话。
ssh -t root@$SERVER_IP "cd $SERVER_DIR && rm -rf dist && unzip dist.zip && exec bash"

结语

通过编写这个 Shell 脚本，我们成功实现了自动化部署 Vue.js 项目到远程服务器的过程。这不仅提高了部署效率，还减少了人工操作可能带来的错误。希望这个技术分享能够帮助初中级前端工程师们简化项目部署的流程，让他们能够更专注于项目开发，提高工作效率。