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

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

Katie Hempenius
Katie Hempenius
X

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

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

نظرة عامة

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

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

وعلى الرغم من أن الوظيفة الأساسية لـ Lighthouse CI يتم تضمينها بشكل أساسي في يتم استخدام Lighthouse CI CLI عادةً من خلال أحد النُهُج التالية:

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

تستند كل هذه المناهج إلى Lighthouse CI CLI.

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

استخدام Lighthouse CI على الجهاز

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

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

  6. إضافة target إلى الكائن ci.upload واضبط القيمة على 'temporary-public-storage' إنّ تقارير Lighthouse التي يتم جمعها من قِبل سيتم تحميل Lighthouse CI إلى مساحة التخزين العامة المؤقتة. سيشمل التقرير أن يظل هناك لمدة سبعة أيام ثم يتم حذفه تلقائيًا. هذا الإعداد "مساحة التخزين العامة المؤقتة" خيار التحميل لأنه سريع الإعداد. للحصول على معلومات عن الطرق الأخرى لتخزين تقارير 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 ثلاث مرات وتحميل المتوسط لها إبلاغ.

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

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

لقطة شاشة للتحقّق من حالة 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 عليه
    • تثبيت عقدة وإعدادها
    • تثبيت حزم npm المطلوبة
    • شغِّل Lighthouse CI وحمِّل النتائج إلى مساحة تخزين عامة مؤقتة.

  4. تنفيذ هذه التغييرات وإرسالها إلى GitHub. إذا قمت باتباع الخطوات أعلاه، سيؤدي إرسال الرمز إلى GitHub إلى تشغيل سير العمل الذي أضفته للتو.

  5. للتأكّد من أنّ ميزة Lighthouse CI قد تم تشغيلها والاطّلاع على التقرير، يمكنك الانتقال إلى علامة التبويب الإجراءات في مشروعك. من المفترض أن تظهر لك يمكنك إنشاء المشروع وتنفيذ Lighthouse CI المُدرج ضمن الالتزام الأخير.

    لقطة شاشة لإعدادات GitHub مفتاح التبويب (Tab)

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

    لقطة شاشة لإعدادات GitHub مفتاح التبويب (Tab)

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

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

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

لقطة شاشة لإعدادات GitHub مفتاح التبويب (Tab)

توضّح الخطوات أدناه كيفية إعداد عملية التحقّق من حالة Lighthouse CI.

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

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

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

  4. انسخ الرمز المميّز المعروض. ستستخدمها في الخطوة التالية.

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

    لقطة شاشة لإعدادات GitHub مفتاح التبويب (Tab)

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

  7. انتقِل إلى ملف lighthouse-ci.yaml وأضِف المفتاح السرّي الجديد للبيئة إلى "تشغيل 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 Server

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

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

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

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

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