رصد الأداء باستخدام Lighthouse CI

كيفية إضافة Lighthouse إلى نظام دمج مستمر، مثل GitHub Actions

Katie Hempenius
Katie Hempenius
X

Lighthouse CI هي مجموعة من الأدوات لاستخدام Lighthouse أثناء عملية الدمج المستمر. يمكن دمج Lighthouse CI في سير عمل المطوّرين بعدة طرق مختلفة. يتناول هذا الدليل المواضيع التالية:

  • استخدام واجهة سطر الأوامر (CLI) في Lighthouse CI
  • ضبط موفِّر عملية التكامل المستمر (CI) لتشغيل Lighthouse CI
  • إعداد GitHub Action وفحص الحالة لـ Lighthouse CI سيؤدي ذلك إلى عرض نتائج Lighthouse تلقائيًا في طلبات سحب GitHub.
  • إنشاء لوحة بيانات الأداء ومستودع البيانات لتقارير Lighthouse

نظرة عامة

Lighthouse CI هي مجموعة من الأدوات المجانية التي تسهّل استخدام Lighthouse ل monitoring. يقدّم تقرير Lighthouse واحد نبذة عن أداء صفحة الويب في وقت تنفيذه، ويوضّح Lighthouse CI كيفية تغيُّر هذه النتائج بمرور الوقت. ويمكن استخدام ذلك لتحديد تأثير تغييرات معيّنة في الرموز البرمجية أو التأكّد من استيفاء حدود الأداء أثناء عمليات الدمج المستمر. على الرغم من أنّ مراقبة الأداء هي حالة الاستخدام الأكثر شيوعًا لعملية التكامل المستمر في Lighthouse، يمكن استخدامها لمراقبة جوانب أخرى من تقرير Lighthouse، مثل تحسين محركات البحث أو تسهيل الاستخدام.

توفّر واجهة سطر الأوامر في Lighthouse CI الوظيفة الأساسية لخدمة Lighthouse CI. (ملاحظة: هذه أداة منفصلة عن Lighthouse CLI). يوفّر IDE IDE CLI مجموعة من الأوامر لاستخدام Lighthouse CI. على سبيل المثال، ينفِّذ الأمر autorun عدّة عمليات تشغيل في Lighthouse، ويحدِّد متوسط تقرير Lighthouse، ويحمِّل التقرير للتخزين. يمكن تخصيص هذا السلوك بشكل كبير من خلال ضبط علامات إضافية أو تخصيص ملف الإعدادات lighthouserc.js الخاص بـ Lighthouse CI.

على الرغم من أنّ الوظيفة الأساسية لخدمة Lighthouse CI تكون محصورة في واجهة برمجة التطبيقات الخاصة بها، يتم استخدام Lighthouse CI عادةً من خلال أحد النهجَين التاليَين:

  • تشغيل عملية دمج Lighthouse المستمر كجزء من عملية الدمج المستمر
  • استخدام إجراء GitHub في Lighthouse CI الذي يُجري تعليقات على كل طلب سحب
  • تتبُّع الأداء بمرور الوقت من خلال لوحة البيانات التي يوفّرها Lighthouse Server

تستند جميع هذه الأساليب إلى واجهة برمجة التطبيقات Lighthouse CI CLI.

تشمل البدائل لميزة "التكامل المستمر" في Lighthouse خدمات مراقبة الأداء التابعة لجهات خارجية أو كتابة نص برمجي خاص بك لجمع بيانات الأداء أثناء عملية التكامل المستمر. ننصحك باستخدام خدمة تابعة لجهة خارجية إذا كنت تفضّل منح شخص آخر مهمة إدارة خادم مراقبة الأداء واختبار الأجهزة، أو إذا كنت تريد إمكانات إرسال الإشعارات (مثل دمج البريد الإلكتروني أو Slack) بدون الحاجة إلى إنشاء هذه الميزات بنفسك.

استخدام ميزة "التكامل المستمر" في Lighthouse على الجهاز

يوضّح هذا القسم كيفية تشغيل وتركيب Lighthouse CI CLI محليًا و كيفية ضبط lighthouserc.js. إنّ تشغيل أداة Lighthouse CI CLI على الجهاز هو أسهل طريقة للتأكّد من ضبط lighthouserc.js بشكلٍ صحيح.

  1. ثبِّت واجهة سطر أوامر Lighthouse CI.

    npm install -g @lhci/cli

    يتم ضبط Lighthouse CI عن طريق وضع ملف lighthouserc.js في جذر مستودع مشروعك. هذا الملف إلزامي وسيحتوي على معلومات الإعداد ذات الصلة بـ Lighthouse CI. على الرغم من أنّه يمكن ضبط Lighthouse CI ليعمل بدون مستودع GitHub،تفترض التعليمات الواردة في هذه المقالة أنّه تم ضبط مستودع مشروعك ليعمل باستخدام GitHub.

  2. في جذر المستودع، أنشئ lighthouserc.js ملف ملفّات الإعداد.

    touch lighthouserc.js

  3. أضِف الرمز التالي إلى lighthouserc.js. هذا الرمز هو ملف إعدادات فارغ لتكامل الإصدار في Lighthouse. ستضيف المزيد إلى هذه الإعدادات في الخطوات اللاحقة.

    module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

  4. في كل مرة يتم فيها تشغيل Lighthouse CI، يتم تشغيل خادم لعرض موقعك الإلكتروني. يُعدّ هذا الخادم هو ما يمكّن Lighthouse من تحميل موقعك الإلكتروني حتى في حال عدم تشغيل خوادم أخرى. عند انتهاء تشغيل Lighthouse CI، سيتم إيقاف الخادم تلقائيًا. لضمان عمل العرض بشكل صحيح، يجب ضبط السمتَين staticDistDir أو startServerCommand.

    إذا كان موقعك الإلكتروني ثابتًا، أضِف الموقع staticDistDir إلى العنصر ci.collect للإشارة إلى مكان الملفات الثابتة. ستستخدم أداة Lighthouse CI الخادم الخاص بها لعرض هذه الملفات أثناء اختبار موقعك الإلكتروني. إذا كان موقعك الإلكتروني غير ثابت، أضِف السمة startServerCommand إلى العنصر ci.collect للإشارة إلى الأمر الذي يبدأ تشغيل الخادم. ستبدأ أداة Lighthouse CI عملية خادم جديدة أثناء الاختبار وستوقِفها بعد ذلك.

    // Static site example
collect: {
  staticDistDir: './public',
}

    // Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}

  5. أضِف السمة url إلى العنصر ci.collect للإشارة إلى عناوين URL التي يجب أن تُجري أداة Lighthouse CI عمليات فحص عليها. يجب أن يتم تقديم قيمة السمة url كصفيف من عناوين URL، ويمكن أن يحتوي هذا الصفيف على عنوان URL واحد أو أكثر. بشكلٍ default، سيشغّل Lighthouse CI أداة Lighthouse ثلاث مرات لكل عنوان URL.

    collect: {
  // ...
  url: ['http://localhost:8080']
}

  6. أضِف السمة target إلى العنصر ci.upload واضبط القيمة على 'temporary-public-storage'. سيتم تحميل تقارير Lighthouse التي جمعتها أداة IDE في Lighthouse إلى مساحة تخزين عامة مؤقتة. وسيظل التقرير معروضًا لمدة سبعة أيام ثم يتم حذفه تلقائيًا. يستخدم دليل الإعداد هذا خيار التحميل "مساحة التخزين المؤقتة العلنية" لأنّه سريع في الإعداد. للحصول على معلومات عن طرق أخرى لتخزين تقارير Lighthouse، يُرجى الرجوع إلى المستندات.

    upload: {
  target: 'temporary-public-storage',
}

    سيظهر مكان تخزين التقرير على النحو التالي:

    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

    (لن يعمل عنوان URL هذا لأنّه سبق حذف التقرير).

  7. شغِّل واجهة سطر أوامر Lighthouse CI من وحدة التحكّم الطرفية باستخدام الأمر autorun. سيؤدي ذلك إلى تشغيل Lighthouse ثلاث مرات وتحميل متوسط تقرير Lighthouse.

    lhci autorun

    إذا كنت قد أعددت Lighthouse CI بشكل صحيح، من المفترض أن يؤدي تنفيذ هذا الأمر إلى توليد نتيجة مشابهة لما يلي:

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    يمكنك تجاهل رسالة GitHub token not set في إخراج وحدة التحكّم. لا يكون رمز مفتاح GitHub ضروريًا إلا إذا كنت تريد استخدام Lighthouse CI مع GitHub Action. يتم توضيح كيفية إعداد إجراء على GitHub لاحقًا في هذه المقالة.

    سينقلك النقر على الرابط في الإخراج الذي يبدأ بعلامة https://storage.googleapis.com... إلى تقرير Lighthouse المرتبط بالمتوسط لعمليات تنفيذ Lighthouse.

    يمكن إلغاء الإعدادات التلقائية المستخدَمة في autorun من خلال سطر الأوامر أو lighthouserc.js. على سبيل المثال، يشير إعداد lighthouserc.js أدناه إلى أنّه يجب جمع بيانات خمس عمليات تشغيل من Lighthouse في كل مرة يتم فيها تنفيذ autorun.

  8. عدِّل lighthouserc.js لاستخدام الموقع numberOfRuns:

    module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

  9. أعِد تشغيل الأمر autorun:

    lhci autorun

    من المفترض أن يُظهر الناتج في المحطة الطرفية أنّه تم تشغيل Lighthouse خمس مرات بدلاً من المرات الثلاث التلقائية:

    ✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

    للتعرّف على خيارات الضبط الأخرى، يُرجى الرجوع إلى مستندات إعدادات "مخطّط عمل التحسين من Lighthouse".

إعداد عملية التطوير المتكامل (CI) لتشغيل عملية التطوير المتكامل في Lighthouse

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

يُعدّ استخدام Lighthouse CI لجمع قياسات الأداء نقطة بداية جيدة لبدء مراقبة الأداء. ومع ذلك، قد يريد المستخدمون المتقدّمون اتّخاذ خطوة إضافية باستخدام Lighthouse CI لإيقاف عمليات الإنشاء إذا لم تستوفِ معايير محدّدة مسبقًا، مثل اجتياز عمليات تدقيق معيّنة في Lighthouse أو استيفاء جميع ميزانيات الأداء. يتم ضبط هذا السلوك من خلال سمة assert ملف lighthouserc.js.

توفّر أداة Lighthouse CI ثلاثة مستويات من الأحكام:

  • off: تجاهل الأحكام
  • warn: طباعة حالات الفشل في stderr
  • error: طباعة حالات الفشل في stderr والخروج من عملية دمج الإصدارات في Lighthouse باستخدام رمز خروج غير صفري

في ما يلي مثال على إعداد lighthouserc.js يتضمّن بيانات تأكيدية. ويحدّد هذا الإجراء التأكيدات لنتائج فئات الأداء و تسهيل الاستخدام في Lighthouse. لتجربة ذلك، أضِف التعريفات أدناه إلىملف lighthouserc.js، ثم أعِد تشغيل Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

تظهر مخرجات وحدة التحكّم التي يتم إنشاؤها على النحو التالي:

لقطة شاشة لرسالة تحذيرية تم إنشاؤها بواسطة Lighthouse CI

لمزيد من المعلومات عن تأكيدات Lighthouse CI، يُرجى الرجوع إلى المستندات.

إعداد إجراء على GitHub لتشغيل ميزة "التكامل المستمر" في Lighthouse

يمكن استخدام GitHub Action لتشغيل IDE IDE. سيؤدي ذلك إلى إنشاء تقرير Lighthouse جديد في كل مرة يتم فيها دفع تغيير في الرمز البرمجي إلى أي فرع من مستودع GitHub. استخدِم ذلك مع التحقّق من الحالة لعرض هذه النتائج في كل طلب سحب.

لقطة شاشة لفحص حالة GitHub

  1. في الدليل الجذر للمستودع، أنشئ دليلاً باسم .github/workflows. سيتم وضع عمليات سير العمل لمشروعك في هذا الدليل. سير العمل هو عملية تتم تنفيذها في وقت محدّد مسبقًا (على سبيل المثال، عند دفع الرمز البرمجي) وتتألف من إجراء واحد أو أكثر.

    mkdir .github
mkdir .github/workflows

  2. في .github/workflows، أنشئ ملفًا باسم lighthouse-ci.yaml. سيحتوي هذا الملف على الإعدادات الخاصة بسير عمل جديد.

    touch lighthouse-ci.yaml

  3. أضِف النص التالي إلى lighthouse-ci.yaml.

    name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

    تُعدّ هذه الإعدادات سير عمل يتألف من مهمة واحدة سيتم تنفيذها عند دفع رمز جديد إلى المستودع. تتضمّن هذه المهمة أربع خطوات:

    • اطّلِع على المستودع الذي سيتم تشغيل Lighthouse CI عليه.
    • تثبيت Node وضبطه
    • تثبيت حِزم npm المطلوبة
    • شغِّل Lighthouse CI وحمِّل النتائج إلى مساحة التخزين العامة المؤقتة.

  4. احفظ هذه التغييرات وادفعها إلى GitHub. إذا اتّبعت الخطوات أعلاه بشكل صحيح، سيؤدي دفع الرمز إلى GitHub إلى بدء تشغيل سير العمل الذي أضفته للتو.

  5. للتأكّد من أنّه تم تفعيل Lighthouse CI وعرض التقرير الذي أنشأه، انتقِل إلى علامة التبويب الإجراءات في مشروعك. من المفترض أن يظهر لك سير العمل إنشاء المشروع وتشغيل Lighthouse CI مُدرَجًا ضمن أحدث عملية إرسال.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

    يمكنك الانتقال إلى تقرير Lighthouse المرتبط بالتزام معيّن من علامة التبويب الإجراءات. انقر على عملية الربط، ثم انقر على خطوة سير العمل Lighthouse CI ، ثم وسِّع نتائج خطوة تشغيل Lighthouse CI.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

    لقد أعددت للتو إجراءً على GitHub لتشغيل Lighthouse CI. سيكون هذا الإجراء مفعّلاً بشكلٍٍمفيد عند استخدامه مع التحقّق من حالة GitHub.

إعداد عملية التحقّق من حالة GitHub

التحقّق من الحالة، في حال ضبطه، هو رسالة تظهر في كلّ إصدار علني و typically تضمّ معلومات مثل نتائج اختبار أو نجاح عملية compiling.

لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

توضّح الخطوات التالية كيفية إعداد عملية التحقّق من الحالة لميزة "التكامل المستمر" في Lighthouse.

  1. انتقِل إلى صفحة تطبيق Lighthouse CI على GitHub وانقر على ضبط.

  2. (اختياري) إذا كنت جزءًا من عدة مؤسسات على GitHub، اختَر المؤسسة التي تملك المستودع الذي تريد استخدام Lighthouse CI معه.

  3. اختَر جميع المستودعات إذا كنت تريد تفعيل Lighthouse CI في كل المستودعات أو اختَر اختيار مستودعات محدّدة فقط إذا كنت تريد استخدام هذه الميزة في مستودعات معيّنة فقط، ثم اختَر المستودعات. بعد ذلك، انقر على التثبيت والتفويض.

  4. انسخ الرمز المميّز الذي يظهر. ستحتاج إليه في الخطوة التالية.

  5. لإضافة الرمز المميّز، انتقِل إلى صفحة الإعدادات في مستودع GitHub، ثم انقر على السياسات، ثم انقر على إضافة سياسة جديدة.

    لقطة شاشة لعلامة التبويب "الإعدادات" في GitHub

  6. اضبط حقل الاسم على LHCI_GITHUB_APP_TOKEN واضبط حقل القيمة على الرمز المميّز الذي نسخته في الخطوة الأخيرة، ثم انقر على الزر إضافة سر.

  7. انتقِل إلى ملف lighthouse-ci.yaml وأضِف مفتاح سر البيئة الجديد إلى الأمر "run Lighthouse CI".

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $
  1. أصبح التحقّق من الحالة جاهزًا للاستخدام. لاختبارها، يمكنك إنشاء طلب دمج جديد أو دفع عملية إرسال إلى طلب دمج حالي.

إعداد خادم Lighthouse CI

يقدّم خادم Lighthouse CI لوحة بيانات لاستكشاف تقارير Lighthouse السابقة. ويمكن أن يعمل أيضًا بمثابة قاعدة بيانات خاصة وطويلة المدى لملفّات تقارير Lighthouse.

لقطة شاشة لواجهة لوحة بيانات خادم Lighthouse CI
لقطة شاشة لمقارنة تقريرَين من Lighthouse في خادم Lighthouse CI
  1. اختَر عمليات الربط التي تريد مقارنتها.
  2. مقدار تغيُّر نتيجة Lighthouse بين الإصدارَين
  3. لا يعرض هذا القسم سوى المقاييس التي تغيّرت بين الإصدارَين.
  4. يتم تمييز نموذجَي الانحدار باللون الوردي.
  5. يتم تمييز التحسينات باللون الأزرق.

يناسب Lighthouse CI Server المستخدمين الذين يشعرون بالارتياح عند نشر البنية الأساسية الخاصة بهم وإدارتها.

للحصول على معلومات عن إعداد خادم Lighthouse CI، بما في ذلك وصفات استخدام Heroku وDocker للنشر، يُرجى الرجوع إلى هذه التعليمات.

التعرف على المزيد