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

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

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

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

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

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

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

  1. ثبِّت Lighthouse CI CLI.

    npm install -g @lhci/cli

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

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

    touch lighthouserc.js

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

    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.

إعداد عملية CI لتشغيل أداة Lighthouse CI

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

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

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

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