前段时间我用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-b4096: 指定密钥长度为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_keysGitHub仓库配置
设置Repository Secrets
在GitHub仓库中配置以下机密变量:
进入仓库 → Settings → Secrets and variables → Actions
添加以下secrets:
| 名称 | 值 | 说明 |
|---|---|---|
| SERVER_IP | 服务器IP地址 | 如:123.456.789.0 |
| USERNAME | SSH用户名 | 一般为root |
| PRIVATE_KEY | SSH私钥内容 | 完整的私钥文件内容 |
| 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 配置正确)
2 条评论
2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
新车首发,新的一年,只带想赚米的人coinsrore.com
新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
新车上路,只带前10个人coinsrore.com
新盘首开 新盘首开 征召客户!!!coinsrore.com
新项目准备上线,寻找志同道合 的合作伙伴coinsrore.com
新车即将上线 真正的项目,期待你的参与coinsrore.com
新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com
新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com