مهندس برمجيات & مطور ويب
  1. مدونتي
  2. زيادة إنتاجية مطوري الويب

زيادة إنتاجية مطوري الويب

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

زيادة إنتاجية مطوري الويب: أتمتة البناء باستخدام GitHub Actions وDocker وSpring Boot وReact

في هذا الدليل، ستتعلم كيف تقوم بأتمتة بناء، واختبار، ونشر تطبيقك الكامل باستخدام GitHub Actions وDocker وSpring Boot وReact. خطوة بخطوة لإنشاء خط أنابيب CI/CD حديث وفعال.

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

  • /backend – مشروع Spring Boot (الخادم)
  • /frontend – تطبيق React (الواجهة الأمامية)
  • docker-compose.yml – تشغيل الخدمات معًا
  • .github/workflows/ci-cd.yml – ملف سير العمل في GitHub Actions

2. إنشاء Dockerfile للتطبيقين

2.1 ملف Docker للـ Backend

FROM openjdk:17-jdk-slim
WORKDIR /app
COPY mvnw ./
COPY .mvn .mvn
COPY pom.xml .
COPY src src
RUN ./mvnw package -DskipTests
ENTRYPOINT ["java","-jar","target/myapp.jar"]

2.2 ملف Docker للـ Frontend

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY src src
RUN npm run build
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

3. ملف docker-compose

version: "3.8"
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
  frontend:
    build: ./frontend
    ports:
      - "3000:80"

شغّل المشروع محليًا باستخدام الأمر: docker-compose up --build

4. إعداد GitHub Actions

قم بإنشاء الملف التالي داخل مجلد المشروع: .github/workflows/ci-cd.yml

name: CI/CD Pipeline

on:
  push:
    branches: [main]

jobs:
  build_and_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: إعداد Java 17
        uses: actions/setup-java@v3
        with:
          distribution: 'temurin'
          java-version: '17'

      - name: بناء واختبار Backend
        working-directory: backend
        run: ./mvnw test

      - name: إعداد Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: بناء Frontend
        working-directory: frontend
        run: npm install && npm run build

  docker_build_and_push:
    needs: build_and_test
    runs-on: ubuntu-latest
    environment: production
    steps:
      - uses: actions/checkout@v3

      - name: تسجيل الدخول في Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USER }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: بناء ودفع صورة الـ Backend
        working-directory: backend
        uses: docker/build-push-action@v4
        with:
          context: ./backend
          tags: youruser/backend:latest

      - name: بناء ودفع صورة الـ Frontend
        working-directory: frontend
        uses: docker/build-push-action@v4
        with:
          context: ./frontend
          tags: youruser/frontend:latest

5. إعداد Secrets في GitHub

  • DOCKERHUB_USER: اسم المستخدم في Docker Hub
  • DOCKERHUB_TOKEN: رمز الوصول (Access Token)

6. خيارات النشر

  • Docker Compose على VPS: سحب الصور وتشغيلها
  • Kubernetes: استخدام ملفات YAML أو Helm Charts
  • خدمات مدارة: مثل AWS ECS أو Google Cloud Run

7. أفضل الممارسات

  • استخدم التخزين المؤقت (Cache) للتبعيات في Maven وNPM لتسريع البناء
  • قم بتشغيل اختبارات الوحدة والفورمات قبل الدمج
  • لا تستخدم :latest في الإنتاج — استخدم إصدارات مرقّمة
  • أضف Health Checks وتكاملات مع أدوات مراقبة مثل Prometheus

الخلاصة

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

في المقال التالي: نشر متعدد البيئات، ترحيل قواعد البيانات، وتحديثات تلقائية (OTA)!

  • 0 تعليق

أضف تعليق