إدارة فعالة لتحفظات GitHub Actions لنشر الإصدارات

هل قام فريقك ببذل الكثير من الجهد في تعبئة الشيفرة يدويًا؟ إذا كان الأمر كذلك، فحان الوقت لاستخدام GitHub Actions Artifacts، حتى يتمكن فريقك من أتمتة هذا الإجراء. في الوقت نفسه، ستقلل من تباين الإصدار وتوفير الوقت للعمل على مهام أخرى حيوية.

تتيح لك GitHub Actions Artifacts نقل البيانات بفعالية من وظيفة نشطة إلى أخرى، مما يقضي على المهام المتكررة والمستهلكة للوقت المشاركة في النشر. في هذا البرنامج التعليمي، ستتعلم كيفية استخدام وإدارة الآثار لنشر تطبيق React على Netlify.

استمر في القراءة وابدأ في إنشاء نشرات متسقة!

المتطلبات المسبقة

سيكون هذا البرنامج التعليمي عرضًا عمليًا. إذا كنت ترغب في متابعة، تأكد من أن لديك تطبيق React بسيط ومستودع GitHub. يستخدم هذا البرنامج التعليمي مستودع React Counter App.

بناء سير عمل CI/CD

عندما تنتهي وظيفة في سير عمل GitHub Actions، ينتهي البيانات التي يتم معالجتها وإنشاؤها. يمكن الاحتفاظ بالبيانات المسماة بالآثار على صفحة المستودع بعد اكتمال الوظائف ويمكن تحميلها باستخدام إجراء upload-artifact.

ولكن قبل استخدام GitHub Actions Artifacts لنشر إصداراتك، يجب أن تقوم أولاً ببناء سير عمل CI/CD لتطبيقك:

ذات الصلة:كيفية إنشاء أنبوبة Jenkins CI/CD

1. قم بإنشاء مجلد .github في الدليل الرئيسي لتطبيقك وأنشئ مجلدًا فرعيًا يسمى workflows.

2. بعد ذلك، قم بإنشاء ملف سير العمل (ملف .yml) في مجلد workflows. يمكنك تسمية الملف كما تريد. ولكن لهذا البرنامج التعليمي، يتم تسمية الملف بـ ci.yml.

يجب أن يكون هيكل مورد سير العمل الخاص بملفك كما يلي.

3. أضف الكود التالي إلى ملف ci.yml واحفظ التغييرات. يقوم الكود أدناه بإنشاء سير عمل يسمى CI بوظيفة بناء للتطبيق.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# سيتم تشغيل سير العمل عند وقوع حدث الدفع أو السحب على الفرع الرئيسي

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# نظام التشغيل الذي يتم تشغيله عليه
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# الحصول على الكود من المستودع
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. الآن، قم بإضافة التغييرات والتأكيد عليها، وأرسلها إلى مستودع GitHub البعيد الخاص بك.

إذا كان الدفع ناجحًا، سترى التأكيد بدائرة ملونة باللون الأصفر العنبري، كما هو موضح أدناه، مما يشير إلى تشغيل سير العمل.

5. انقر على علامة الأعمال لعرض سير العمل.

6. انقر على أي وظيفة بناء على الجانب الأيسر ووسع وظيفة بناء التطبيق. سترى بيانات الوظيفة بناء (الملفات الثابتة) التي تم إنشاؤها. هذه هي الملفات التي تحتاجها للنشر.

هذه الملفات التي تم إنشاؤها تفقد عندما يتم التخلص من الخادم الذي يقوم بتشغيل الوظيفة (أو عندما ينتهي الوظيفة). نظرًا لأنك ستحتاج إلى هذه الملفات للنشر، ستقوم بتنفيذ خطوة لأخذ هذه الملفات وتحميلها كمورد في القسم التالي.

7. في النهاية، أضف الكود التالي بعد تشغيل الاختبارات في مرحلة الخطوات في وظيفة البناء الخاصة بك.

الكود أدناه يقوم بتحميل عنصر فني يسمى production من دليل البناء باستخدام إجراء actions/upload-artifact@v3.

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

 # تحميل العنصر الفني 
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

تكوين فترة استبقاء العنصر المخصصة

يتم تخزين العناصر لمدة 90 يومًا بشكل افتراضي قبل محوها. ولكن استنادًا إلى نوع المستودع، يمكنك تغيير هذه الفترة الزمنية للاحتفاظ.

فيما يلي القيم التي يمكنك تعيينها لتخصيص فترة استبقاء العنصر المخصصة:

• المستودع الخاص – أي قيمة بين 1 و 400 يومًا.
• المستودع العام – أي قيمة بين 1 و 90 يومًا فقط.

لتعيين فترة استبقاء العنصر المخصصة، قم بتحديث ملف YAML الخاص بسير العمل الخاص بك من خلال تضمين retention-days: 2 في خطوتك # تحميل العنصر الفني.

 # تحميل العنصر الفني 
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
     # تخصيص فترة استبقاء العنصر 
		retention-days: 2

بديلًا عن ذلك، قم بتكوين فترة استبقاء العنصر مع ما يلي من خلال GitHub:

• انتقل إلى علامة التبويب الإعدادات في المستودع.
• انقر فوق الإجراء (لوحة اليسار) لتوسيع القائمة المنسدلة، واختر عام.
• أدخل عدد الأيام التي ترغب في الاحتفاظ بالصنف تحت قسم الحفظ وسجل السجل الموضح أدناه، ثم انقر فوق حفظ.

استيراد مشروع من مستودع جيت إلى نيتليفي

يمكن الآن الوصول إلى صنف البناء في مهمة أخرى في سير العمل عن طريق تنزيله لأن لديك خطوة لتحميل الصنف، مما يقلل من وقت اكتمال سير العمل. ستضيف مهمة نشر إلى سير عملك، وإحدى الخطوات في تلك المهمة تنزل العنصر المرفوع.

ولكن قبل تحديث سير العمل الخاص بك، ستقوم بإعداد نيتليفي لنشر التطبيق:

1. افتح متصفح الويب المفضل لديك، وانتقل إلى نيتليفي وسجّل الدخول باستخدام حساب GitHub الخاص بك.

2. بمجرد تسجيل الدخول، انقر فوق إضافة موقع جديد في قسم المواقع، واختر استيراد مشروع موجود لبدء استيراد مشروعك.

3. انقر فوق GitHub نظرًا لأنك ستستخدم المستودع الذي أنشأته لهذا البرنامج التعليمي على GitHub. تظهر نافذة منبثقة حيث ستقوم بتخويل نيتليفي الوصول إلى هويتك على GitHub.

4. بمجرد التخويل، ابحث عن المستودع الذي ترغب في استيراد المشروع منه وحدده.

5. في الصفحة الجديدة، قم بتكوين إعدادات البناء الأساسية للموقع، مثل الفرع الذي ترغب في النشر منه والأمر الذي يجب استخدامه للبناء. ولكن نظرًا لأنك ستنشر باستخدام إجراءات GitHub، اترك حقلي أمر البناء والدليل المنشور فارغين.

انقر على “نشر الموقع” بعد تكوين إعدادات البناء، وسترى أن الموقع يتم نشره. بمجرد النشر، سيتم إنشاء رابط حي للموقع.

إذا كنت قد تركت حقل أمر البناء فارغًا، فسيتم عرض صفحة 404 عند الانتقال إلى الرابط لأن التطبيق لم يتم بناؤه.

6. بعد ذلك، انقر على “إعدادات الموقع” للاطلاع على معلومات الموقع (الخطوة السادسة).

7. في النهاية، في صفحة تفاصيل الموقع، قم بتدوين معرف الموقع الواقع أدناه في قسم معلومات الموقع للاستخدام في وقت لاحق.

إنشاء رمز وصول شخصي

الآن بعد الحصول على معرف الموقع الخاص بك، يجب عليك الحصول على رمز وصول. سيمنحك الرمز الشخصي للوصول إلى حساب Netlify الخاص بك بحيث يتم تنفيذ عملية النشر على Netlify باستخدام GitHub Actions.

1. انقر فوق أيقونة ملف التعريف الخاص بك (أعلى اليمين)، واختر “إعدادات المستخدم” للوصول إلى إعدادات ملف التعريف الخاص بك.

2. في الصفحة الجديدة، انقر على “التطبيقات” (اللوحة اليسرى) → “رمز وصول جديد” (تحت قسم “رموز وصول شخصية”) لبدء إنشاء رمز وصول جديد.

3. في الصفحة الجديدة، أدخل اسمًا وصفيًا للرمز واضغط على “إنشاء الرمز”.

4. الآن، انسخ الرمز إلى مكان آمن.

تأمين معرف الموقع ورمز الوصول عن طريق إنشاء الأسرار

الآن بعد الحصول على معرف الموقع ورمز الوصول من Netlify، يمكنك إضافتهما إلى مستودعك لاستخدامهما في سير العمل الخاص بالأفعال. ولكن أولاً، يجب عليك تأمين معرف الموقع ورمز الوصول عن طريق إنشاء الأسرار.

ذات الصلة:إطلاق متغيرات البيئة والأسرار في GitHub Actions

1. انتقل إلى مستودع GitHub الخاص بك على متصفح الويب.

2. بعد ذلك، انقر على علامة التبويب “الإعدادات” → “الأسرار” (لوحة اليسار) → “الإجراءات” (تحت “الأسرار”) للوصول إلى قائمة الإجراءات المتاحة في مستودعك.

3. انقر فوق “سر مستودع جديد” على صفحة الأسرار الخاصة بالإجراءات لبدء إضافة سر جديد.

4. الآن، قدم اسمًا وصفيًا للسر الجديد. ولكن يستخدم هذا البرنامج التعليمي اسم NETLIFY_AUTH_TOKEN كاسم سر.

أضف رمز الوصول الخاص بك كقيمة وانقر على “إضافة سر” لإنشاء السر الجديد.

5. في الختام، كرر الخطوة الرابعة، ولكن في هذا الوقت، أضف سرًا لمعرف موقع الويب الخاص بك.

بمجرد الإضافة، سترى الأسرار في قسم أسرار المستودع، كما هو موضح أدناه.

تحميل ونشر الأصل إلى Netlify

الآن بعد إعداد موقع Netlify الخاص بك والأسرار، ستقوم بتضمين خطوة في سير العمل الخاص بك للنشر على Netlify باستخدام الأسرار الخاصة بك.

1. قم بتحديث سير العمل الخاص بك عن طريق إضافة الكود أدناه الذي يحتوي على وظيفة النشر.

يحتوي الكود التالي على خطوات لتنزيل الفن الذي تم تحميله وخطوة أخرى لنشره على Netlify.

يمكنك العثور على الشيفرة الكاملة لملف ci.yml في مستودع ATA على GitHub.

deploy:
  name: Deploy #اسم الوظيفة
  needs: build # يجب أن يتم تشغيل وظيفة البناء بنجاح لتشغيل وظيفة النشر
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# يقوم بتنزيل الملفات المرفوعة
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# خطوة للنشر على Netlify
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# أسرار للمصادقة
    with:
      args: deploy --dir=build --prod

2. بعد ذلك، قم بإضافة التغييرات ودفعها إلى المستودع البعيد.

يجب أن تظهر أحدث عملية الالتزام على صفحة سير العمل على المستودع، كما هو موضح أدناه.

بمجرد الالتزام، انقر على أحدث تشغيل لعرض مزيد من التفاصيل.

إذا تم تشغيل الوظائف بنجاح، سترى علامة صح خضراء بجوار الوظائف وفناجين الإنتاج في أسفل الصفحة.

3. الآن، انقر على وظيفة النشر (لوحة اليسار)، وقم بتوسيع مهمة النشر على Netlify. سترى نتائج الخطوة، التي تحتوي على عنوان موقع الويب.

انقر على عنوان موقع الويب للتحقق من أن الموقع يعمل ويمكن الوصول إليه.

يتم فتح عنوان URL تلقائيًا في علامة تبويب جديدة في متصفح الويب الخاص بك، كما هو موضح أدناه. تشير هذه النتيجة إلى أن موقعك يعمل بشكل صحيح.

حذف الفناجين غير المستخدمة لتوفير المساحة

بعد كل إصدار، تستخدم مساحة أكبر على القرص عند رفع وتنزيل إصدارات جديدة. كيف يمكنك توفير المساحة؟ حذف الفناجين غير المستخدمة هو الحلاقل مناسب. يجب عليك تقليل عدد فناجين الإصدار الموجودة على كل خادم لتجنب تراكم الآلاف من الإصدارات وامتلاء القرص بالكامل.

بالإضافة إلى استخدام إعداد فترة الاحتفاظ لحذف الآثار بعد فترة من الزمن، يمكنك أيضًا حذف الآثار من صفحة السير العمل على GitHub:

على صفحة سير العمل الخاصة بك، انقر على أيقونة الحذف بجانب الآثار لحذفها.

الآن، انقر موافق على الرسالة (الأعلى) لتأكيد حذف الآثار.

لاحظ أدناه أن الآثار لم تعد على الصفحة، مما يؤكد حذفها بنجاح.

الختام

لقد رأيت كيف تجعل الآثار عملية تطوير الأتمتة المعقدة أسهل، حيث يوفر سير العمل معلومات لآخر. في هذه النقطة، يجب أن يكون لديك فهم أفضل الآن لآثار إجراءات GitHub وكيف يمكن استخدامها لإصدارات النشر الخاصة بك.

باستخدام هذا المعرفة الجديدة، لماذا لا تستفيد من إجراءات GitHub لأتمتة سير عمل مشروعك القادم؟