GitHub Actions สำหรับฟรอนต์เอนด์: ตรวจรูปแบบ ทดสอบ และบิลด์

เหตุใดจึงต้องมี CI สำหรับส่วนหน้า

พื้นฐาน GitHub Actions

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test

การแคชส่วนพึ่งพา

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'npm'   # or 'yarn' or 'pnpm'

งานตรวจรูปแบบโค้ด

lint:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run lint
    - run: npm run format:check

งานทดสอบ

test:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm test -- --coverage
    - uses: codecov/codecov-action@v4
      with:
        files: ./coverage/lcov.info

งานสร้าง

build:
  runs-on: ubuntu-latest
  needs: [lint, test]
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run build
    - uses: actions/upload-artifact@v4
      with:
        name: dist
        path: dist/
        retention-days: 7

งานแบบขนาน

การตรวจสอบชนิดข้อมูล

typecheck:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npx tsc --noEmit

การทดสอบแบบเมทริกซ์

test:
  strategy:
    fail-fast: false
    matrix:
      node: [18, 20, 22]
      os: [ubuntu-latest, windows-latest, macos-latest]
  runs-on: ${{ matrix.os }}
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: ${{ matrix.node }} }
    - run: npm ci && npm test

ขั้นตอนแบบมีเงื่อนไข

- name: Deploy to staging
  if: github.ref == 'refs/heads/main'
  run: npm run deploy:staging

ความลับและตัวแปร

- run: npm run deploy
  env:
    DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

กฎการป้องกันสาขา

ตรวจสอบอย่างรวดเร็ว

สรุป: GitHub Actions สำหรับฟรอนต์เอนด์