本文由 Loui 原创，如需转载，请先私信或评论。

前言

本文是我在搭建高仿酷我音乐开源项目的演示网站过程中的实践总结，所用的工具、环境不一定和你一模一样，不过我会尽可能多地加上注释，希望也能帮到你。

思路

先在本地将项目 build 出来，得到 dist 目录 (我这里用的打包工具是 Vite)；
接着将包括 dist 目录在内的整个项目 git push 到 Git 仓库 (这里以 Github 为例)；
收到 push 后，Github 通过预先配置好的 Webhooks 向服务器发送信息
服务器收到信息，执行预先配置的脚本，git pull dist 文件夹到网站根目录

我这里没有选择在服务器端 build 项目，而是预先在本地 build 出来，得到 dist 文件夹，再直接将 dist 文件夹传过去，因为不想再在服务器上装一遍 node 环境。

步骤

在本地项目中

Husky 是一个流行的 Git 钩子工具，用于在不同的 Git 操作前自动运行脚本，这里我使用 husky 实现在每一次 git commit 时，都自动 build 一次

安装 husky：npm install --save-dev husky
初始化 husky：npx husky init
找到文件 .husky/pre-commit ，将其中的内容改为如下代码
```
pnpm build
git add dist/
```

好了，现在我们再去 git commit 时， husky 就会为我们 build 最新的代码，并一起 commit 上去。

此外，还要确保 .gitignore 中没有 dist 文件夹，不要让 git 忽略了它。

由于现在 dist 文件夹中的内容也会被 git 管理，如果之前配置了 lint-staged 的话，要记得忽略 dist 文件夹的内容。

在服务器中

我这里服务器使用的是宝塔面板，并且提前安装好了 git

为项目新建两个文件夹，例如：/www/wwwroot/mock-kuwo、/www/wwwroot/mock-kuwo/dist

使用宝塔面板创建一个网站，类型选择 Html 项目就行，网站根目录设置为刚刚创建的 dist 文件夹

安装宝塔 WebHook 插件，点击【添加Hook】

输入如下脚本：

#!/bin/bash
export PATH="/usr/local/git/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/root/bin"

# 输出当前时间
echo "当前时间："
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "开始自动部署"

# 项目存放的路径，这里填入刚刚新建的文件夹地址
gitPath="/www/wwwroot/mock-kuwo"
# Git仓库地址
gitHttp="git@github.com:ThisIsLoui/mock-kuwo.git"

echo "项目存放路径：$gitPath"

# 检查项目路径是否存在
if [ -d "$gitPath" ]; then
    echo "进入文件夹：$gitPath"
    cd "$gitPath"
else
    echo "错误：项目目录不存在。"
    echo "自动尝试创建新的项目目录"
    mkdir -p "$gitPath"
    echo "设置目录权限"
    sudo chown -R www:www $gitPath
    cd "$gitPath" || exit 1
fi

# 检查本地是否已有Git仓库
if [ ! -d ".git" ]; then
    echo "本地未找到Git仓库，创建新仓库"
    git init
    git config --global --add safe.directory $gitPath
    git remote add origin $gitHttp
    # 设置只拉取远程仓库中的dist文件夹
    git config core.sparsecheckout true
    echo "dist" >> .git/info/sparse-checkout
fi


# 拉取仓库最新更改
echo "拉取仓库最新更改"
git pull origin main
echo "拉取完成"
echo "自动部署完成"