Skip to content

🚑 Fix: lighthouse 워크플로우 버그 해결 #30

🚑 Fix: lighthouse 워크플로우 버그 해결

🚑 Fix: lighthouse 워크플로우 버그 해결 #30

Workflow file for this run

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 }}