كيفية إضافة أداة Lighthouse إلى نظام تكامل مستمر، مثل مهام GitHub
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
بشكل صحيح.
ثبِّت Lighthouse CI CLI.
npm install -g @lhci/cli
يتم ضبط ميزة Lighthouse CI من خلال وضع ملف
lighthouserc.js
في جذر مستودع مشروعك. هذا الملف إلزامي وسيحتوي على واجهة Lighthouse CI معلومات التهيئة ذات الصلة. على الرغم من أنّه يمكن ضبط ميزة Lighthouse CI يمكن استخدامها بدون git repo، تفترض التعليمات الواردة في هذه المقالة أن مستودع مشروعك قد تم ضبطه نستخدم git.إنشاء
lighthouserc.js
إعداد في جذر المستودع .touch lighthouserc.js
أضِف الرمز التالي إلى
lighthouserc.js
. هذا الرمز فارغ إعدادات Lighthouse CI ستتم الإضافة إلى هذه الإعدادات في الخطوات اللاحقة.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
في كل مرة يتم فيها تشغيل 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', }
إضافة
url
السمة إلى العنصرci.collect
للإشارة إلى عناوين URL التي تستخدم Lighthouse CI يجب تشغيل Lighthouse وفقًا له. يجب أن تكون قيمة السمةurl
هي مقدمة كمصفوفة من عناوين URL؛ يمكن أن تحتوي هذه الصفيفة على عنوان URL واحد أو أكثر. من سيشغِّل Lighthouse CI تلقائيًا ثلاث مرات مقابل كل عنوان URL.collect: { // ... url: ['http://localhost:8080'] }
إضافة
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 هذا لأنّه سبق أن تم حذف التقرير.)
شغِّل واجهة سطر الأوامر 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
وتنفيذه.يجب تعديل
lighthouserc.js
لاستخدام السمةnumberOfRuns
:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
إعادة تشغيل الأمر
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
: تعذّرت طباعة إلى stderrerror
: تعذّرت الطباعة إلى جهاز 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](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-a-warning-mes-f1c97df5d1d.png?authuser=6&hl=ar)
لمزيد من المعلومات عن تأكيدات Lighthouse CI، يُرجى الاطّلاع على المستندات.
إعداد GitHub Action لتشغيل Lighthouse CI
يمكن استخدام الإجراء في GitHub لتشغيل Lighthouse CI سيؤدي ذلك إلى إنشاء تقرير Lighthouse جديد في كل مرة يتم فيها تشغيل رمز يتم دفع التغيير إلى أي فرع من فروع مستودع جيت هب. استخدام هذا مع ذات الحالة التحقّق لعرض هذه النتائج على كل طلب سحب.
![لقطة شاشة للتحقّق من حالة GitHub](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-a-github-stat-667c532905358.png?authuser=6&hl=ar)
في جذر المستودع، أنشئ دليلاً باسم
.github/workflows
تشير رسالة الأشكال البيانية سير العمل لمشروعك في هذا الدليل. سير العمل هو عملية تعمل في وقت محدد مسبقًا (على سبيل المثال، عند الضغط على الرمز) تتكون من إجراء واحد أو أكثر.mkdir .github mkdir .github/workflows
في
.github/workflows
، أنشِئ ملفًا باسم "lighthouse-ci.yaml
". هذا الملف سيحتفظ بالإعدادات لسير عمل جديد.touch lighthouse-ci.yaml
أضِف النص التالي إلى
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 وحمِّل النتائج إلى مساحة تخزين عامة مؤقتة.
تنفيذ هذه التغييرات وإرسالها إلى GitHub. إذا قمت باتباع الخطوات أعلاه، سيؤدي إرسال الرمز إلى GitHub إلى تشغيل سير العمل الذي أضفته للتو.
للتأكّد من أنّ ميزة Lighthouse CI قد تم تشغيلها والاطّلاع على التقرير، يمكنك الانتقال إلى علامة التبويب الإجراءات في مشروعك. من المفترض أن تظهر لك يمكنك إنشاء المشروع وتنفيذ Lighthouse CI المُدرج ضمن الالتزام الأخير.
يمكنك الانتقال إلى تقرير Lighthouse الخاص بالتزام معيّن من علامة التبويب الإجراءات. انقر على "الإتمام"، وانقر على Lighthouse CI. في سير العمل، ثم وسِّع نتائج خطوة تشغيل Lighthouse CI.
لقد أعددت الإجراء في GitHub لتشغيل Lighthouse CI. سيكون هذا هو الأكثر مفيدة عند استخدامها مع حالة GitHub التحديد.
إعداد عملية التحقّق من حالة GitHub
فحص الحالة، إذا تم تكوينه، هو رسالة تظهر في كل العلاقات العامة وعادةً ما تتضمن معلومات مثل نتائج الاختبار أو نجاح
![لقطة شاشة لإعدادات GitHub مفتاح التبويب (Tab)](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-the-github-s-67f929ea66a01.png?authuser=6&hl=ar)
توضّح الخطوات أدناه كيفية إعداد عملية التحقّق من حالة Lighthouse CI.
انتقِل إلى تطبيق Lighthouse CI GitHub وانقر على ضبط.
(اختياري) إذا كنت جزءًا من مؤسسات متعددة على GitHub، اختر مؤسسة تمتلك المستودع الذي تريد استخدام Lighthouse له سي.
اختَر جميع المستودعات إذا كنت تريد تفعيل Lighthouse CI في جميع أو يمكنك اختيار المستودعات المحدّدة فقط إذا كنت تريد استخدامها فقط في مستودعات معينة، ثم تحديد المستودعات. انقر بعد ذلك على تثبيت تفويض
انسخ الرمز المميّز المعروض. ستستخدمها في الخطوة التالية.
لإضافة الرمز المميّز، انتقِل إلى صفحة الإعدادات في GitHub. مستودع، انقر على الأسرار، ثم على إضافة مفتاح سرّي جديد.
اضبط حقل الاسم على
LHCI_GITHUB_APP_TOKEN
واضبط القيمة. إلى الرمز المميز الذي نسخته في الخطوة الأخيرة، ثم انقر على الزر إضافة المفتاح السرّي.انتقِل إلى ملف
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: $
- فحص الحالة جاهز للاستخدام. لاختباره، يمكنك إنشاء سحب جديد طلب أو دفع الالتزام إلى طلب سحب موجود.
عملية إعداد Lighthouse CI Server
يوفّر خادم Lighthouse CI لوحة بيانات لاستكشاف إعداد التقارير باستخدام أداة Lighthouse ويمكن أن يكون أيضًا بمثابة مخزن بيانات خاص طويل المدى تقارير Lighthouse
![لقطة شاشة للوحة بيانات Lighthouse CI Server](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-the-lighthous-bf52f6dd2ad0e.png?authuser=6&hl=ar)
![لقطة شاشة لمقارنة تقريرَي Lighthouse في Lighthouse CI Server](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-comparing-li-a86afa61fb603.png?authuser=6&hl=ar)
- اختَر الالتزامات المطلوب مقارنتها.
- المقدار الذي تغيّرت فيه نتيجة Lighthouse بين الالتزامَين.
- لا يعرض هذا القسم سوى المقاييس التي تم تغييرها بين عمليتي الالتزام.
- يتم تمييز الانحدار باللون الوردي.
- تظهر التحسينات باللون الأزرق.
إنّ Lighthouse CI Server هو الأنسب للمستخدمين الذين يشعرون بالراحة في نشر التطبيقات على إدارة بنيتهم التحتية الخاصة.
للحصول على معلومات حول إعداد خادم Lighthouse CI، بما في ذلك وصفات باستخدام Heroku و Docker للنشر، ارجع إلى التعليمات.