如何將 Lighthouse 新增至持續整合系統 (例如 GitHub Actions)。
Lighthouse CI 是一套 工具，在持續整合期間使用 Lighthouse。Lighthouse CI 可能是 以多種方式整合至開發人員工作流程本指南涵蓋 下列主題：
- 使用 Lighthouse CI CLI。
- 設定持續整合供應商以執行 Lighthouse CI。
- 設定 GitHub 動作 狀態 查看 適用於 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 Action，並在每次提取時執行註解 要求
- 透過 Lighthouse 提供的資訊主頁追蹤長期成效 伺服器
上述所有方法都是以 Lighthouse CI CLI 為基礎。
Lighthouse CI 的替代方案包括第三方效能監控 或自行編寫指令碼，在持續整合期間收集成效資料 上傳資料集之後，您可以運用 AutoML 自動完成部分資料準備工作如果您想 還有其他人負責處理效能監控伺服器管理 測試裝置；如要啟用通知功能 (例如電子郵件或 Slack)， ，而不用另外建構這些功能。
在本機使用 Lighthouse CI
本節說明如何在本機執行及安裝 Lighthouse CI CLI
如何設定 lighthouserc.js。在本機執行 Lighthouse CI CLI
輕鬆確保 lighthouserc.js 設定正確
安裝 Lighthouse CI CLI。
npm install -g @lhci/cliLighthouse CI 的設定方式是將
lighthouserc.js檔案放在 存取專案存放區這是必要的檔案，當中包含 Lighthouse CI 相關的設定資訊雖然 Lighthouse CI 可設定為 通常不含 Git 存放區 本文的操作說明假設您已將專案存放區設為 請使用 Git在存放區的根目錄中，建立
lighthouserc.js設定 檔案。touch lighthouserc.js在
lighthouserc.js中加入以下程式碼。這個 QR code 空白 Lighthouse 持續整合設定。您將在以下位置新增這項設定： 後續步驟module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };Lighthouse CI 每次執行時都會啟動伺服器，為您的網站提供服務。 這個伺服器可讓 Lighthouse 即使沒有其他方法，也能載入你的網站 伺服器是否正常運作Lighthouse CI 執行完成後， 自動關閉伺服器。為確保放送能正常運作 您應設定
staticDistDir敬上 或startServerCommand。 資源。如果您的網站為靜態，請在
ci.collect中加入staticDistDir屬性 物件，用於表示靜態檔案的所在位置。Lighthouse CI 將 則使用自己的伺服器提供這些檔案。如果您的 網站並非靜態，請在startServerCommand屬性的ci.collect物件，用於表示啟動伺服器的指令。 Lighthouse CI 會在測試期間啟動並關閉新的伺服器程序 假設// Static site example collect: { staticDistDir: './public', }// Dynamic site example collect: { startServerCommand: 'npm run start', }將
url敬上 屬性為ci.collect物件，表示 Lighthouse CI 的網址 應該朝向 Lighthouse 的測試url屬性的值應為 做為網址陣列提供；此陣列可包含一或多個網址。變更者： 在預設情況下，Lighthouse CI 會針對每個網址執行 3 次 Lighthouse。collect: { // ... url: ['http://localhost:8080'] }將
target敬上 屬性設為ci.upload物件，並將值設為'temporary-public-storage'。Lighthouse 報告： Lighthouse CI 將上傳至臨時公共儲存空間。接著， 留存 7 天，然後由系統自動刪除。這項設定 導遊使用「臨時公用儲存空間」因為速度快 才能進行設定如要瞭解其他儲存 Lighthouse 報表的方式，請參閱 加入 說明文件。upload: { target: 'temporary-public-storage', }報表儲存位置會類似於以下內容：
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html(報表已遭刪除，因此這個網址無法運作)。
使用
autorun指令從終端機執行 Lighthouse CI CLI。 這會執行 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訊息。A 罩杯 只有在要搭配 GitHub 使用 Lighthouse CI 時，才需要 GitHub 權杖 開拍本文稍後會說明如何設定 GitHub 動作。在輸出結果中按一下開頭為
https://storage.googleapis.com...會將你帶往 Lighthouse 報告 對應至 Lighthouse 跑步中位數您可以透過指令列或
autorunlighthouserc.js。例如下方的lighthouserc.js設定 表示每次autorun都應該收集 5 次 Lighthouse 執行作業。更新
lighthouserc.js以使用numberOfRuns屬性：module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };重新執行
autorun指令：lhci autorun終端機輸出應會顯示 Lighthouse 已執行五次 系統應採用預設的 3 個選項：
✅ .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 設定 說明文件。
設定持續整合程序以執行 Lighthouse CI
Lighthouse CI 可與您喜愛的持續整合工具搭配使用。設定您的 CI 供應商 章節中的 Lighthouse CI 說明文件 包含了許多程式碼範例，說明如何 將 Lighthouse CI 納入常見持續整合工具的設定檔中。 這些程式碼範例具體顯示瞭如何執行 Lighthouse CI 以收集 以及在持續整合過程中評估成效
建議你先從 Lighthouse CI 著手收集成效評估資料
提供監控服務不過，進階使用者可能會想採取其他行動
。如果 Lighthouse CI 不符合預先定義的環境，則使用 Lighthouse CI 來失敗建構作業
例如通過特定 Lighthouse 稽核或滿足所有效能等條件
預算。透過
assert敬上
lighthouserc.js 檔案中的屬性。
Lighthouse CI 支援三種層級的斷言：
off：忽略斷言warn：傳送至 stderr 失敗error：輸出至 stderr 的列印失敗，並以非 0 結束 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 動作以執行 Lighthouse CI
GitHub 動作可用於執行 Lighthouse CI。每次系統傳送代碼時，系統都會產生新的 Lighthouse 報告 系統會將變更推送至 GitHub 存放區的任何分支版本。這可以參考下列參數： 狀態中有狀態 查看 以便在每個提取要求上顯示這些結果
在存放區的根目錄中，建立一個名為
.github/workflows。 工作流程 您專案的新 ID 都位於這個目錄中工作流程是指 於預先確定的時間 (例如推送程式碼時) 執行，且 包含一或多個動作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 已觸發並查看報表 請前往專案的「Actions」分頁。您應該會看到 列在您最下方的「建構專案並執行 Lighthouse CI」工作流程 近期的修訂版本
您可以前往對應至特定修訂版本的 Lighthouse 報告 在「動作」分頁中按一下修訂版本，然後點選「Lighthouse CI」 工作流程步驟，然後展開 run Lighthouse CI 步驟的結果。
您剛設定執行 Lighthouse CI 的 GitHub 動作。這會受到 與 GitHub 狀態搭配使用時很實用 檢查。
設定 GitHub 狀態檢查
狀態檢查 (如已設定) 會顯示在每個 PR 上 通常包括測試結果 建構應用程式
下列步驟說明如何為 Lighthouse CI 設定狀態檢查。
前往 Lighthouse CI GitHub 應用程式 頁面，然後按一下「設定」。
(選用) 如果您隸屬於 GitHub 上的多個機構，請選擇 機構所屬的機構，該機構擁有您要使用 Lighthouse 的存放區 CI。
如要在所有位置啟用 Lighthouse CI，請選取「All repositories」 存放區；如果只想使用，請選取「Only select repositories」 複製到特定存放區 然後選取存放區接著按一下 安裝與授權。
複製畫面上顯示的憑證。您會在下一個步驟中使用這項資訊。
如要新增權杖，請前往 GitHub 的「Settings」(設定) 頁面 依序點選「Secrets」和「Add a new 密鑰」。
將「Name」欄位設為
LHCI_GITHUB_APP_TOKEN，並設定「Value」 欄位新增至在最後一個步驟中複製的權杖，然後按一下 [新增]， 密鑰按鈕。前往
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: $
- 現在可以使用狀態檢查了。如要測試，請建立新的提取 要求 也可以將修訂版本推送至現有的提取要求
設定 Lighthouse 持續整合伺服器
Lighthouse CI 伺服器提供探索歷史資料的資訊主頁 Lighthouse 報表。也能做為長期私有的資料儲存庫 Lighthouse 報告。
- 選擇要比較的修訂版本。
- Lighthouse 分數在兩個修訂版本之間的變化量。
- 本節只會顯示兩個修訂版本之間變化的指標。
- 迴歸會以粉紅色醒目顯示。
- 改善項目會以藍色標明。
Lighthouse CI Server 最適合那些能輕鬆部署，且 自行管理基礎架構
進一步瞭解如何設定 Lighthouse CI 伺服器，包括 如何使用 Heroku 和 Docker 進行部署 操作說明。