前段时间我用vue写了一个个人主页,但是主页的配置总是要修改,每次都要自己构建好再上传,我就思考有没有一种方法能够自动化部署
通过GitHub Actions自动化部署或许可行,我研究了一下,参考了CSDN上的文章,加上Deepseek搜索,找到了完美的解决方案

配置SSH密钥

密钥可以直接通过宝塔面板获取

生成公钥和私钥

当然,这种方法并不安全,有权限管理相关问题

我们可以生成一个,方便管理

ssh-keygen -t rsa -b 4096 -C "github-actions@yourdomain.com" -f ~/.ssh/github_actions_rsa -N ""

参数解释:

  • -t rsa: 指定密钥类型为RSA
  • -b 4096: 指定密钥长度为4096位(更安全)
  • -C: 添加注释,通常用邮箱作为标识
  • -f: 指定密钥文件名称和路径
  • -N "": 设置空密码,便于自动化流程

这个命令会在~/.ssh/目录下生成两个文件:

  • github_actions_rsa (私钥,必须保密)
  • github_actions_rsa.pub (公钥,可公开)

配置公钥

cat ~/.ssh/github_actions_rsa.pub  ##查看公钥

mkdir -p ~/.ssh
echo "公钥内容" >> ~/.ssh/authorized_keys
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

GitHub仓库配置

设置Repository Secrets

在GitHub仓库中配置以下机密变量:

进入仓库 → Settings → Secrets and variables → Actions
添加以下secrets:

名称说明
SERVER_IP服务器IP地址如:123.456.789.0
USERNAMESSH用户名一般为root
PRIVATE_KEYSSH私钥内容完整的私钥文件内容
SERVER_DESTINATION部署目录路径如:/www/wwwroot/test

GitHub Actions工作流配置

在项目根目录创建.github/workflows/deploy.yml文件:

name: Vue Deploy # 工作流名称

on:
  push:
    branches:
      - main # 仅当推送至 main 分支时触发部署

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 使用 GitHub 提供的最新 Ubuntu 环境

    steps:
      # 1. 检出代码仓库
      - name: Checkout repository
        uses: actions/checkout@v4 # 使用官方 Action 检出代码

      # 2. 安装 Node.js 环境
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.11" # 指定 Node.js 版本,可以自选

      # 3. 安装项目依赖
      - name: Install dependencies
        run: npm install # 安装项目所需的 npm 包

      # 4. 构建并压缩 dist 内容
      - name: Build and Zip
        run: |
          sudo apt-get update && sudo apt-get install -y zip  # 安装 zip 工具
          npm run build  # 执行 Vue 项目构建
          cd dist  # 进入 dist 目录
          zip -r ../dist-content.zip ./*  # 压缩 dist 内容(不包含 dist 文件夹)

      # 5. 上传 dist-content.zip(可选,用于调试)
      - name: Upload dist-content.zip
        uses: actions/upload-artifact@v4
        with:
          name: dist-content # 构建产物名称
          path: dist-content.zip # 构建产物路径

      # 6. 通过 SCP 将 dist-content.zip 传输到服务器
      - name: Transfer dist-content.zip via SCP
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_IP }} # 服务器 IP(从 GitHub Secrets 获取)
          username: ${{ secrets.USERNAME }} # SSH 用户名(从 GitHub Secrets 获取)
          key: ${{ secrets.PRIVATE_KEY }} # SSH 私钥(从 GitHub Secrets 获取)
          source: "dist-content.zip" # 本地文件路径
          target: ${{ secrets.SERVER_DESTINATION}} # 服务器目标目录(从 GitHub Secrets 获取)

      # 7. SSH 登录服务器并执行部署脚本
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_IP}}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.PRIVATE_KEY }}
          script: |
            shopt -s extglob  # 启用 Bash 的扩展 glob 模式(支持 !(pattern) 语法)
            DEPLOY_DIR=${{ secrets.SERVER_DESTINATION }}  # 从 GitHub Secrets 获取部署目录路径
            cd $DEPLOY_DIR  # 进入部署目录
            rm -rf !(dist-content.zip)  # 删除所有文件,但保留 dist-content.zip
            unzip -o dist-content.zip  # 解压 dist-content.zip(-o 保留符号链接)
            rm -f dist-content.zip  # 删除 zip 文件(可选)
            nginx -s reload  # 重载 Nginx 服务(确保 Nginx 配置正确)
最后修改:2025 年 08 月 13 日
如果觉得我的文章对你有用,请随意赞赏