GitHub Actions自动发布部署的超详细教程

# 工作流名称，github 后台展示的任务名称
name: auto deploy project
# 触发条件：main分支推送代码、合并代码时触发
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
# 执行任务
jobs:
  # 构建打包任务
  build-and-deploy:
    # 运行环境：最新ubuntu系统
    runs-on: ubuntu-latest
    # 执行步骤
    steps:
      # 1. 拉取当前仓库代码
      - name: checkout code
        uses: actions/checkout@v4
      # 2. 安装node.js环境（适配前端项目）
      - name: install node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18 # 适配你的项目node版本
          cache: 'npm' # 缓存依赖，提升下次构建速度
      # 3. 安装项目依赖
      - name: install dependencies
        run: npm install
      # 4. 项目打包（根据你的项目修改打包命令）
      - name: build project
        run: npm run build
      # 5. 部署到远程服务器（核心步骤）
      - name: deploy to server
        uses: easingthemes/ssh-deploy@v2
        env:
          # 服务器ssh密钥（后续配置github密钥）
          ssh_private_key: ${{ secrets.ssh_key }}
          # 服务器ip、端口、账号
          remote_host: ${{ secrets.server_host }}
          remote_user: ${{ secrets.server_user }}
          remote_port: ${{ secrets.server_port }}
          # 本地打包后的文件目录（前端默认dist）
          source: dist/
          # 服务器部署目录（替换为你的项目部署路径）
          target: /usr/local/nginx/html/project
          # 部署前清空服务器旧文件（避免残留缓存）
          args: "-rltgodzvo --delete"

git add .
git commit -m "feat: 新增github actions自动部署配置"
git push

# 替换打包步骤
- name: build & start server
  run: |
    npm install
    pm2 restart server || pm2 start app.js --name server

# github pages 静态项目自动部署 + 钉钉通知
name: deploy github pages
# 触发条件：main分支推送、合并代码触发
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
# 权限配置：必须开启页面读写权限，否则部署失败
permissions:
  contents: read
  pages: write
  id-token: write
# 并发限制：避免多次部署冲突
concurrency:
  group: "pages"
  cancel-in-progress: false
jobs:
  # 构建静态资源
  build:
    runs-on: ubuntu-latest
    steps:
      - name: checkout code
        uses: actions/checkout@v4
      # 适配前端项目打包
      - name: install node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'
      - name: install dependencies
        run: npm install
      - name: build static page
        run: npm run build
      # 上传打包产物为部署资源
      - name: upload pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # 根据你的项目打包目录修改
  # 部署到 github pages
  deploy:
    # 依赖构建任务完成
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: deploy to github pages
        id: deployment
        uses: actions/deploy-pages@v4
      # 钉钉部署成功通知（原生post请求，解决 43002 需要post请求报错）
      - name: dingtalk success notify
        if: success()
        uses: crazy-max/dingtalk-action@v2
        with:
          webhook: ${{ secrets.dingtalk_webhook }}
          msgtype: markdown
          content: |
            ### ✅ github pages 部署成功
            - 部署分支：${{ github.ref_name }}
            - 提交人：${{ github.actor }}
            - 访问地址：[点击访问](${{ steps.deployment.outputs.page_url }})
      - name: dingtalk fail notify
        if: failure()
        uses: crazy-max/dingtalk-action@v2
        with:
          webhook: ${{ secrets.dingtalk_webhook }}
          msgtype: markdown
          content: |
            ### ❌ github pages 部署失败
            - 部署分支：${{ github.ref_name }}
            - 提交人：${{ github.actor }}
            - 请及时查看 actions 日志排查问题

# 工作流名称，github 后台展示的任务名称
name: auto deploy project
# 触发条件：main分支推送代码、合并代码时触发
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
# 执行任务
jobs:
  # 构建打包任务
  build-and-deploy:
    # 运行环境：最新ubuntu系统
    runs-on: ubuntu-latest
    # 执行步骤
    steps:
      # 1. 拉取当前仓库代码
      - name: checkout code
        uses: actions/checkout@v4
      # 2. 安装node.js环境（适配前端项目）
      - name: install node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18 # 适配你的项目node版本
          cache: 'npm' # 缓存依赖，提升下次构建速度
      # 3. 安装项目依赖
      - name: install dependencies
        run: npm install
      # 4. 项目打包（根据你的项目修改打包命令）
      - name: build project
        run: npm run build
      # 5. 部署到远程服务器（核心步骤）
      - name: deploy to server
        uses: easingthemes/ssh-deploy@v2
        env:
          # 服务器ssh密钥（后续配置github密钥）
          ssh_private_key: ${{ secrets.ssh_key }}
          # 服务器ip、端口、账号
          remote_host: ${{ secrets.server_host }}
          remote_user: ${{ secrets.server_user }}
          remote_port: ${{ secrets.server_port }}
          # 本地打包后的文件目录（前端默认dist）
          source: dist/
          # 服务器部署目录（替换为你的项目部署路径）
          target: /usr/local/nginx/html/project
          # 部署前清空服务器旧文件（避免残留缓存）
          args: "-rltgodzvo --delete"
      # 6. 钉钉部署成功通知
      - name: dingtalk deploy success
        if: success()
        uses: zkxiaoming/dingtalk-action@v1
        with:
          webhook: ${{ secrets.dingtalk_webhook }}
          title: '✅ 项目部署成功'
          message: |
            【github actions 自动部署通知】
            项目分支：${{ github.ref_name }}
            提交人：${{ github.actor }}
            提交信息：${{ github.event.head_commit.message }}
            部署状态：部署完成，服务正常上线
      # 7. 钉钉部署失败通知
      - name: dingtalk deploy failed
        if: failure()
        uses: zkxiaoming/dingtalk-action@v1
        with:
          webhook: ${{ secrets.dingtalk_webhook }}
          title: '❌ 项目部署失败'
          message: |
            【github actions 自动部署通知】
            项目分支：${{ github.ref_name }}
            提交人：${{ github.actor }}
            提交信息：${{ github.event.head_commit.message }}
            部署状态：部署异常，请及时排查日志修复
      # 8. 钉钉任务取消通知
      - name: dingtalk deploy cancelled
        if: cancelled()
        uses: zkxiaoming/dingtalk-action@v1
        with:
          webhook: ${{ secrets.dingtalk_webhook }}
          title: '⚠️ 项目部署取消'
          message: |
            【github actions 自动部署通知】
            项目分支：${{ github.ref_name }}
            提交人：${{ github.actor }}
            部署状态：部署任务被手动取消