लाइटहाउस को, लगातार चलने वाले इंटिग्रेशन सिस्टम में जोड़ने का तरीका, जैसे कि GitHub की कार्रवाइयां.
Lighthouse CI लगातार इंटिग्रेशन के दौरान, लाइटहाउस का इस्तेमाल करने के लिए टूल. लाइटहाउस सीआई जिन्हें कई अलग-अलग तरीकों से डेवलपर वर्कफ़्लो में शामिल किया गया है. इस गाइड में ये चीज़ें शामिल हैं ये विषय:
- लाइटहाउस सीआई सीएलआई का इस्तेमाल करके.
- लाइटहाउस सीआई को चलाने के लिए, सीआई जारी करने वाली कंपनी को कॉन्फ़िगर करें.
- GitHub Action सेट अप करना और स्थिति सही का निशान लगाएं लाइटहाउस CI. इससे लाइटहाउस के नतीजे अपने-आप दिखने लगेंगे GitHub पुल अनुरोध.
- लाइटहाउस रिपोर्ट के लिए, परफ़ॉर्मेंस डैशबोर्ड और डेटा स्टोर बनाना.
खास जानकारी
लाइटहाउस सीआई मुफ़्त टूल का एक सुइट है. इसकी मदद से, लाइटहाउस का इस्तेमाल परफ़ॉर्मेंस को मॉनिटर करने की सुविधा. एक लाइटहाउस रिपोर्ट में किसी वेब का स्नैपशॉट होता है पेज को रन करते समय उसकी परफ़ॉर्मेंस; लाइटहाउस सीआई इसकी जानकारी देता है खोज के नतीजे समय के साथ बदल गए हैं. इसका इस्तेमाल, यह जानने के लिए किया जा सकता है कि में बदलाव कर सकते हैं या यह पक्का कर सकते हैं कि परफ़ॉर्मेंस इंटिग्रेट करने की प्रोसेस को जारी रखें. हालांकि, परफ़ॉर्मेंस पर निगरानी रखने के लिए, अगर लाइटहाउस CI का सामान्य इस्तेमाल है, तो इसका इस्तेमाल लाइटहाउस रिपोर्ट - उदाहरण के लिए, एसईओ या सुलभता.
लाइटहाउस सीआई का मुख्य फ़ंक्शन, लाइटहाउस सीआई कमांड उपलब्ध कराता है
लाइन इंटरफ़ेस. (ध्यान दें: यह Lighthouse
सीएलआई.) कॉन्टेंट बनाने
लाइटहाउस सीआई सीएलआई ने
कमांड
लाइटहाउस CI का इस्तेमाल करने के लिए किया जा सकता है. उदाहरण के लिए, autorun
कमांड एक से ज़्यादा
लाइटहाउस काम करता है, मीडियन लाइटहाउस रिपोर्ट की पहचान करता है, और रिपोर्ट अपलोड करता है
स्टोरेज के लिए. अतिरिक्त फ़्लैग पास करके, इस व्यवहार को अपनी पसंद के मुताबिक बनाया जा सकता है
या Lighthouse CI की कॉन्फ़िगरेशन फ़ाइल lighthouserc.js
को पसंद के मुताबिक बनाएं.
हालांकि, लाइटहाउस सीआई के मुख्य फ़ंक्शन को मुख्य रूप से लाइटहाउस सीआई सीएलआई, लाइटहाउस सीआई का इस्तेमाल आम तौर पर इनमें से किसी एक ये तरीके अपनाएं:
- लगातार इंटिग्रेशन के तौर पर, लाइटहाउस सीआई को चलाया जा रहा है
- लाइटहाउस सीआई GitHub ऐक्शन का इस्तेमाल करें, जो हर पुल पर चलता है और उस पर टिप्पणी करता है अनुरोध
- लाइटहाउस से मिले डैशबोर्ड के ज़रिए, समय के साथ परफ़ॉर्मेंस ट्रैक करना सर्वर.
ये सभी तरीके, लाइटहाउस सीआई सीएलआई पर आधारित हैं.
लाइटहाउस सीआई के विकल्प में, तीसरे पक्ष की परफ़ॉर्मेंस को मॉनिटर करने की सुविधा भी शामिल है करना या काम करना शुरू करने के लिए, अपनी स्क्रिप्ट लिखना प्रोसेस. अगर आपको किसी तीसरे पक्ष की सेवा का इस्तेमाल करना है, तो आपके परफ़ॉर्मेंस मॉनिटरिंग सर्वर को कोई और मैनेज करता हो और डिवाइस की जाँच कर सकता है या अगर आपको सूचना पाने की क्षमताएं चाहिए (जैसे कि ईमेल या Slack इंटिग्रेशन के लिए तैयार हैं. इसके लिए, आपको इन सुविधाओं को बनाने की ज़रूरत नहीं है.
लाइटहाउस सीआई का इस्तेमाल स्थानीय तौर पर करें
इस सेक्शन में, लाइटहाउस सीआई सीएलआई को चलाने और इंस्टॉल करने का तरीका बताया गया है. साथ ही,
lighthouserc.js
को कॉन्फ़िगर करने का तरीका जानें. लाइटहाउस सीआई सीएलआई को स्थानीय तौर पर चलाना
यह पक्का करने का सबसे आसान तरीका है कि आपके lighthouserc.js
को सही तरीके से कॉन्फ़िगर किया गया है.
लाइटहाउस सीआई सीएलआई इंस्टॉल करें.
npm install -g @lhci/cli
लाइटहाउस सीआई को,
lighthouserc.js
फ़ाइल को यूआरएल के रूट में रखकर कॉन्फ़िगर किया गया है आपके प्रोजेक्ट का डेटा स्टोर नहीं कर सकता. यह फ़ाइल ज़रूरी है और इसमें लाइटहाउस सीआई शामिल होगा कॉन्फ़िगरेशन की जानकारी देखें. हालांकि, लाइटहाउस सीआई को कॉन्फ़िगर किया जा सकता है बिना गिट के इस्तेमाल किया जा सकता है रेपो, इस लेख में दिए गए निर्देशों में यह माना गया है कि आपके प्रोजेक्ट रेपो को git का इस्तेमाल करो.डेटा स्टोर करने की जगह के रूट में,
lighthouserc.js
कॉन्फ़िगरेशन बनाएं फ़ाइल में सेव किया जाएगा.touch lighthouserc.js
lighthouserc.js
में यह कोड जोड़ें. यह कोड खाली है लाइटहाउस सीआई का कॉन्फ़िगरेशन. आपको इस कॉन्फ़िगरेशन में इसे जोड़ना होगा बाद के चरण पूरे करने होंगे.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
जब भी लाइटहाउस सीआई काम करता है, वह आपकी साइट के लिए सर्वर को चालू करता है. यह सर्वर ही लाइटहाउस को आपकी साइट लोड करने में मदद करता है, भले ही कोई और वेबसाइट न हो सर्वर काम कर रहे हैं. लाइटहाउस सीआई के काम करने के बाद, वह सर्वर अपने-आप बंद हो जाएगा. यह पक्का करने के लिए कि विज्ञापन दिखाने की सुविधा ठीक से काम कर रही है, आपको इनमें से किसी एक को कॉन्फ़िगर करना होगा
staticDistDir
याstartServerCommand
प्रॉपर्टी.अगर आपकी साइट स्टैटिक है, तो
ci.collect
मेंstaticDistDir
प्रॉपर्टी जोड़ें ऑब्जेक्ट दिखाता है, जिससे यह पता चलता है कि आपकी स्टैटिक फ़ाइलें कहां मौजूद हैं. लाइटहाउस सीआई यह काम करेगा अपनी साइट की जांच के दौरान इन फ़ाइलों को उपलब्ध कराने के लिए अपने सर्वर का इस्तेमाल करता है. अगर आपके साइट स्थिर नहीं है, तोstartServerCommand
प्रॉपर्टी कोci.collect
ऑब्जेक्ट, जो आपका सर्वर शुरू करने वाले निर्देश को दिखाता है. लाइटहाउस सीआई, टेस्टिंग के दौरान नई सर्वर प्रोसेस शुरू करेगा और उसे बंद कर देगा कम हो जाता है.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
जोड़ें
url
प्रॉपर्टी कोci.collect
ऑब्जेक्ट के साथ जोड़ा जा सकता है, ताकि लाइटहाउस CI से मिलने वाले यूआरएल को दिखाया जा सके लाइटहाउस को रन करना चाहिए.url
प्रॉपर्टी की वैल्यू यह होनी चाहिए यूआरएल के कलेक्शन के तौर पर दिया जाता है; इस कलेक्शन में एक या उससे ज़्यादा यूआरएल हो सकते हैं. इन्होंने बदलाव किया है डिफ़ॉल्ट रूप से, लाइटहाउस सीआई हर यूआरएल के लिए तीन बार लाइटहाउस को चलाएगा.collect: { // ... url: ['http://localhost:8080'] }
जोड़ें
target
प्रॉपर्टी कोci.upload
ऑब्जेक्ट में जोड़ें और वैल्यू को'temporary-public-storage'
. लाइटहाउस रिपोर्ट लाइटहाउस सीआई को अस्थायी तौर पर सार्वजनिक स्टोरेज में अपलोड किया जाएगा. इस रिपोर्ट में सात दिनों तक उसमें रहें और फिर अपने-आप मिट जाएंगे. यह सेटअप गाइड में "कुछ समय के लिए सार्वजनिक स्टोरेज" का इस्तेमाल किया गया हो वीडियो अपलोड करने का विकल्प, क्योंकि यह तेज़ी से अपलोड होता है सेटअप करने के लिए. लाइटहाउस रिपोर्ट को सेव करने के अन्य तरीकों के बारे में जानने के लिए, इसे देखें तक दस्तावेज़.upload: { target: 'temporary-public-storage', }
रिपोर्ट में स्टोरेज की जगह, इससे मिलती-जुलती होगी:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
(यह यूआरएल काम नहीं करेगा, क्योंकि रिपोर्ट पहले ही मिटाई जा चुकी है.)
autorun
कमांड का इस्तेमाल करके, टर्मिनल से लाइटहाउस सीआई सीएलआई को चलाएं. यह लाइटहाउस तीन बार चलाएगा और मीडियन लाइटहाउस को अपलोड करेगा रिपोर्ट.lhci autorun
अगर आपने लाइटहाउस 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 टोकन सिर्फ़ तब ज़रूरी है, जब आपको GitHub के साथ लाइटहाउस सीआई का इस्तेमाल करना हो ऐक्शन. GitHub की कार्रवाई सेट अप करने का तरीका, इस लेख में आगे बताया गया है.आउटपुट में उस लिंक पर क्लिक करना जो इससे शुरू होता है
https://storage.googleapis.com...
आपको लाइटहाउस रिपोर्ट पर ले जाएगा औसत लाइटहाउस से चलाए जाने वाले मीडियन के हिसाब से.autorun
में इस्तेमाल किए जाने वाले डिफ़ॉल्ट को कमांड लाइन के ज़रिए बदला जा सकता है याlighthouserc.js
. उदाहरण के लिए, नीचे दिया गयाlighthouserc.js
कॉन्फ़िगरेशन यह बताता है कि हर बारautorun
में पांच लाइटहाउस रन इकट्ठा किए जाने चाहिए लागू करता है.numberOfRuns
प्रॉपर्टी का इस्तेमाल करने के लिए,lighthouserc.js
को अपडेट करें:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
autorun
निर्देश को फिर से चलाएं:lhci autorun
टर्मिनल आउटपुट से यह पता चलना चाहिए कि लाइटहाउस को पांच बार चलाया गया है डिफ़ॉल्ट तीन से कम है:
✅ .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.
कॉन्फ़िगरेशन के अन्य विकल्पों के बारे में जानने के लिए, लाइटहाउस सीआई देखें कॉन्फ़िगरेशन दस्तावेज़ में दिया गया है.
लाइटहाउस सीआई को चलाने के लिए, अपनी सीआई प्रोसेस सेट अप करें
लाइटहाउस सीआई का इस्तेमाल, आपके पसंदीदा सीआई टूल के साथ किया जा सकता है. अपने सीआई को कॉन्फ़िगर करना सेवा देने वाली कंपनी लाइटहाउस सीआई दस्तावेज़ के एक सेक्शन में कोड के सैंपल होते हैं. इन सैंपल में, यह बताया जाता है कि सामान्य सीआई टूल की कॉन्फ़िगरेशन फ़ाइलों में लाइटहाउस CI को शामिल कर सकते हैं. खास तौर पर, ये कोड सैंपल दिखाते हैं कि इकट्ठा करने के लिए लाइटहाउस CI को कैसे चलाया जाए सीआई प्रोसेस के दौरान परफ़ॉर्मेंस के आकलन का आकलन किया जाता है.
परफ़ॉर्मेंस के आंकड़े इकट्ठा करने के लिए, लाइटहाउस सीआई का इस्तेमाल करना एक अच्छी शुरुआत है
से मैनेज किया जा सकता है. हालांकि, हो सकता है कि बेहतर सुविधाएं इस्तेमाल करने वाले लोग
बिल्ड नाकाम करने के लिए, लाइटहाउस सीआई का इस्तेमाल करें. अगर वे पहले से तय किए गए नियमों को पूरा नहीं करते हैं, तो
ज़रूरी शर्तें, जैसे कि लाइटहाउस के खास ऑडिट पास करना या सभी परफ़ॉर्मेंस को पूरा करना
तय करें. यह व्यवहार इसके ज़रिए कॉन्फ़िगर किया जाता है
assert
lighthouserc.js
फ़ाइल की प्रॉपर्टी है.
लाइटहाउस सीआई तीन लेवल पर दावे करता है:
off
: दावों को अनदेखा करेंwarn
: stderr में प्रिंट विफल रहाerror
: नॉन-ज़ीरो वाले लाइटहाउस CI से, stderr और उससे बाहर निकलने में गड़बड़ी वाले पेजों का प्रिंट न लिया जा सका बाहर निकलें कोड
यहां lighthouserc.js
कॉन्फ़िगरेशन का एक उदाहरण दिया गया है. इसमें यह शामिल है
दावे. यह लाइटहाउस की परफ़ॉर्मेंस के स्कोर को लेकर दावा करता है और
सुलभता श्रेणियां. इसे आज़माने के लिए, नीचे दिखाए गए दावों को
अपनी lighthouserc.js
फ़ाइल को डाउनलोड करने के बाद, Lighthouse CI को फिर से चलाएं.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
इससे जनरेट होने वाला कंसोल आउटपुट, ऐसा दिखेगा:
लाइटहाउस सीआई के दावों के बारे में ज़्यादा जानकारी के लिए, यह देखें दस्तावेज़.
लाइटहाउस सीआई को चलाने के लिए, GitHub ऐक्शन सेट अप करें
GitHub की कार्रवाई का इस्तेमाल, लाइटहाउस सीआई. इससे हर बार एक नई लाइटहाउस रिपोर्ट जनरेट होगी बदलाव को GitHub रिपॉज़िटरी की किसी भी ब्रांच में भेजा जाता है. इसका इस्तेमाल एक साथ करें स्थिति सही का निशान लगाएं का इस्तेमाल किया जा सकता है.
डेटा स्टोर करने की जगह के रूट में,
.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!"
यह कॉन्फ़िगरेशन एक ऐसा वर्कफ़्लो सेट अप करता है जिसमें एक जॉब शामिल होता है. जब भी नया कोड रिपॉज़िटरी में भेजा जाता है. इस काम के चार चरण हैं:
- डेटा स्टोर करने की उस जगह देखें जिसके ख़िलाफ़ लाइटहाउस सीआई को चलाया जाएगा
- नोड इंस्टॉल और कॉन्फ़िगर करें
- ज़रूरी एनपीएम पैकेज इंस्टॉल करें
- लाइटहाउस सीआई का इस्तेमाल करें और नतीजों को, कुछ समय के लिए सार्वजनिक स्टोरेज में अपलोड करें.
इन बदलावों को लागू करें और उन्हें GitHub में भेजें. अगर आपने सही तरीके से फ़ॉलो किया है, तो ऊपर दिए गए चरणों के हिसाब से, GitHub में कोड पुश करने से वर्कफ़्लो ट्रिगर होगा जिसे आपने अभी-अभी जोड़ा है.
यह पुष्टि करने के लिए कि लाइटहाउस सीआई ट्रिगर हुआ है और रिपोर्ट को देखने के लिए जनरेट किया गया है, तो अपने प्रोजेक्ट के कार्रवाइयां टैब पर जाएं. आपको प्रोजेक्ट बनाएं और Run Lighthouse CI वर्कफ़्लो बनाएं. यह वर्कफ़्लो, आपके सबसे हाल की प्रतिबद्धता.
किसी खास प्रतिबद्धता से जुड़ी लाइटहाउस रिपोर्ट पर जाया जा सकता है कार्रवाइयां टैब से. कमिट पर क्लिक करें, Lighthouse CI पर क्लिक करें वर्कफ़्लो चरण को पूरा करें, उसके बाद Lighthouse CI चलाएं चरण के नतीजों को बड़ा करें.
लाइटहाउस सीआई को चलाने के लिए, आपने अभी-अभी GitHub ऐक्शन सेट अप किया है. ज़्यादा से ज़्यादा GitHub स्टेटस के साथ इस्तेमाल किए जाने पर काम का है सही का निशान लगाकर चुनें.
GitHub पर स्टेटस की जांच करने की सुविधा सेट अप करें
अगर कॉन्फ़िगर किया गया है, तो स्टेटस की जांच एक मैसेज है. यह हर पीआर और आम तौर पर, इसमें किसी टेस्ट के नतीजे या उसकी सफलता जैसी जानकारी शामिल होती है बिल्ड.
लाइटहाउस सीआई के स्टेटस की जांच करने की सुविधा को सेट अप करने का तरीका यहां बताया गया है.
Lighthouse CI GitHub ऐप्लिकेशन पर जाएं पेज पर जाएं और कॉन्फ़िगर करें पर क्लिक करें.
(ज़रूरी नहीं) अगर आप GitHub पर कई संगठनों का हिस्सा हैं, तो वह संगठन जिसके पास डेटा स्टोर करने की उस जगह का मालिकाना हक है जिसके लिए आपको लाइटहाउस का इस्तेमाल करना है सीआई॰
अगर आपको सभी सेवाओं में लाइटहाउस सीआई को चालू करना है, तो सभी डेटा स्टोर करने की जगहें चुनें डेटा स्टोर करने की जगहें या अगर आपको सिर्फ़ इस्तेमाल करना है, तो सिर्फ़ डेटा स्टोर करने की जगह चुनें उसे किसी डेटा स्टोर करने की जगह पर रखें और उसके बाद डेटा स्टोर करने की जगहों को चुनें. इसके बाद, इंस्टॉल करें और अनुमति दें.
दिखने वाले टोकन को कॉपी करें. अगले चरण में इसका इस्तेमाल करें.
टोकन जोड़ने के लिए, अपने 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: $
- स्थिति की जांच की जा सकती है. इसकी जांच करने के लिए, एक नया पुल बनाएं अनुरोध या मौजूदा पुल के अनुरोध को पूरा करने के लिए कहा जाता है.
लाइटहाउस सीआई सर्वर को सेट अप करें
लाइटहाउस सीआई सर्वर, इतिहास को एक्सप्लोर करने के लिए एक डैशबोर्ड उपलब्ध कराता है लाइटहाउस रिपोर्टिंग. यह लाइटहाउस रिपोर्ट.
- चुनें कि किस प्रॉडक्ट की तुलना करनी है.
- दोनों प्रतिबद्धताओं के बीच लाइटहाउस स्कोर में बदलाव हुआ है.
- इस सेक्शन में सिर्फ़ वे मेट्रिक दिखती हैं जो दोनों गतिविधियों में बदली गई हैं.
- रिग्रेशन को गुलाबी रंग से हाइलाइट किया जाता है.
- सुधार को नीले रंग में हाइलाइट किया जाता है.
लाइटहाउस सीआई सर्वर उन लोगों के लिए सबसे सही है जो इन्हें डिप्लॉय करने में सहज हैं और मैनेज करने में मदद कर रहा है.
लाइटहाउस सीआई सर्वर सेट अप करने के बारे में जानकारी पाने के लिए, जिसमें लागू करने के लिए Heroku और Docker का इस्तेमाल करते समय, निर्देश.