-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* setting: LightHouse CI 파일 작성 * fix: name에 - 프리픽스 추가 * chore: syntaxError 수정 * chore: 자잘한 수정 * fix: syntax 수정 * fix: 설치 버전 수정 * chore: actions/checkout 옵션 추가 * fix: 워크플로 동작 조건 수정 * fix: fetch-depth 옵션 제거 * fix: env 설정 * chore: 타이틀 name 수정 * feat: lighthouse 성능 측정 url 수정 및 추가 * fix lighthouserc.js collect 옵션 수정 * fix: http 환경에서 테스트하도록 변경 * fix: https 환경으로 테스트 * fix: startServerCommand 수정 * fix: http 테스트 * fix: url localhost로 변경 * feat: 성능측정 점수 PR 코멘트 자동화 기능 추가 * fix: lighthouserc.js에 upload 옵션 수정 * chore: lighthouse.yml 수정 * fix: lighthouse.yml 수정 * fix: 빌드에러 수정 * fix: forEach에 index 레퍼런스 추가 * fix: 점수 지표 PR Comment 워크플로 재작성 * fix: 상단의 let comments 제거 * fix: 파일 수정 * fix: await 지시문 삭제 * fix: 파일 수정 * fix: PR comment 방식 변경 * fix: PR Comment 방식 변경 * fix: PR Comment 관련 코드 수정 * fix: 워크플로우 동작 branch 설정 * refactor: script 분리 테스트 * setting: @actions/core 설치 * fix: 워크플로우에 @actions/core 적용 * feat: 워크플로우에 @actions/core 패키지 설치 옵션 추가 * fix: @actions/core 디펜던시 제거 * fix: github action 트리거 조건 수정 * fix: pr comment 작성 및 수정 방식 교체 * chore: 워크플로우 시작 조건 변경 및 lighthouse 동작 횟수 변경 * chore: 주석 수정 및 제거 * fix: @actions/core 디펜던시 추가 * fix: comment 방식 수정 * fix: LightHouse 워크플로우 동작 조건 롤백
- Loading branch information
Showing
6 changed files
with
225 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
const core = require('@actions/core'); | ||
|
||
try { | ||
// 점수 지표 파일 정보 | ||
const fs = require('fs'); | ||
const results = JSON.parse(fs.readFileSync('./lhci_reports/manifest.json')); | ||
const totalReports = results.length; | ||
|
||
// LightHouse 점수 지표 | ||
const averageScores = { | ||
performance: 0, | ||
accessibility: 0, | ||
'best-practices': 0, | ||
seo: 0, | ||
pwa: 0, | ||
}; | ||
const auditSummaries = { | ||
'first-contentful-paint': 0, | ||
'largest-contentful-paint': 0, | ||
interactive: 0, | ||
'total-blocking-time': 0, | ||
'cumulative-layout-shift': 0, | ||
}; | ||
|
||
// 점수 평균 | ||
results.forEach(result => { | ||
const { summary } = result; | ||
|
||
for (const key in averageScores) { | ||
averageScores[key] += summary[key]; | ||
} | ||
|
||
const details = JSON.parse(fs.readFileSync(result.jsonPath)); | ||
[ | ||
'first-contentful-paint', | ||
'largest-contentful-paint', | ||
'interactive', | ||
'total-blocking-time', | ||
'cumulative-layout-shift', | ||
].forEach(auditName => { | ||
if (details.audits[auditName]) { | ||
const auditDetails = details.audits[auditName]; | ||
auditSummaries[auditName] += parseFloat(auditDetails.displayValue) || 0; | ||
} | ||
}); | ||
}); | ||
|
||
// 점수 색상 표시 | ||
const formatScore = res => (res >= 90 ? '🟢' : res >= 70 ? '🟠' : '🔴'); | ||
|
||
// 상세 지표 점수 색상 표시 | ||
const detailScore = (value, metric) => { | ||
switch (metric) { | ||
case 'first-contentful-paint': | ||
return value <= 1.8 ? '🟢' : value <= 3 ? '🟠' : '🔴'; | ||
case 'largest-contentful-paint': | ||
return value <= 2.5 ? '🟢' : value <= 4 ? '🟠' : '🔴'; | ||
case 'interactive': | ||
return value <= 3.8 ? '🟢' : value <= 7.3 ? '🟠' : '🔴'; | ||
case 'total-blocking-time': | ||
return value <= 300 ? '🟢' : value <= 600 ? '🟠' : '🔴'; | ||
case 'cumulative-layout-shift': | ||
return value <= 0.1 ? '🟢' : value <= 0.25 ? '🟠' : '🔴'; | ||
default: | ||
return '🔴'; // Default to red if metric is unknown | ||
} | ||
}; | ||
|
||
// comments 파싱 | ||
let comments = | ||
'⚡️ Lighthouse Average Scores Across Reports:\n| Category | Score |\n| --- | --- |\n'; | ||
Object.keys(averageScores).forEach(key => { | ||
const avgScore = Math.round((averageScores[key] / totalReports) * 100); | ||
comments += `| ${formatScore(avgScore)} ${key.replace( | ||
/-/g, | ||
' ' | ||
)} | ${avgScore} |\n`; | ||
}); | ||
|
||
comments += | ||
'\n⚡️ Average Details Across All Reports:\n| Category | Score |\n| --- | --- |\n'; | ||
Object.keys(auditSummaries).forEach(auditName => { | ||
const average = auditSummaries[auditName] / totalReports; | ||
const formattedName = auditName.replace(/-/g, ' '); | ||
const colorCode = detailScore(average, auditName); | ||
const unit = | ||
auditName === 'total-blocking-time' | ||
? 'ms' | ||
: auditName === 'cumulative-layout-shift' | ||
? '' | ||
: 's'; | ||
comments += `| ${colorCode} ${formattedName} | ${average.toFixed( | ||
1 | ||
)}${unit} |\n`; | ||
}); | ||
|
||
// comments 내보내기 | ||
core.setOutput('comments', comments); | ||
} catch (error) { | ||
console.error(error); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
name: 'get-score-comments' | ||
description: 'Get Score Comments' | ||
|
||
outputs: | ||
comments: | ||
description: 'Comments that Parsed Scores' | ||
|
||
runs: | ||
using: 'node16' | ||
main: 'action.js' |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
name: LightHouse CI | ||
|
||
on: | ||
pull_request: | ||
branches: | ||
- main | ||
|
||
jobs: | ||
lhci: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
|
||
- name: Use Node.js 18 | ||
uses: actions/setup-node@v3 | ||
with: | ||
node-version: 18 | ||
cache: 'yarn' | ||
|
||
- name: Install packages | ||
run: yarn install && yarn global add @lhci/[email protected] && yarn add @actions/core | ||
|
||
- name: Set .env | ||
run: echo "${{ vars.DEVELOPMENT_ENV }}" > .env.local | ||
|
||
- name: Build | ||
run: yarn build | ||
|
||
- name: Run Lighthouse CI | ||
run: lhci autorun | ||
env: | ||
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} | ||
|
||
- name: Get Score Comments | ||
id: get-score-comments | ||
uses: ./.github/actions/get-score-comments | ||
|
||
- name: Find Comment | ||
if: github.event_name == 'pull_request' | ||
uses: peter-evans/find-comment@v2 | ||
id: find_comment | ||
with: | ||
issue-number: ${{ github.event.pull_request.number }} | ||
comment-author: 'github-actions[bot]' | ||
body-includes: ⚡️ Lighthouse Average Scores Across Reports | ||
|
||
- name: Create or update comment | ||
if: github.event_name == 'pull_request' | ||
uses: peter-evans/create-or-update-comment@v2 | ||
with: | ||
comment-id: ${{ steps.find_comment.outputs.comment-id }} | ||
issue-number: ${{ github.event.pull_request.number }} | ||
body: ${{ steps.get-score-comments.outputs.comments }} | ||
edit-mode: replace |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
module.exports = { | ||
ci: { | ||
collect: { | ||
startServerCommand: 'yarn next start', | ||
startServerReadyPattern: 'ready on', | ||
url: [ | ||
'http://localhost:3000/bookarchive', | ||
'http://localhost:3000/book/search', | ||
'http://localhost:3000/group', | ||
'http://localhost:3000/profile/me', | ||
], | ||
numberOfRuns: 2, | ||
}, | ||
upload: { | ||
target: 'filesystem', | ||
outputDir: './lhci_reports', | ||
reportFilenamePattern: '%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%', | ||
}, | ||
}, | ||
}; |
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
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