全栈系列(15)github Actions自动化部署前端vue

很多国内开发者都会采用 "Gitee 做代码托管（速度快），GitHub 做自动化构建（功能强）" 的双仓库策略。

你不需"手动复制文件"，只需要利用 Git 的 多远程仓库（Multiple Remotes） 功能，就能在一个本地项目中同时管理两个仓库。

以下是实现这一方案的最佳实践步骤：

第一步：在 GitHub 上新建仓库

1. 登录 GitHub，创建一个空仓库（假设叫 vue-admin-deploy）。
2. 不要勾选"Initialize this repository with a README"，我们需要一个纯空的仓库。

第二步：添加 GitHub 为第二个远程仓库

打开你的本地项目终端，执行以下命令：

# 1. 查看当前的远程仓库（应该只有 gitee）
git remote -v
# 输出通常是：origin  https://gitee.com/你的用户名/项目名.git (fetch/push)

# 2. 添加 GitHub 为第二个远程仓库，命名为 "github"
git remote add github https://github.com/你的用户名/vue-admin-deploy.git

# 3. 再次查看
git remote -v
# 现在应该有 origin (Gitee) 和 github (GitHub) 两个了

生成私钥和公钥

请完全照做一遍，不要跳过任何步骤：

第一步：在本地电脑生成新密钥（PEM格式）

打开你的终端（Git Bash 或 CMD），执行这条命令生成一对新钥匙：

# -m PEM 是关键！强制生成旧版兼容格式，防止 Action 不识别
# -f gh_action_key 指定文件名
# -N "" 设置空密码（必须为空）
ssh-keygen -t rsa -b 4096 -m PEM -f gh_action_key -N ""

执行后，你的当前目录下会有两个文件：

1. gh_action_key (私钥，没后缀)
2. gh_action_key.pub (公钥)

第二步：把公钥放到阿里云服务器

1. 复制公钥内容：打开 gh_action_key.pub，复制里面的全部内容。
2. 登录服务器：使用 SSH 登录你的阿里云服务器。
3. 写入文件：执行以下命令（假设你是用 root 用户部署，如果是其他用户，请切换到对应用户）

# 进入 ssh 目录
cd ~/.ssh

# 把公钥追加到授权文件中（注意是 >> 也就是追加）
# 按 i 进入编辑模式，粘贴内容，按 Esc，输入 :wq 保存
vi authorized_keys
# 或者直接用命令追加（把下面双引号里的内容换成你刚才复制的公钥）
echo "ssh-rsa AAAAB3NzaC1yc2E..." >> authorized_keys

修复权限（至关重要！！！）

权限不对，SSH 会直接拒绝登录，不管密钥对不对。请在服务器执行

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

第三步：把私钥放到 GitHub Secrets

密钥准备 (Secrets)

为了安全，不要将服务器 IP 和私钥明文写在代码里。在 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中添加：

• SERVER_IP: 服务器公网 IP。
• SERVER_USER: 登录用户名 (如 root)。
• SERVER_SSH_KEY: SSH 私钥。

1. 复制私钥内容：在本地打开 gh_action_key（那个没后缀的文件）。

2. 全选复制 ：必须包含 -----BEGIN RSA PRIVATE KEY----- 和 -----END RSA PRIVATE KEY-----。

3. 去 GitHub ：Settings -> Secrets and variables -> Actions。

4. 更新 Secret ： 去 GitHub 仓库页面 -> Settings -> Secrets and variables -> Actions。

5. 添加 SERVER_IP, SERVER_USER, SERVER_SSH_KEY。

6. SERVER_IP: 服务器公网IP，SERVER_USER：root,SERVER_SSH_KEY:上面生成的私钥

配置 GitHub Actions

1. 在项目根目录下，新建文件夹 .github/workflows/（注意是 .github 不是 .gitee）。
2. 新建文件 deploy.yml。

注意node版本 和使用的npm还是pnpm, yml会不一样,我使用的是pnpm。以及你的前端项目是放到服务器哪个目录下的，我的是放到/var/www/html/vue-admin-template/,请改成你自己的服务器目录

文件deploy.yml

name: Deploy to Aliyun (PNPM)
on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # 1. 核心新增：安装 PNPM
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 9 # 这里建议写你本地使用的 pnpm 大版本 (如 8 或 9)

      # 2. 修改：设置 Node 并开启 pnpm 缓存
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22.13.0' # <--- 关键修改：设置 Node.js 版本
          cache: 'pnpm' # <--- 关键修改：告诉它去找 pnpm-lock.yaml

      # 3. 修改：使用 pnpm 命令安装和打包
      - name: Install & Build
        run: |
          node -v
          pnpm -v
          pnpm install --frozen-lockfile # 类似 npm ci，严格按照 lock 文件安装
          pnpm run build
          ls -la dist/

      # 4. 上传文件 (保持不变)
      - name: Deploy to Server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: 'dist/*'
          target: '/var/www/html/vue-admin-template/'
          strip_components: 1

      # 5. 重启 Nginx (保持不变)
      - name: Restart Nginx
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            sudo chown -R www-data:www-data /var/www/html/vue-admin-template/
            sudo chmod -R 755 /var/www/html/vue-admin-template/
            echo "部署完成！"

同步推送代码

以后写完代码，你需要推送到两个地方。

方式一：分别推送（清晰明了）

# 先推送到 Gitee（日常保存）
git push origin master

# 再推送到 GitHub（触发部署）
git push github master

方式二：一条命令推送到两个仓库（懒人推荐）

你可以修改 git 配置，让 origin 同时指向两个地址：

# 给 origin 添加第二个 push 地址
git remote set-url --add --push origin https://gitee.com/你的用户名/项目名.git
git remote set-url --add --push origin https://github.com/你的用户名/vue-admin-deploy.git

# 验证
git remote -v

# 以后只需要执行这一条，就会同时推送到 Gitee 和 GitHub
git push origin master

这时候在master分支提交代码，去github的Actions下去查看部署流程就ok了。

四、 服务器配置：Nginx 反向代理与 404 修复

部署上线后，常见的问题是刷新页面 404，或者接口请求 404。这是因为线上失去了 Vite 的开发代理，必须靠 Nginx。

1. 统一接口前缀

为了方便 Nginx 转发，建议前后端统一使用 /api 前缀。

• 前端：.env.production 设置 VITE_API_BASE_URL = '/api'
• 后端：Express 入口文件挂载 app.use('/api/auth', authRouter)

2. Nginx 配置 (完整版)

# HTTP 强制跳转 HTTPS (保持不变)
server {
    listen 80;
    server_name ifxia.xyz;
    return 301 https://$host$request_uri;
}

# HTTPS 服务器
server {
    listen 443 ssl;
    server_name ifxia.xyz;

    # SSL 配置 (保持你原来的)
    ssl_certificate /etc/letsencrypt/live/ifxia.xyz/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ifxia.xyz/privkey.pem;

# 这样 /var/www/html 下的 index.html 就变成了官网
    root /var/www/html;
    index index.html index.htm;



    # --- 1. 前端配置 (子路径) ---
    location /vue-admin-template {
        # 使用 alias 指向存放前端代码的实际目录
        alias /var/www/html/vue-admin-template;
        index index.html;
        # 解决 Vue Router 刷新 404 问题
        try_files $uri $uri/ /vue-admin-template/index.html;
    }


   
    # --- 2. 后端接口 (统一入口) ---
    # 只要是 /api 开头的，全部给 Node.js
    location /api/ {
        # ⚠️ 注意：这里结尾不要加 /
        # 不加 / 意味着：把 /api/auth/login 原样发给 Node
        # 因为Node端已经配置了 app.use('/api/auth', ...)，所以正好匹配
        proxy_pass http://localhost:3000;
        
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  
}

验证并重启nginx

nginx -t

systemctl reload nginx