很多前端项目其实并不需要复杂的发布系统，但每次手动打包、上传服务器又非常繁琐。

本文记录一次 使用 GitHub Actions + SSH，实现前端项目自动部署到 Ubuntu 服务器 的完整过程，适合个人项目或中小型站点快速接入 CI/CD。

在开始之前，需要准备以下内容：

一台用于部署应用的服务器(本文示例使用 Ubuntu)
一个已创建好的 GitHub 仓库

假设你的项目代码已经上传到了 GitHub 仓库。后续即可进行 CI/CD 相关的操作

一、配置 SSH（整个 CI/CD 成功与否的关键）

1、本地生成 SSH Key（可能你本地之前已经有生成过，用在其他地方）

下面命令会生成一对新的 SSH Key，不会覆盖你现有的 key。其中：

id_ed25519_cicd_demo 是 key 文件名；

- C 后面的只是备注，会显示在公钥文件中

# 执行下面命令时，一路回车即可，不用设置密码
ssh-keygen -t ed25519  -f ~/.ssh/id_ed25519_cicd_demo -C "github actions"

2、把【公钥】放到服务器

ssh-copy-id -i ~/.ssh/id_ed25519_cicd_demo.pub 登录你服务器的用户名@服务器IP

我测试使用的 root 用户，上面命令执行成功后，可以在服务器 /root/.ssh/authorized_keys 文件中，看到和你本地 id_ed25519_cicd_demo.pub 文件中相同的内容

3、本地验证是否能登录

ssh -i ~/.ssh/id_ed25519_cicd_demo 登录你服务器的用户名@服务器IP

4、将【私钥】配置到 github 仓库中

⚠️ 注意

SERVER_SSH_KEY 必须是【完整私钥内容】，不要有多余空格

SERVER_USER 大小写敏感（我本人就在这里踩过坑）

图片描述


GitHub 项目仓库 → Settings → Secrets and variables → Actions → Secrets

添加三个字段
SERVER_HOST        # 值填你的服务器公网IP
SERVER_SSH_KEY     # 值填你本地生成的 ～/.ssh/id_ed25519_cicd_demo 文件中的内容
SERVER_USER        #值填登录你服务器的用户名，注意大小写！

5、配置 GitHub Actions

在你的项目根目录添加一个 yml 文件，我的文件名叫 deploy.yml，文件路径如下。

# 项目根目录创建
.github/workflows/deploy.yml

# deploy.yml
name: Frontend CI/CD

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # 1. 拉代码
      - name: Checkout
        uses: actions/checkout@v4

      # 2. 设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

      # 3. 安装依赖并构建
      - name: Build project locally
        run: |
          yarn install --frozen-lockfile
          yarn build

      # 4. 验证构建产物
      - name: Verify build output
        run: |
          if [ ! -d "dist" ]; then
            echo "Build failed: dist directory does not exist"
            exit 1
          fi
          echo "Build verification successful"
          ls -al dist

      # 5. 写 SSH 私钥到 runner
      - name: Setup SSH key
        run: |
          mkdir -p ~/.ssh
          echo "${{ secrets.SERVER_SSH_KEY }}" -d > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          chmod 700 ~/.ssh

      # 6. 调试私钥（只打印前 3 行）
      - name: Debug SSH key
        run: cat ~/.ssh/id_rsa | head -n 3

      # 7. 测试 SSH 是否能连上服务器
      - name: Test SSH connection
        run: |
          ssh -i ~/.ssh/id_rsa -o StrictHostKeyChecking=no \
          ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }} "echo SSH OK"

      # 8. 清空服务器旧文件
      - name: Clean server directory
        uses: appleboy/ssh-action@v1
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            mkdir -p /brand/cicd
            rm -rf /brand/cicd/*

      # 9. 上传 dist
      - name: Upload dist
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "dist/*"
          target: "/brand/cicd"