این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

نظارت بر عملکرد با Lighthouse CI

چگونه می توان Lighthouse را به یک سیستم یکپارچه سازی پیوسته مانند GitHub Actions اضافه کرد.

Katie Hempenius

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

با استفاده از Lighthouse CI CLI.
پیکربندی ارائه دهنده CI برای اجرای Lighthouse CI.
راه اندازی GitHub Action و بررسی وضعیت برای Lighthouse CI. این به طور خودکار نتایج Lighthouse را در درخواست های 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 که اجرا می شود و در مورد هر درخواست کششی نظر می دهد
ردیابی عملکرد در طول زمان از طریق داشبورد ارائه شده توسط سرور 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 سه بار Lighthouse را در برابر هر URL اجرا می کند.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
توجه: این URL ها باید توسط سروری که در مرحله قبل پیکربندی کرده اید قابل استفاده باشند. بنابراین، اگر Lighthouse CI را به صورت محلی اجرا می کنید، این URL ها احتمالاً باید شامل localhost شما باشد تا میزبان تولید شما.
ویژگی 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 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 در ادامه این مقاله توضیح داده شده است.
با کلیک بر روی پیوند در خروجی که با https://storage.googleapis.com... شروع می شود، به گزارش Lighthouse مربوط به میانگین اجرای Lighthouse هدایت می شوید.
پیش فرض های استفاده شده توسط autorun را می توان از طریق خط فرمان یا lighthouserc.js لغو کرد. به عنوان مثال، پیکربندی lighthouserc.js در زیر نشان می‌دهد که هر بار اجرای autorun باید پنج اجرای Lighthouse جمع‌آوری شود.

برای استفاده از ویژگی numberOfRuns lighthouserc.js به روز کنید:

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 Provider در مستندات 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، به مستندات مراجعه کنید.

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

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

در ریشه مخزن خود، دایرکتوری به نام .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 در آن اجرا خواهد شد را بررسی کنید
- Node را نصب و پیکربندی کنید
- بسته های npm مورد نیاز را نصب کنید
- Lighthouse CI را اجرا کنید و نتایج را در ذخیره سازی عمومی موقت آپلود کنید.
این تغییرات را انجام دهید و آنها را به GitHub فشار دهید. اگر مراحل بالا را به درستی دنبال کرده باشید، با فشار دادن کد به GitHub، جریان کاری که به تازگی اضافه کرده اید، اجرا می شود.
برای تأیید اینکه Lighthouse CI راه اندازی شده است و برای مشاهده گزارشی که ایجاد کرده است، به تب Actions پروژه خود بروید. شما باید گردش کار پروژه Build و Run Lighthouse CI را در زیر آخرین commit خود مشاهده کنید.
می توانید از تب Actions به گزارش Lighthouse مربوط به یک commit خاص بروید. روی commit کلیک کنید، روی مرحله گردش کار Lighthouse CI کلیک کنید، سپس نتایج مرحله اجرای Lighthouse CI را گسترش دهید.
شما به تازگی یک GitHub Action را برای اجرای Lighthouse CI راه اندازی کرده اید. این زمانی که در ارتباط با بررسی وضعیت GitHub استفاده شود بسیار مفید خواهد بود.

بررسی وضعیت GitHub را تنظیم کنید

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

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

به صفحه برنامه Lighthouse CI GitHub بروید و روی Configure کلیک کنید.
(اختیاری) اگر بخشی از چندین سازمان در GitHub هستید، سازمانی را انتخاب کنید که دارای مخزن است و می خواهید از Lighthouse CI برای آن استفاده کنید.
اگر می‌خواهید Lighthouse CI را در همه مخازن فعال کنید، All Repositories را انتخاب کنید یا اگر فقط می‌خواهید از آن در مخازن خاصی استفاده کنید، فقط انتخاب مخازن را انتخاب کنید و سپس مخازن را انتخاب کنید. سپس روی Install & Authorize کلیک کنید.
توکن نمایش داده شده را کپی کنید. در مرحله بعد از آن استفاده خواهید کرد.
برای افزودن توکن، به صفحه تنظیمات مخزن GitHub خود بروید، روی Secrets کلیک کنید، سپس روی Add a new secret کلیک کنید.
فیلد Name را روی LHCI_GITHUB_APP_TOKEN قرار دهید و فیلد Value را روی توکنی که در مرحله آخر کپی کردید تنظیم کنید و سپس روی دکمه Add Secret کلیک کنید.
به فایل 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: $

بررسی وضعیت آماده استفاده است. برای آزمایش آن، یک درخواست کشش جدید ایجاد کنید یا یک commit را به یک درخواست کشش موجود فشار دهید.

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

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

اسکرین شات مقایسه دو گزارش Lighthouse در سرور Lighthouse CI

انتخاب کنید که کدام تعهد را مقایسه کنید.
مقداری که امتیاز Lighthouse بین دو کامیت تغییر کرده است.
این بخش فقط معیارهایی را نشان می دهد که بین دو commit تغییر کرده است.
رگرسیون ها با رنگ صورتی برجسته شده اند.
بهبودها با رنگ آبی مشخص شده اند.

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

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

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

مخزن فانوس CI GitHub