React Academy · درس

النشر المستقل وخطوط CI لـ MFEs

أنشئ خطوط CI/CD منفصلة بحيث يُنشر كل Micro-Frontend دون تنسيق مع الآخرين.

النشر المستقل وخطوط CI لـ MFEs درس مجاني في React Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

الهدف: النشر المستقل

ينبغي أن تنشر كل واجهة أمامية مصغّرة باستقلالية دون تنسيق مع الفرق الأخرى. ويتطلب ذلك مستودعات منفصلة (أو Nx/Turborepo)، وخطوط CI منفصلة، واستضافة منفصلة.

استراتيجيات المستودعات

هناك نهجان: Polyrepo (مستودع واحد لكل واجهة أمامية مصغّرة، مع استقلالية فعلية) وMonorepo (جميع الواجهات الأمامية المصغّرة في مستودع واحد، مع أدوات مشتركة وCI قائم على المشاريع المتأثرة). وغالبًا ما يكون Monorepo أبسط للبدء.

استراتيجية عنوان URL لمدخل التطبيق البعيد

تكشف كل واجهة أمامية مصغّرة ملف remoteEntry.js في عنوان URL يمكن التنبؤ به. انشره في مسار ذي إصدار محدد، أو استخدم ملف بيان للاكتشاف الديناميكي.

// Versioned URL strategy:
https://cdn.example.com/products/1.2.3/remoteEntry.js

// Latest URL strategy (simpler, no host update needed):
https://cdn.example.com/products/latest/remoteEntry.js

// Dynamic manifest:
https://cdn.example.com/manifest.json
// { products: 'https://cdn.example.com/products/1.2.3/remoteEntry.js' }

خط أنابيب GitHub Actions لتطبيق بعيد

يتضمن خط CI المعتاد لواجهة أمامية مصغّرة: الاختبار، والبناء، والرفع إلى CDN، وإشعار التطبيق المضيف اختياريًا لتحديث بيانه.

# .github/workflows/deploy.yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm test
      - run: npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET }}
          aws-region: us-east-1
      - run: aws s3 sync dist/ s3://cdn-bucket/products/ --delete

عناوين URL للتطبيقات البعيدة حسب البيئة

استخدم متغيرات البيئة في إعدادات webpack الخاصة بالتطبيق المضيف أو في البيان للإشارة إلى التطبيقات البعيدة في بيئتي التجهيز والإنتاج.

// Host webpack.config.js
const PRODUCTS_URL = process.env.PRODUCTS_REMOTE_URL ?? 'https://cdn.example.com/products/latest/remoteEntry.js';

new ModuleFederationPlugin({
  remotes: { products: `products@${PRODUCTS_URL}` },
});

Nx affected للمستودعات الأحادية

في مستودع Nx الأحادي، لا تبني nx affected الواجهات الأمامية المصغّرة التي تغيّرت وتنشرها إلا هي، بدلًا من جميع الواجهات — مما يوفر وقت CI.

# Only build MFEs affected by the current PR
npx nx affected:build --base=origin/main
npx nx affected:test --base=origin/main

اختبار العقود

عندما يغيّر تطبيق بعيد واجهة برمجة الوحدة المكشوفة، يتعطل المستهلكون. ويتحقق اختبار العقود (Pact) من اتفاق المنتج والمستهلك على الواجهة قبل النشر.

عمليات النشر التدريجي

انشر الإصدار الجديد من التطبيق البعيد إلى نسبة صغيرة من المستخدمين أولًا. راقب معدلات الأخطاء قبل تعميمه على جميع المستخدمين — فهذا يقلل نطاق تأثير التغييرات المتعارضة.

استراتيجية التراجع

احتفظ بالإصدار السابق من remoteEntry.js على CDN. وللتراجع، يكفي تحديث البيان للإشارة إلى الإصدار القديم.

// Rollback: update manifest to previous version
await updateManifest({ products: 'https://cdn/products/1.1.0/remoteEntry.js' });

التخزين المؤقت لملفات الإدخال البعيدة على CDN

اضبط مدة TTL قصيرة (أو عطّل التخزين المؤقت) لملف remoteEntry.js حتى تحصل التطبيقات المضيفة دائمًا على أحدث إصدار. واستخدم مدد TTL طويلة لملفات الأجزاء ذات الإصدارات المحددة.

# CloudFront cache behavior:
# remoteEntry.js → Cache-Control: no-cache, max-age=0
# *.chunk.js     → Cache-Control: max-age=31536000, immutable

اختبارات الدخان بعد النشر

شغّل اختبار دخان بسيطًا باستخدام Playwright بعد كل عملية نشر للتحقق من تحميل التطبيق البعيد وعرضه بصورة صحيحة ضمن سياق الغلاف.

تحقق سريع

ما الميزة الأساسية لاستخدام ملف بيان ذي إصدارات لعناوين URL الخاصة بالتطبيقات البعيدة بدلًا من تثبيتها في إعدادات webpack الخاصة بالتطبيق المضيف؟

مراجعة

لكل واجهة أمامية مصغّرة خط CI خاص بها: الاختبار ← البناء ← الرفع إلى CDN. استخدم عناوين URL للتطبيقات البعيدة ذات الإصدارات أو القائمة على البيان لتوفير إمكانية التراجع. واضبط مدة تخزين مؤقت قصيرة لملف remoteEntry.js لضمان الحصول الفوري على التحديثات. وفي مستودعات Nx الأحادية، استخدم nx affected لنشر الواجهات الأمامية المصغّرة التي تغيّرت فقط.

الأسئلة الشائعة

هل درس «النشر المستقل وخطوط CI لـ MFEs» مجاني؟

نعم — نص درس «النشر المستقل وخطوط CI لـ MFEs» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «النشر المستقل وخطوط CI لـ MFEs»؟

أنشئ خطوط CI/CD منفصلة بحيث يُنشر كل Micro-Frontend دون تنسيق مع الآخرين. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «النشر المستقل وخطوط CI لـ MFEs»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy