مهندس برمجيات & مطور ويب
  1. مدونتي
  2. CI/CD تطبيقات Node.js و React باستخدام GitHub

CI/CD تطبيقات Node.js و React باستخدام GitHub

27 حزيران 2025
الناشر أحمد عثمان

دليل خطوة بخطوة: إعداد CI/CD لتطبيقات Node.js و React باستخدام GitHub Actions

دليل خطوة بخطوة: إعداد CI/CD لتطبيقات Node.js و React باستخدام GitHub Actions

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

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

قد يبدو مشروعك كالتالي:

my-app/
├── .github/
│   └── workflows/      ← ملفات YAML الخاصة بـ GitHub Actions
├── src/                ← كود المصدر للتطبيق
├── package.json
└── ...

2. إنشاء ملف Workflow على GitHub Actions

داخل المجلد .github/workflows/، قم بإنشاء ملف باسم ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run Tests
        run: npm test

      - name: Build Project
        run: npm run build

      - name: Deploy
        if: github.ref == 'refs/heads/main'
        run: echo "Deploying..."

3. الفحص والترتيب (Linting and Formatting)

تأكد من إضافة سكريبتات الفحص داخل package.json الخاصة بك:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write .",
  "test": "jest",
  "build": "react-scripts build"
}

سيساعدك ذلك على ضمان نظافة الكود قبل تشغيل الاختبارات والبناء.

4. تشغيل الاختبارات

استخدم jest أو أي أداة اختبار تفضلها. مثال:

npm run test

يمكنك أيضًا ضبط حدود التغطية لضمان جودة الكود في المشروع.

5. البناء والنشر

أثناء عملية CI سيتم بناء مشروعك باستخدام:

npm run build

وللنشر يمكنك:

  • النشر على Vercel أو Netlify باستخدام CLI
  • استخدام FTP أو SSH لرفع الملفات على الخادم
  • النشر التلقائي على VPS باستخدام rsync أو GitHub Actions

6. إدارة أسرار المشروع

استخدم GitHub Secrets لتخزين بيانات تسجيل الدخول لـ FTP أو مفاتيح API أو مفاتيح SSH بأمان، والوصول إليها داخل الWorkflow بهذا الشكل:

env:
  DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}

7. خيار إضافي: زيادة رقم الإصدار تلقائيًا

يمكنك استخدام GitHub Actions أو أمر npm version مع Git Tag لزيادة إصدار package.json تلقائيًا بعد نجاح عملية النشر.

ملخص

يضمن لك إعداد CI/CD لتطبيقات Node.js و React تنفيذ عمليات الفحص والاختبار والبناء والنشر تلقائيًا بعد كل عملية دفع، مما يحسن جودة الكود ويزيد من سرعة نشر التطبيق إلى المستخدمين.

  • 0 تعليق

أضف تعليق