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

يمكن أن يكون نشر تطبيقات الويب على Firebase Hosting أمرًا شاقًا. ومع ذلك ، باستخدام إجراءات GitHub ، يمكنك تبسيط عملية النشر وتبسيطها وتنفيذها من السهل للغاية إدارة سير عمل النشر طوال العمر الافتراضي للبرنامج بالكامل مشروع.

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

ما هو خط أنابيب CI / CD؟

خط أنابيب CI / CD (التكامل المستمر / التسليم المستمر) عبارة عن مجموعة من العمليات المؤتمتة المنفذة لإتاحة إمكانية إنشاء التطبيقات واختبارها ونشرها بشكل مستمر.

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

يغطي خط أنابيب CI / CD عادةً مرحلتين ، وهذا يشمل:

instagram viewer
  1. مرحلة المصدر: تغطي هذه المرحلة التطوير الفعلي وصيانة كود التطبيق باستخدام أداة التحكم في الإصدار مثل Git.
  2. مرحلة البناء: تجمع هذه الخطوة الكود المصدري بكل تبعياته في تنسيق قابل للتنفيذ.
  3. مرحلة الاختبار: تتضمن هذه المرحلة اختبارات آلية للتحقق من جودة البرنامج. الهدف النهائي هو اكتشاف وتصحيح أي أخطاء. يمكنك إجراء أنواع مختلفة من الاختبارات في هذه المرحلة وبمجرد اجتياز الكود للاختبارات ، يصبح جاهزًا للنشر.
  4. النشر: تعمل هذه المرحلة على أتمتة عملية النشر في بيئة الإنتاج.

يجب أن يراقب خط الأنابيب كل مرحلة لضمان عدم وجود أخطاء ولتحسين العملية بأكملها للإصدارات المستقبلية.

ما هي إجراءات جيثب؟

إجراءات GitHub هي ميزة يوفرها GitHub لأتمتة عمليات سير عمل نشر البرنامج في خطوط أنابيب CI / CD. يجعل من الممكن تحديد وأتمتة سير عمل النشر مباشرة من مستودع GitHub لمشروعك.

إجراءات GitHub لها العديد من الفوائد:

  1. سهل الاستخدام: يوفر GitHub Actions واجهة سهلة الاستخدام وبناء جملة بسيطًا لإعداد تدفقات عمل النشر. يمكنك بسهولة وسرعة تحديد سير عمل مشروعك باستخدام المحرر المدمج على GitHub.
  2. التكامل الأصلي: إجراءات GitHub هي جزء من GitHub ، مما يجعل من السهل الإعداد والإدارة والتعاون في مهام سير العمل جنبًا إلى جنب مع رمز مشروعك.
  3. مرنة وقابلة للتخصيص: توفر إجراءات GitHub نظامًا أساسيًا مرنًا وقابلًا للتخصيص يضمن أنه يمكنك إنشاء تدفقات عمل تناسب احتياجاتك الخاصة. بالإضافة إلى ذلك ، فهو يدعم لغات برمجة متعددة. بمعنى ، يمكنك استخدامه بأي تقنية تفضلها.

قم بإعداد مشروع Firebase و React Client

للبدء ، توجه إلى Firebase وقم بتسجيل الدخول باستخدام حساب Google الخاص بك. في صفحة نظرة عامة على وحدة التحكم ، انقر فوق أنشئ مشروعًا لاقامة مشروع جديد وتقديم اسم المشروع.

التالي، إنشاء تطبيق React وتثبيت أدوات سطر أوامر Firebase:

npm install -g firebase-tools

يمكنك العثور على رمز هذا المشروع في ملف مستودع جيثب.

سجّل الدخول إلى Firebase من جهازك الطرفي باستخدام بيانات اعتماد حساب Firebase.

تسجيل الدخول إلى Firebase: ci

سيؤدي هذا إلى تشغيل تدفق مصادقة Firebase الذي سيطالبك بإدخال تفاصيل تسجيل الدخول الخاصة بك إذا لم تكن قد قمت بتسجيل الدخول بالفعل. بمجرد أن يصادق Firebase عليك ، سيطبع رمزًا مميزًا. انسخ هذا الرمز المميز ؛ ستستخدمه لتشغيل أوامر Firebase في إعداد إجراءات GitHub.

أخيرًا ، أنشئ إصدارًا جاهزًا للإنتاج من تطبيقك:

npm تشغيل البناء

ينشئ هذا الأمر الملفات والأصول الضرورية ، داخل مجلد "build" جديد في الدليل الجذر ، مطلوب لنشر التطبيق.

قم بتهيئة Firebase في تطبيق React الخاص بك

قم بتشغيل هذا الأمر لتهيئة Firebase في مجلد مشروعك:

الحرف الأول من Firebase

بعد ذلك ، تأكد من أنك تريد تهيئة Firebase في مشروعك والمضي قدمًا والاختيار الاستضافة: قم بتكوين الملفات لاستضافة Firebase و (اختياريًا) قم بإعداد نشر GitHub Actionمن قائمة الخيارات.

حدد أنك تريد استخدام مشروع موجود وحدد اسم المشروع الذي أنشأته في البداية على وحدة تحكم مطوري Firebase.

بعد ذلك ، حدد المجلد "build" كملف عام دليل ، حدد لا لإعادة كتابة جميع عناوين URL إلى الخيار /index.html ، حدد لا إلى خيار إعداد الإنشاءات التلقائية والنشر من GitHub ، وأخيرًا تحديد نعم للكتابة فوق خيار ملف build / index.html.

بعد إجراء التغييرات أعلاه ، سينشئ CLI ملف firebase.json في الدليل الجذر. يحتوي هذا الملف على جميع إعدادات الاستضافة التي يتطلبها سير عمل إجراءات GitHub.

أخيرًا ، قبل إعداد سير عمل إجراءات GitHub ، إنشاء مستودع على جيثب، ودفع ملفات المشروع إليها.

إعداد إجراءات GitHub

في مستودع مشروعك على GitHub ، حدد إعدادات > الأسرار والمتغيرات > أجراءات. في الصفحة السرية للمستودع ، أدخل FIREBASE_TOKEN كاسم السر ، والصق رمز Firebase الذي نسخته في ملف أسرار مجالات.

قم بإعداد نشر سير العمل

انقر فوق علامة التبويب "الإجراءات" في مستودع مشروعك ، وحدد تكوين Nodejs سير العمل في التكامل المستمر قسم.

بعد ذلك ، أعد تسمية اسم الملف إلى firebase.yml، احذف الكود المعياري من المحرر ، وأضف الكود أدناه:

# سينفذ سير العمل هذا تثبيتًا نظيفًا لتبعيات العقدة ،
# ذاكرة التخزين المؤقت / استعادتها ، وبناء ملف مصدر كود وإجراء اختبارات عبر مختلف
# إصدارات العقدة
# لمزيد من المعلومات، راجع:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
الاسم: Firebase CI


على:
 يدفع:
 الفروع: [رئيسي]
 طلب سحب:
 الفروع: [رئيسي]


وظائف:
 يبني:


 يعمل على: ubuntu-latest


 إستراتيجية:
 مصفوفة:
 إصدار العقدة: [14.x]

 خطوات:
 - الاستخدامات: الإجراءات / الخروج @ v2
 - الاسم: استخدم Node.js $ {{matrix.node-version}}
 يستخدم: الإجراءات / عقدة الإعداد @ v1
 مع:
 إصدار العقدة: $ {{matrix.node-version}}
 - تشغيل: npm install -g npm
 - الاسم: npm install، build and test
 تشغيل: |
 تثبيت npm
 npm تشغيل البناء
 - الاسم: أرشيف البناء
 الاستخدامات: الإجراءات / تحميل الأداة @ v2
 مع:
 الاسم: بناء
 المسار: بناء

 نشر:
 الاسم: نشر
 الاحتياجات: البناء
 يعمل على: ubuntu-latest
 خطوات:
 - الاستخدامات: الإجراءات / الخروج @ v2
 - الاسم: Download Build
 الاستخدامات: الإجراءات / download-artifact @ v2
 مع:
 الاسم: بناء
 المسار: بناء
 - الاسم: انشر في Firebase
 الاستخدامات: w9jds / firebase-action @ master
 مع:
 args: نشر - استضافة فقط
 env:
 FIREBASE_TOKEN: $ {{secrets. FIREBASE_TOKEN}}

فيما يلي شرح لبعض الخصائص الرئيسية:

  1. على: الأحداث التي تقوم بتشغيل الإجراءات في سير العمل هذا.
  2. وظائف: يحدد الوظائف التي يجب تشغيلها بواسطة إجراء معين. في هذه الحالة ، هناك وظيفتان: البناء والنشر.
  3. يعمل على: الجهاز الذي يجب تشغيل هذا الإجراء عليه.
  4. خطوات: يحدد سلسلة من الخطوات للإجراء المراد تنفيذه لوظيفة معينة.
  5. مع: يحدد أي وسيطات تتطلبها الإجراءات للتشغيل.
  6. اسم: اسم خطوة معينة لوظيفة.

أخيرًا ، قم بتنفيذ التغييرات التي تم إجراؤها في هذا الملف. سيقوم GitHub تلقائيًا بتشغيل سير العمل هذا ، وبناء ونشر تطبيق React على خدمة استضافة Firebase. يمكنك التحقق من عنوان URL المباشر للتطبيق في سجلات النشر.

نشر التطبيقات باستخدام إجراءات GitHub

توفر إجراءات GitHub طريقة نشر مبسطة. يضمن لك إمكانية نشر التطبيقات بشكل متسق وموثوق ، بغض النظر عن التقنية التي تقوم بإنشائها.

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