GitHub Actions للواجهة الأمامية: lint وtest وbuild

لماذا نستخدم 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

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

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

الاختبار باستخدام Matrix

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 للواجهة الأمامية