前端github-workflows部署腾讯云轻量服务器

首先说下我的github的目录结构

bash 复制代码
root-directory/
├── .github/
│   └── workflows/
│       └── deploy.yml                    # GitHub Actions 自动化部署配置
├── user-console/                         # 前端项目1
│   ├── src/*
│   ├── package.json
│   └── node_modules/                    # 依赖包目录
├── user-management/                     # 前端项目2
│   ├── src/*
│   ├── package.json
│   └── node_modules/                    # 依赖包目录
└── README.md

需要腾讯云准备得内容

  1. 服务器 ip地址(公网)
  2. ssh端口号(默认就用22)
  3. ssh链接的用户名
  4. ssh链接的私钥

ssh私钥如何获取

  • 服务器控制台
  • 左侧控制台 SSH密钥
  • 正常这个创建完会自动给你下载一个.pem后缀的秘钥,很关键记得保存。如果没了你就重新创建一个
  • 然后去服务器里面点开之后会看到SSH密钥,根据步骤绑定即可。
  • 注意:上面的名字就是( ssh链接的用户名)

腾讯云准备ok后去github上开始进行配置关键key信息,如下:

最后配置 yml

bash 复制代码
├── .github/
│   └── workflows/
│       └── deploy.yml 
bash 复制代码
name: 自动化部署更新

# 触发条件:main分支推送且涉及前端/配置文件变更
on:
  push:
    branches: ["main-publish"]
    paths:
      - "user-console/**"
      - "user-management/**"
      - ".github/workflows/deploy.yml"

jobs:
  build-user-console:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: 查看当前Node版本
        run: |
          echo "当前预装Node版本:$(node -v)"

      - name: 安装user-console依赖
        working-directory: "./user-console"
        run: |
          echo "安装前端依赖..."
          npm install
          if [ $? -ne 0 ]; then echo "前端依赖安装失败"; exit 1; fi

      - name: 前端打包
        working-directory: "./user-console"
        run: |
          echo "user-console打包..."
          npm run build
          if [ $? -ne 0 ]; then echo "前端打包失败"; exit 1; fi
          echo "前端打包完成: $(du -sh ./user-console/dist)"

      - name: 暂存前端打包结果
        uses: actions/upload-artifact@v4
        with:
          name: user-console-artifact
          path: "./user-console/dist"
          retention-days: 1

  build-user-management:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: 查看当前Node版本
        run: |
          echo "当前预装Node版本:$(node -v)"

      - name: 安装user-management依赖
        working-directory: "./user-management"
        run: |
          echo "安装user-management依赖..."
          npm install
          if [ $? -ne 0 ]; then echo "依赖安装失败"; exit 1; fi

      - name: user-management打包
        working-directory: "./user-management"
        run: |
          echo "开始user-management打包..."
          npm run build
          if [ $? -ne 0 ]; then echo "user-management打包失败"; exit 1; fi
          echo "user-management打包完成: $(du -sh ./user-management/dist)"

      - name: 暂存user-management打包结果
        uses: actions/upload-artifact@v4
        with:
          name: user-management-artifact
          path: "./user-management/dist"
          retention-days: 1

  deploy:
    runs-on: ubuntu-latest
    needs: [build-user-console, build-user-management]
    steps:
      - name: 下载user-console打包结果
        uses: actions/download-artifact@v4
        with:
          name: user-console-artifact
          path: ./user-console-dist

      - name: 下载user-management打包结果
        uses: actions/download-artifact@v4
        with:
          name: user-management-artifact
          path: ./user-management-dist

      - name: 传输user-console文件到服务器
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          port: ${{ secrets.SERVER_PORT }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "./user-console-dist/*"
          target: "/tmp/deploy/user-console-dist/"
          strip_components: 1

      - name: 传输user-management文件到服务器
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          port: ${{ secrets.SERVER_PORT }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: "./user-management-dist/*"
          target: "/tmp/deploy/user-management-dist/"
          strip_components: 1

      - name: 部署到腾讯云服务器
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          port: ${{ secrets.SERVER_PORT }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            # 服务器目录配置
            USER_CONSOLE_DEPLOY="/var/www/user-console-dist"
            USER_MANAGEMENT_DEPLOY="/var/www/user-management-dist"
            
            echo "开始部署到腾讯云服务器..."
            
            # 检查上传的文件是否存在
            echo "检查上传文件..."
            ls -la /tmp/deploy/ || echo "deploy目录不存在"
            ls -la /tmp/deploy/user-console-dist/ || echo "user-console-dist目录不存在"
            ls -la /tmp/deploy/user-management-dist/ || echo "user-management-dist目录不存在"
            
            # 创建目标目录
            sudo mkdir -p $USER_CONSOLE_DEPLOY
            sudo mkdir -p $USER_MANAGEMENT_DEPLOY
            
            # 备份当前文件(如果存在)
            if [ -d "$USER_CONSOLE_DEPLOY" ] && [ "$(ls -A $USER_CONSOLE_DEPLOY)" ]; then
              sudo cp -r $USER_CONSOLE_DEPLOY /tmp/backup-user-console-$(date +%Y%m%d-%H%M%S) 2>/dev/null || true
              echo "已备份user-console现有文件"
            fi
            if [ -d "$USER_MANAGEMENT_DEPLOY" ] && [ "$(ls -A $USER_MANAGEMENT_DEPLOY)" ]; then
              sudo cp -r $USER_MANAGEMENT_DEPLOY /tmp/backup-user-management-$(date +%Y%m%d-%H%M%S) 2>/dev/null || true
              echo "已备份user-management现有文件"
            fi
            
            # 清空目标目录
            sudo rm -rf $USER_CONSOLE_DEPLOY/*
            sudo rm -rf $USER_MANAGEMENT_DEPLOY/*
            
            # 复制新文件到目标目录
            if [ -d "/tmp/deploy/user-console-dist" ] && [ "$(ls -A /tmp/deploy/user-console-dist)" ]; then
              sudo cp -r /tmp/deploy/user-console-dist/* $USER_CONSOLE_DEPLOY/
              echo "user-console文件复制完成"
            else
              echo "错误: user-console-dist目录为空或不存在"
              exit 1
            fi
            
            if [ -d "/tmp/deploy/user-management-dist" ] && [ "$(ls -A /tmp/deploy/user-management-dist)" ]; then
              sudo cp -r /tmp/deploy/user-management-dist/* $USER_MANAGEMENT_DEPLOY/
              echo "user-management文件复制完成"
            else
              echo "错误: user-management-dist目录为空或不存在"
              exit 1
            fi
            
            # 清理临时文件
            sudo rm -rf /tmp/deploy
            
            # 重启nginx
            sudo systemctl restart nginx
            
            echo "前端部署完成"
            echo "user-console部署到: $USER_CONSOLE_DEPLOY"
            echo "user-management部署到: $USER_MANAGEMENT_DEPLOY"

然后推送分支即可。在github的Actions中可以看到