پایش عملکرد با Lighthouse CI

نحوه افزودن Lighthouse به سیستم ادغام پیوسته، مانند GitHub Actions.

Katie Hempenius

Lighthouse CI مجموعه‌ای از ابزارها برای استفاده از Lighthouse درطول ادغام مداوم است. Lighthouse CI را می‌توان به روش‌های مختلفی در گردش کار توسعه‌دهنده گنجاند. این راهنما شامل موضوعات زیر است:

• استفاده از Lighthouse CI CLI.
• پیکربندی ارائه‌دهنده CI برای اجرای Lighthouse CI.
• درحال راه‌اندازی GitHub Action و بررسی وضعیت برای Lighthouse CI. این کار به‌طور خودکار نتایج Lighthouse را در درخواست‌های pull در GitHub نمایش می‌دهد.
• ساختن داشبورد عملکرد و ذخیره‌سازی داده برای گزارش‌های Lighthouse.

نمای کلی

Lighthouse CI مجموعه‌ای از ابزارهای رایگان است که استفاده از Lighthouse را برای پایش عملکرد تسهیل می‌کند. یک گزارش Lighthouse، نمایی کلی از عملکرد صفحه وب در زمان اجرا ارائه می‌دهد؛ Lighthouse CI نشان می‌دهد که این یافته‌ها چگونه درطول زمان تغییر کرده‌اند. از این ابزار می‌توان برای شناسایی تأثیر تغییرات خاص در کد یا اطمینان از رعایت آستانه‌های عملکرد درطول فرایندهای ادغام مداوم استفاده کرد. اگرچه نظارت بر عملکرد رایج‌ترین مورد استفاده برای Lighthouse CI است، اما می‌توان از آن برای نظارت بر سایر جنبه‌های گزارش Lighthouse استفاده کرد - برای مثال، SEO یا دسترس‌پذیری.

کارکرد اصلی 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 به‌عنوان بخشی از یکپارچه‌سازی مداوم
• استفاده از Lighthouse CI GitHub Action که روی هر درخواست کشش اجرا می‌شود و نظر می‌دهد
• ردیابی عملکرد درطول زمان ازطریق داشبورد ارائه‌شده توسط Lighthouse Server.

همه این رویکردها براساس 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 استفاده شود، دستورالعمل‌های این مقاله فرض می‌کنند که مخزن پروژه شما برای استفاده از 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 اضافه کنید تا نشانی(های) وبی را که Lighthouse CI باید Lighthouse را در آن اجرا کند نشان دهید. مقدار ویژگی url باید به‌صورت آرایه‌ای از نشانی‌های وب ارائه شود؛ این آرایه می‌تواند شامل یک یا چند نشانی وب باشد. به‌طور پیش‌فرض، Lighthouse CI سه بار Lighthouse را برای هر نشانی وب اجرا می‌کند.

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

   توجه: این نشانی‌های وب باید توسط سروری که در مرحله قبل پیکربندی کردید قابل‌ارائه باشند. بنابراین، اگر Lighthouse CI را به‌صورت محلی اجرا می‌کنید، این نشانی‌های وب احتمالاً باید شامل localhost باشند تا میزبان تولید شما.

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
   

   (این نشانی وب کار نخواهد کرد زیرا گزارش قبلاً حذف شده است.)

7. Lighthouse CI CLI را از پایانه بااستفاده از فرمان 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 Action در ادامه این مقاله توضیح داده شده است.

   با کلیک کردن روی پیوند موجود در خروجی که با https://storage.googleapis.com... شروع می‌شود، به گزارش Lighthouse مربوط به اجرای میانه Lighthouse هدایت می‌شوید.

   پیش‌فرض‌های مورداستفاده autorun را می‌توان ازطریق خط فرمان یا lighthouserc.js لغو کرد. برای مثال، پیکربندی lighthouserc.js زیر نشان می‌دهد که هر بار که autorun اجرا می‌شود، باید پنج اجرای Lighthouse جمع‌آوری شود.

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 را در فایل‌های پیکربندی ابزارهای رایج CI نشان می‌دهد. به‌طور خاص، این نمونه کدها نشان می‌دهند که چگونه Lighthouse CI را برای جمع‌آوری اندازه‌گیری‌های عملکرد درطول فرایند CI اجرا کنید.

استفاده از Lighthouse CI برای جمع‌آوری اندازه‌گیری‌های عملکرد، نقطه شروع خوبی برای نظارت بر عملکرد است. بااین‌حال، کاربران پیشرفته ممکن است بخواهند یک گام فراتر بروند و از Lighthouse CI برای رد کردن ساخت‌ها درصورت عدم برآورده کردن معیارهای ازپیش تعریف‌شده، مانند گذراندن ممیزی‌های خاص Lighthouse یا برآورده کردن تمام بودجه‌های عملکرد، استفاده کنند. این رفتار ازطریق ویژگی assert فایل lighthouserc.js پیکربندی می‌شود.

Lighthouse CI از سه سطح ادعا پشتیبانی می‌کند:

• off: نادیده گرفتن ادعاها
• ‫warn: چاپ موارد ناموفق در خطای استاندارد
• 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، به اسناد مراجعه کنید.

راه‌اندازی GitHub Action برای اجرای Lighthouse CI

توجه: این بخش فرض می‌کند که با git،‏ GitHub، و GitHub Pull Requests آشنا هستید.

از GitHub Action می‌توان برای اجرای Lighthouse CI استفاده کرد. با این کار، هربار که تغییر کد به هر شاخه‌ای از مخزن GitHub ارسال می‌شود، گزارش Lighthouse جدیدی تولید می‌شود. از این مورد همراه با بررسی وضعیت استفاده کنید تا این نتایج در هر درخواست واکشی نمایش داده شود.

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 راه‌اندازی شده است و برای مشاهده گزارشی که تولید کرده است، به برگه Actions پروژه خود بروید. باید گردش کار Build project and Run Lighthouse CI را در فهرست زیر جدیدترین commit خود ببینید.

   

   می‌توانید از برگه کنش‌ها به گزارش Lighthouse مربوط به یک ثبت خاص بروید. روی commit کلیک کنید، روی مرحله گردش کار Lighthouse CI کلیک کنید، سپس نتایج مرحله اجرای Lighthouse CI را ازهم باز کنید.

   

   شما به‌تازگی یک GitHub Action برای اجرای Lighthouse CI راه‌اندازی کرده‌اید. این ویژگی زمانی بیشترین کاربرد را دارد که همراه با بررسی وضعیت GitHub استفاده شود.

راه‌اندازی بررسی وضعیت GitHub

بررسی وضعیت، درصورت پیکربندی، پیامی است که در هر درخواست ارسال ظاهر می‌شود و معمولاً شامل اطلاعاتی مانند نتایج آزمایش یا موفقیت‌آمیز بودن ساخت است.

مراحل زیر نحوه راه‌اندازی بررسی وضعیت برای Lighthouse CI را توضیح می‌دهد.

1. به صفحه برنامه Lighthouse CI GitHub بروید و روی پیکربندی کلیک کنید.

2. (اختیاری) اگر در GitHub عضو چند سازمان هستید، سازمانی را انتخاب کنید که مالک مخزنی است که می‌خواهید برای آن از Lighthouse CI استفاده کنید.

3. اگر می‌خواهید Lighthouse CI را در همه مخزن‌ها فعال کنید، همه مخزن‌ها را انتخاب کنید یا اگر می‌خواهید فقط در مخزن‌های خاصی از آن استفاده کنید، فقط مخزن‌های انتخابی را انتخاب کنید و سپس مخزن‌ها را انتخاب کنید. سپس روی نصب و صدور مجوز کلیک کنید.

4. کدی را که نمایش داده می‌شود کپی کنید. در مرحله بعد از آن استفاده خواهید کرد.

5. برای افزودن کد، به صفحه تنظیمات مخزن GitHub خود بروید، روی رمزها کلیک کنید، سپس روی افزودن رمز جدید کلیک کنید.

   

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. بررسی وضعیت آماده استفاده است. برای آزمایش آن، درخواست واکشی جدیدی ایجاد کنید یا یک commit را به درخواست واکشی موجود ارسال کنید.

راه‌اندازی سرور Lighthouse CI

سرور Lighthouse CI داشبوردی برای کاوش گزارش‌های تاریخی Lighthouse ارائه می‌دهد. همچنین می‌تواند به‌عنوان یک پایگاه داده خصوصی و بلندمدت برای گزارش‌های Lighthouse عمل کند.

1. انتخاب کنید کدام ثبت‌ها مقایسه شوند.
2. مقداری که امتیاز Lighthouse بین دو ثبت تغییر کرده است.
3. این بخش فقط سنجه‌هایی را نشان می‌دهد که بین دو ثبت تغییر کرده‌اند.
4. پس‌رفت‌ها با رنگ صورتی برجسته شده‌اند.
5. بهبودها با رنگ آبی برجسته شده‌اند.

Lighthouse CI Server برای کاربرانی مناسب است که با استقرار و مدیریت زیرساخت خودشان راحت هستند.

برای کسب اطلاعات درباره راه‌اندازی سرور Lighthouse CI، ازجمله دستورالعمل‌های استفاده از Heroku و Docker برای استقرار، به این دستورالعمل‌ها مراجعه کنید.

دریافت اطلاعات بیشتر

• مخزن Lighthouse CI GitHub