使用 GitHub Actions 实现前端项目的自动化部署流程
背景与需求
在开发个人前端项目时，频繁手动构建和部署会影响迭代效率。为了实现代码提交后自动将最新版本部署到服务器，提升协作和预览体验，采用 GitHub Actions 搭建无服务器干预的 CI/CD 流程成为理想选择。
方案对比与选型
- Jenkins：功能强大但需独立部署服务，维护成本高，还需编写 Shell 脚本进行构建和传输，适合复杂企业级场景，轻量项目显得臃肿。
- Vercel / Netlify 等托管平台：开箱即用，但依赖第三方网络稳定性，在国内访问时常受限，且无法完全掌控部署环境。
- GitHub Actions：依托仓库原生支持，无需额外平台或服务器，通过事件触发即可完成构建、打包与发布，集成度高、配置灵活，适合自托管部署。
最终选定 GitHub Actions 结合 SSH 协议将构建产物推送至自有服务器。
部署架构概览
整个流程包含以下组件：
- GitHub 仓库（存放源码）
- 远程 Linux 服务器（运行 Nginx 提供静态服务）
- SSH 密钥认证机制（安全传输文件）
步骤一：生成并配置 SSH 密钥对
为确保 Actions 能安全登录服务器，需生成专用密钥对：
ssh-keygen -t rsa -b 4096 -C "github-action-deploy" -f ./github_deploy_key
执行后生成两个文件：
github_deploy_key：私钥，用于 GitHub Secrets 存储github_deploy_key.pub：公钥，需添加至服务器的~/.ssh/authorized_keys
将公钥内容写入目标服务器对应用户的授权列表中：
echo "公钥内容" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
步骤二：设置仓库 Secrets
进入 GitHub 仓库 → Settings → Security → Secrets and variables → Actions，新增以下变量：
| 名称 | 说明 |
|---|---|
SERVER_HOST |
服务器公网 IP 或域名 |
SERVER_USER |
可登录的系统用户（建议非 root） |
SSH_PRIVATE_KEY |
上面生成的私钥内容（github_deploy_key 文件全部内容） |
SCP_PORT |
SSH 端口，默认为 22 |
DEPLOY_PATH |
服务器上 Nginx 指向的静态资源目录，如：/var/www/html/myapp |
步骤三：配置 Nginx 静态站点
确保服务器已安装 Nginx 或 OpenResty，并创建对应的 server 块：
server {
listen 80;
server_name your-domain.com;
root /var/www/html/myapp;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
注意将 root 路径与 DEPLOY_PATH 保持一致。若使用面板工具（如 1Panel），可在图形界面完成路径绑定。
步骤四：编写 GitHub Actions 工作流
在项目根目录下创建 .github/workflows/deploy.yml：
name: Build and Deploy
on:
push:
branches:
- main
jobs:
deploy-frontend:
runs-on: ubuntu-latest
steps:
- name: 获取源码
uses: actions/checkout@v4
- name: 安装 Node.js 环境
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: 安装依赖并构建
run: |
npm install
npm run build
- name: 同步文件到服务器
uses: appleboy/scp-action@v0.1.5
with:
host: ${{ secrets.SERVER_HOST }}
username: ${{ secrets.SERVER_USER }}
key: ${{ secrets.SSH_PRIVATE_KEY }}
port: ${{ secrets.SCP_PORT }}
source: "dist/*"
target: ${{ secrets.DEPLOY_PATH }}
该工作流会在每次推送到 main 分支时自动触发，依次完成代码拉取、依赖安装、构建打包及文件同步。
验证部署结果
提交代码后，进入仓库的 Actions 标签页，可查看工作流执行日志。成功后访问服务器地址即可看到最新页面。
若构建失败，可根据日志排查 Node 版本、脚本命令、权限或网络问题。
