رصد الأداء باستخدام 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 لمراقبة الأداء. يقدّم تقرير Lighthouse الواحد نبذة عن أداء صفحة الويب في وقت تشغيلها، بينما يوضّح تقرير Lighthouse CI كيف تغيّرت هذه النتائج بمرور الوقت. ويمكن استخدام ذلك لتحديد تأثير تغييرات معيّنة في الرموز البرمجية أو التأكّد من استيفاء حدود الأداء أثناء عمليات الدمج المستمر. على الرغم من أنّ مراقبة الأداء هي حالة الاستخدام الأكثر شيوعًا لعملية التكامل المستمر في Lighthouse، يمكن استخدامها لمراقبة جوانب أخرى من تقرير Lighthouse، مثل تحسين محركات البحث أو تسهيل الاستخدام.

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

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

  • تشغيل عملية دمج Lighthouse المستمر كجزء من عملية الدمج المستمر
  • وباستخدام Lighthouse CI GitHub Action الذي يتم تشغيله والتعليق على كل طلب سحب
  • تتبُّع الأداء بمرور الوقت من خلال لوحة البيانات التي يوفّرها 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 فيها تشغيل Lighthouse. يجب أن يتم تقديم قيمة السمة 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.

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

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

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

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

توفّر Lighthouse CI ثلاثة مستويات من الادّعاءات:

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

في ما يلي مثال على إعداد 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 لتشغيل Lighthouse CI. سيؤدي ذلك إلى إنشاء تقرير 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 تضمّ معلومات مثل نتائج اختبار أو نجاح عملية ملف برمجي.

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

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

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

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