🚑 Fix: lighthouse 워크플로우 버그 해결 #30
Workflow file for this run
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Run Lighthouse CI and Comment on PR | |
on: | |
pull_request: | |
branches: | |
- "main" | |
jobs: | |
run-lighthouse-and-comment: | |
runs-on: ubuntu-latest | |
steps: | |
- name: Checkout | |
uses: actions/checkout@v2 | |
- name: Use Node.js 20.9.0 | |
uses: actions/setup-node@v1 | |
with: | |
node-version: 20.9.0 | |
- name: Cache Node modules | |
uses: actions/cache@v3 | |
with: | |
path: ~/.npm | |
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
restore-keys: | | |
${{ runner.os }}-node- | |
- name: Install packages | |
run: | | |
yarn install | |
- name: Clean build directory | |
run: rm -rf dist | |
- name: Build | |
run: | | |
yarn build | |
- name: Run Lighthouse CI | |
env: | |
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} | |
run: | | |
npm install -g @lhci/cli | |
lhci autorun || echo "Fail to Run Lighthouse CI!" | |
- name: Check LHCI Output | |
run: | | |
echo "Checking lhci_reports directory..." | |
ls -la ./lhci_reports || echo "lhci_reports directory does not exist" | |
- name: Format Lighthouse Score | |
id: format_lighthouse_score | |
uses: actions/github-script@v3 | |
with: | |
github-token: ${{ secrets.GITHUB_TOKEN }} | |
script: | | |
const fs = require('fs'); | |
const results = JSON.parse(fs.readFileSync("/home/runner/work/admin-2/admin-2/lhci_reports/manifest.json")); | |
let comments = `| Performance | First Contentful Paint | Speed Index | Time to Interactive | Total Blocking Time | Largest Contentful Paint | Cumulative Layout Shift |\n`; | |
results.forEach((result) => { | |
const { summary, jsonPath } = result; | |
const details = JSON.parse(fs.readFileSync(jsonPath)); | |
const { audits } = details; | |
const formatResult = (res) => Math.round(res * 100); | |
Object.keys(summary).forEach( | |
(key) => (summary[key] = formatResult(summary[key])) | |
); | |
const score = (res) => (res >= 90 ? "🟢" : res >= 50 ? "🟠" : "🔴"); | |
comments += `| ${score(summary.performance)} ${summary.performance} | ${score(audits["first-contentful-paint"].score * 100)} ${audits["first-contentful-paint"].displayValue} | ${score(audits["speed-index"].score * 100)} ${audits["speed-index"].displayValue} | ${score(audits["interactive"].score * 100)} ${audits["interactive"].displayValue} | ${score(audits["total-blocking-time"].score * 100)} ${audits["total-blocking-time"].displayValue} | ${score(audits["largest-contentful-paint"].score * 100)} ${audits["largest-contentful-paint"].displayValue} | ${score(audits["cumulative-layout-shift"].score * 100)} ${audits["cumulative-layout-shift"].displayValue} |\n`; | |
}); | |
core.setOutput('comments', comments) | |
- name: Comment on PR | |
uses: unsplash/[email protected] | |
env: | |
GITHUB_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} | |
with: | |
msg: ${{ steps.format_lighthouse_score.outputs.comments }} |