分享一个react /vue，github action

前言

提交github代码后，想要github自动build后传到你自己的服务器， 免去手动打包并传代码到服务器的麻烦

创建workflow

建立环境变量

环境变量可直接在workflow里读取

示例代码

name: Node.js CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [22.x]
        #See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm ci, build and test
        run: |
          npm install -g pnpm
          pnpm install
          pnpm run build   
          ls ./dist


      - name: copy file via ssh password
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          password: ${{ secrets.SERVER_PASS }}
          port: ${{ secrets.PORT }}
          source: "./dist"
          target: /usr/local/caddy/site2
     ```     

粘贴代码后，点击右上角的保存按钮

部署完成， 此时推送代码到github后就会自动部署了

如果workflow构建失败，可在这里查看日志，自行解决