实战：利用 GitHub Actions 实现 Vue 项目自动构建并部署至 CentOS 服务器

手动通过 FTP 或宝塔上传代码不仅低效，还容易出错。本文将教你如何配置 GitHub Actions，实现“代码一推，自动打包，自动部署”。

一、 准备工作

在开始之前，请确保你拥有：

1. 源码仓库：已托管在 GitHub。
2. 服务器：一台运行 CentOS 的服务器（已安装 Nginx）。
3. 本地环境：已安装 Git，并能生成 SSH 密钥。

---

二、 生成与配置 SSH 密钥

这是实现自动化部署的核心：让 GitHub 拥有登录你服务器的权限。

生成密钥对

在本地终端执行：

Bash

ssh-keygen -t ed25519 -C "deploy-automation"

一路回车即可。你会得到两个文件：id_ed25519（私钥）和 id_ed25519.pub（公钥）。

服务器配置（锁）

将公钥内容粘贴到服务器的授权列表里：

Bash

# 在本地获取公钥内容
cat ~/.ssh/id_ed25519.pub

# 在服务器上执行
mkdir -p ~/.ssh
# 将复制的内容替换下面的引号部分echo "ssh-ed25519 AAAAC3Nza...你的公钥内容" > ~/.ssh/authorized_keys

# 修复权限（必须执行，否则 SSH 会拒绝连接）
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

GitHub 配置（钥匙）

1. 打开 GitHub 仓库，进入 Settings -> Secrets and variables -> Actions。
2. 点击 New repository secret，添加以下三个变量：
   • SERVER_HOST: 服务器公网 IP。
   • SERVER_USER: 登录用户名（如 root）。
   • SSH_PRIVATE_KEY: 粘贴本地 id_ed25519 文件的完整内容。

---

三、 编写 Workflow 脚本

在项目根目录下创建 .github/workflows/deploy.yml 文件，并填入以下代码：

YAML

name: Deploy to CentOSon:push:branches:- main # 监听 main 分支的推送jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: 检出代码uses: actions/checkout@v4- name: 设置 Node.jsuses: actions/setup-node@v4with:node-version: '20'cache: 'npm' # 缓存依赖，加速构建- name: 安装依赖并打包run: |
          npm install
          npm run build
- name: 同步文件到服务器uses: easingthemes/ssh-deploy@mainwith:SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}REMOTE_HOST: ${{ secrets.SERVER_HOST }}REMOTE_USER: ${{ secrets.SERVER_USER }}SOURCE: "dist/" # Vue 打包后的目录TARGET: "/www/wwwroot/your-project" # 服务器目标路径ARGS: "-avz --delete" # 同步并删除服务器上多余的老文件

---

四、 避坑指南（QA）

• Q: 报错 Permission denied (publickey) 怎么办？

  • A: 检查服务器 authorized_keys 是否误存了私钥。它必须是 ssh-rsa 或 ssh-ed25519 开头的一行字符串。同时检查 ~/.ssh 目录权限是否为 700。

• Q: 部署成功后刷新页面 404？

  • A: 在 Nginx 配置的 location / 段落中添加 try_files $uri $uri/ /index.html;。

• Q: 构建速度太慢？

  • A: 确保在脚本中开启了 cache: 'npm'，这样 GitHub Actions 会缓存 node_modules。

---

五、 总结

通过这套流程，你已经实现了：

1. 自动化：告别传统的上传工具。
2. 规范化：每次部署都有日志可查。
3. 高效化：专注代码开发，运维交给 Actions。