CI/CD لمشاريع JavaScript: GitHub Actions — دليل شامل

مقدمة: لماذا CI/CD ضروري لمشاريع JavaScript

تطوير تطبيق JavaScript حديث على Node.js هو عملية معقدة تتضمن كتابة الكود، الاختبار، البناء والنشر. بدون أتمتة، يتم تنفيذ هذه المراحل يدويًا، مما يؤدي إلى أخطاء وتأخيرات وانخفاض جودة المنتج. CI/CD (Continuous Integration / Continuous Delivery) هي ممارسة DevOps تعمل على أتمتة بناء الكود واختباره ونشره.

GitHub Actions هي أداة مدمجة في GitHub تسمح بإنشاء سير عمل (workflows) لأتمتة المهام. وهي مثالية لمشاريع JavaScript لأنها تدعم Node.js و npm و Yarn والعديد من الخدمات الشائعة. في هذه المقالة، سنشرح كيفية إعداد خط أنابيب CI/CD كامل لمشروع JavaScript الخاص بك باستخدام GitHub Actions.

ستتعلم: كيفية تشغيل الاختبارات، كيفية بناء التطبيق، كيفية النشر على خادم أو منصة سحابية، وكيفية تجنب الأخطاء النموذجية.

أساسيات GitHub Actions لـ JavaScript

ما هو GitHub Actions؟

GitHub Actions هي منصة لأتمتة سير العمل. تصف تسلسل الخطوات في ملف YAML يتم وضعه في المستودع (عادةً .github/workflows/main.yml). في كل مرة يحدث حدث (مثل push، pull request) يتم تشغيل workflow.

يتكون Workflow من jobs (مهام) يتم تنفيذها على runner (جهاز افتراضي). لمشاريع JavaScript، عادةً ما يتم استخدام runner Ubuntu المثبت مسبقًا مع Node.js.

Workflow أساسي لـ Node.js

لنبدأ بـ workflow بسيط يقوم بتشغيل الاختبارات عند كل push أو pull request. أنشئ ملف .github/workflows/ci.yml:

name: CI لـ JavaScript

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x, 18.x, 20.x]

    steps:
    - uses: actions/checkout@v4
    - name: استخدام Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm test
    - run: npm run build --if-present

يقوم هذا workflow بما يلي:

• المشغلات: يتم تشغيله عند push إلى main/develop أو عند pull request إلى main.
• مصفوفة الإصدارات: يختبر على Node.js 16، 18، 20 - وهذا يضمن التوافق.
• التخزين المؤقت: cache: 'npm' يسرع تثبيت التبعيات.
• الأوامر: npm ci (تثبيت نظيف)، npm test (اختبارات)، npm run build (بناء، إذا وجد).

إعداد خط أنابيب CI/CD كامل

الآن سنزيد التعقيد: نضيف linting، فحص الأمان والنشر التلقائي بعد الاختبار الناجح.

الخطوة 1: Linting والتنسيق

نضيف job لـ ESLint و Prettier. هذا يضمن نمط كود موحد:

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: '18.x'
        cache: 'npm'
    - run: npm ci
    - run: npm run lint
    - run: npx prettier --check .

في package.json يجب أن تكون هناك نصوص "lint" و "format". مثال:

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write ."
  }
}

الخطوة 2: أمان التبعيات

استخدم npm audit لفحص الثغرات الأمنية:

  security:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - run: npm audit --audit-level=high

إذا