CI/CD لمشاريع TypeScript: GitHub Actions

مقدمة: لماذا يعتبر CI/CD أمرًا حاسمًا لمشاريع TypeScript

التطوير الحديث باستخدام TypeScript لا يتطلب فقط كودًا عالي الجودة، بل أيضًا عملية موثوقة لتوصيله للمستخدمين. التشغيل اليدوي للاختبارات، والبناء، والنشر ليس مجرد روتين، بل هو أيضًا مصدر للأخطاء. يحل CI/CD (التكامل المستمر / النشر المستمر) هذه المشكلة من خلال أتمتة كل مرحلة.

في هذه المقالة، سنشرح كيفية إعداد خط أنابيب CI/CD كامل لمشروع TypeScript باستخدام GitHub Actions. ستتعلم كيفية أتمتة الفحص (linting)، والاختبار، والبناء، ونشر تطبيقك، مما يوفر ساعات من وقت العمل.

المقالة مكتوبة لمنصة PythonLib، ولكن جميع الأمثلة والمفاهيم قابلة للتطبيق على أي مشروع TypeScript. سنستخدم TypeScript 5.x و Node.js 20.

الجزء الرئيسي: إعداد CI/CD خطوة بخطوة

1. هيكل المشروع والتحضير

قبل كتابة سير العمل (workflow)، تأكد من أن مشروع TypeScript الخاص بك مُعد بشكل صحيح. إليك الحد الأدنى من الهيكل:

my-typescript-app/├── src/│   └── index.ts├── tests/│   └── index.test.ts├── package.json├── tsconfig.json├── .eslintrc.json└── .github/    └── workflows/        └── ci.yml

هام: في ملف package.json يجب أن تكون هناك نصوص برمجية (scripts) للاختبار والبناء.

{  "name": "my-typescript-app",  "version": "1.0.0",  "scripts": {    "build": "tsc",    "test": "jest",    "lint": "eslint src/**/*.ts",    "start": "node dist/index.js"  },  "devDependencies": {    "typescript": "^5.3.0",    "jest": "^29.7.0",    "@types/jest": "^29.5.0",    "ts-jest": "^29.1.0",    "eslint": "^8.50.0"  }}

تأكد من أن tsconfig.json يتضمن outDir صحيحًا (مثل "./dist") ووضع strict.

2. إنشاء سير عمل GitHub Actions

يعمل GitHub Actions بناءً على ملفات YAML في دليل .github/workflows/. أنشئ ملفًا باسم ci.yml بالمحتوى التالي:

name: CI/CD Pipeline

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

jobs:  build-and-test:    runs-on: ubuntu-latest

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

    steps:    - uses: actions/checkout@v4

    - name: Use Node.js ${{ matrix.node-version }}      uses: actions/setup-node@v4      with:        node-version: ${{ matrix.node-version }}        cache: 'npm'

    - name: Install dependencies      run: npm ci

    - name: Lint code      run: npm run lint

    - name: Build project      run: npm run build

    - name: Run tests      run: npm test

    - name: Upload build artifacts      uses: actions/upload-artifact@v4      with:        name: build-${{ matrix.node-version }}        path: dist/

تحليل النقاط الرئيسية:

• on: يتم تشغيل سير العمل عند push و pull request إلى الفروع main و develop.
• matrix: نختبر على إصدارين من Node.js (18 و 20) لضمان التوافق.
• npm ci: تثبيت نظيف للتبعيات (أسرع وأكثر موثوقية من npm install).
• upload-artifact: نحفظ الملفات المبنية لاستخدامها لاحقًا في النشر.

3. إضافة مرحلة النشر

بعد البناء والاختبار الناجحين، يمكن نشر التطبيق تلقائيًا. سننظر في النشر على GitHub Pages (للمواقع الثابتة) وعلى VPS عبر SSH.

الخيار A: النشر على GitHub Pages

deploy:  needs: build-and-test  runs-on: ubuntu-latest  if: github.ref == 'refs/heads/main'

  steps:  - uses: actions/download-artifact@v4    with:      name: build-20.x      path: dist/

  - name: Deploy to GitHub Pages    uses