v0.app的next.js项目自动部署到宝塔服务器教程

首先自备梯子登录github。

然后v0.app项目右上角点击github头像那边进行连接到自己github后，点击 push changes，推送该项目到自己的github。

然后到自己的服务器安装下 webhook。

1. 添加 git 用户

为了方便安全部署项目：

bash 复制代码

adduser git

2. 下载和安装 webhook（用 root 用户）

bash 复制代码

curl -LO https://github.com/adnanh/webhook/releases/download/2.8.2/webhook-linux-amd64.tar.gz
tar xvf webhook-linux-amd64.tar.gz
mv webhook-linux-amd64/webhook /usr/local/bin/

验证是否安装成功：

bash 复制代码

webhook --version
#会输出：webhook version 2.8.2

3. 切换到 git 用户

bash 复制代码

su git

先安装环境（npm 可以用 nvm 来安装，比较方便切换版本，请自行搜索如何安装）：

bash 复制代码

npm install -g pm2

4. 设置 webhook 环境

创建webhook配置文件

bash 复制代码

cd
mkdir hooks
cat > hooks/test.json <<EOF
[
  {
    "id": "test-auto-deploy",
    "execute-command": "/home/git/deploy_scripts/deploy_test.sh",
    "command-working-directory": "/home/git",
    "trigger-rule": {
      "and": [
        {
          "match": {
            "type": "payload-hash-sha1",
            "secret": "设置自己的密码",
            "parameter": {
              "source": "header",
              "name": "X-Hub-Signature"
            }
          }
        },
        {
          "match": {
            "type": "value",
            "value": "refs/heads/main",
            "parameter": {
              "source": "payload",
              "name": "ref"
            }
          }
        }
      ]
    }
  }
]
EOF

5. 创建部署脚本

从github获取到更新后，会自动运行的脚本

bash 复制代码

mkdir deploy_scripts

cat > deploy_scripts/deploy_test.sh <<EOF
#!/bin/bash

echo \`date +"%Y-%m-%d %H:%M:%S"\`': deploy begin' >> /home/git/deploy_scripts/deploy.log
# 下面改为自己的站点目录，确保这个目录要运行：chown -R git:git /www/wwwroot/www.test.com
cd /www/wwwroot/www.test.com
git pull
npm install
npm run build
pm2 stop test
pm2 start npm --name "test" -- run start

echo \`date +"%Y-%m-%d %H:%M:%S"\`': deploy done' >> /home/git/deploy_scripts/deploy.log
EOF

6. 安装 tmux 并启动 webhook 服务

退出 git 用户，重新返回 root 用户，安装 tmux，以方便后台运行和查看 webhook 服务：

bash 复制代码

yum -y install tmux

创建 webhook 用的 tmux 窗口：

bash 复制代码

tmux new -s webhook-test
su git
cd

启动 webhook 环境：

bash 复制代码

webhook -hooks hooks/test.json -port 9000 -verbose

7. 宝塔配置反向代理

这是为了方便github那边用域名来访问webhook服务。

去宝塔创建网站，如 www.test.com。
打开该站点，点击 SSL，申请证书服务。
点击 反向代理 => 添加反向代理：
- 代理名称随便
- 目标 URL 填：http://127.0.0.1:9000
- 点击确定

现在 https://www.test.com 就会自动代理到 webhook 服务了。

8. GitHub 设置 Webhook

进入 GitHub 项目，点击 Settings → Webhooks → Add webhook：（请根据上面自己的webhook配置内容来填写）

Payload URL ：https://www.test.com/hooks/test-auto-deploy
Content type ：选 application/json
Secret ：填上面 hooks/test.json 自己设置的密码
SSL verification ：选 Enable SSL
其他默认即可，然后点击 Add webhook

9. 测试自动部署

现在在 v0.app 项目那边，随便修改下，然后点击右上角 GitHub 头像，点击 push changes 。

等待约 30 秒，就可以自动部署成功了。