خط أنابيب CI/CD لجافا سكريبت: الإعداد من الصفر في 10 خطوات

كيف تتوقف عن النشر يدويًا ولا تخاف من الالتزامات

هل سبق لك أن جلست مساء الجمعة، ونظرت إلى الإنتاج وفكرت: "حسنًا، يبدو أن كل شيء يعمل، ولكن إذا قمت بتشغيل البناء الآن، هل سينكسر شيء؟" مألوف؟ النشر اليدوي يشبه القفز بالمظلات بدون مدرب: قد يكون مثيرًا، لكنه غالبًا ما ينتهي بشكل مؤلم.

خط أنابيب CI/CD هو حبل الأمان التلقائي الخاص بك. هو من سيقوم ببناء المشروع، وتشغيل الاختبارات، وفحص الكود، وإذا كان كل شيء على ما يرام، فسينشر التحديث على الخادم. لا مزيد من "أوه، لقد نسيت تشغيل البناء" أو "لماذا فشلت الاختبارات، لقد كانت تعمل محليًا؟".

في هذه المقالة، سنقوم بإعداد خط أنابيب CI/CD كامل لمشروع جافا سكريبت من الصفر. بدون حشو، مع أمثلة كود حقيقية وتكوينات جاهزة. هيا بنا!

ما هو خط أنابيب CI/CD ولماذا يحتاجه مطور جافا سكريبت

دعنا نوضح المصطلحات فورًا لتجنب الارتباك.

التكامل المستمر (CI) — هو عندما يتم فحص كل التزام تقوم به تلقائيًا: يمر الكود عبر أدوات فحص الكود (linters)، والاختبارات، والبناء. إذا انكسر شيء ما، فستعرف ذلك بعد دقيقتين، وليس بعد أسبوع.

التسليم المستمر (CD) — النشر التلقائي للكود الجاهز على الخادم بعد اجتياز جميع فحوصات CI بنجاح.

بالنسبة لمشاريع جافا سكريبت، يعتبر CI/CD مهمًا بشكل خاص. لماذا؟ لأن النظام البيئي لـ JS يعتمد على آلاف التبعيات التي يمكن تحديثها في أي moment وتكسير الكود الخاص بك. الأتمتة تنقذك من مثل هذه المفاجآت.

ما الذي سنقوم بإعداده

\n
• GitHub Actions — أداة مجانية لـ CI/CD (تكفي لمعظم المشاريع)
\n
• أداة فحص الكود (Linter) — التحقق من نمط الكود (ESLint)
\n
• الاختبارات — تشغيل Jest تلقائيًا
\n
• البناء — بناء المشروع (Webpack أو Vite)
\n
• النشر — التحميل التلقائي على الخادم أو الاستضافة
\n

الخطوة 1: تجهيز المشروع

لنفترض أن لديك بالفعل مشروع جافا سكريبت (React، Vue، Node.js — لا يهم). إذا لم يكن لديك، فأنشئ مشروعًا بسيطًا للاختبار:

mkdir my-ci-cd-project\ncd my-ci-cd-project\nnpm init -y\nnpm install --save-dev jest eslint

أضف سكريبتًا أساسيًا في package.json:

{\n  "scripts": {\n    "test": "jest",\n    "lint": "eslint src/",\n    "build": "webpack --mode production",\n    "deploy": "rsync -avz dist/ user@server:/var/www"\n  }\n}

الآن لدينا أوامر محلية سيقوم CI/CD بتنفيذها تلقائيًا.

الخطوة 2: إنشاء سير عمل GitHub Actions

GitHub Actions هو عقل خط الأنابيب لدينا. كل شيء يُدار بواسطة ملفات YAML في مجلد .github/workflows/.

أنشئ ملفًا .github/workflows/ci-cd.yml:

name: CI/CD Pipeline\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions/checkout@v3\n    \n    - name: Setup Node.js\n      uses: actions/setup-node@v3\n      with:\n        node-version: '18'\n        \n    - name: Install dependencies\n      run: npm ci\n      \n    - name: Run linter\n      run: npm run lint\n      \n    - name: Run tests\n      run: npm test\n      \n    - name: Build project\n      run: npm run build

ماذا يحدث هنا؟ عند كل دفع إلى main أو develop، يقوم GitHub بتشغيل جهاز افتراضي بنظام Ubuntu، وتثبيت Node.js 18، وتثبيت التبعيات (تثبيت نظيف عبر npm ci — أسرع وأكثر موثوقية من npm install)، وفحص الكود باستخدام أداة الفحص، وتشغيل الاختبارات، وبناء المشروع.

إذا فشلت أي خطوة، سيتوقف خط الأنابيب وستتلقى إشعارًا.

الخطوة 3: إضافة أداة الفحص والاختبارات

ESLint و Jest هما المعياران لجافا سكريبت. سنقوم بإعدادهما في