SP-668 페이지별 성능 측정 tool(LightHouse) 자동화 환경 구축 #48
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 When Push on PR | |
| on: | |
| pull_request: | |
| branches: | |
| - dev | |
| types: [opened, edited, synchronize, reopened] | |
| permissions: | |
| contents: read | |
| pull-requests: write | |
| jobs: | |
| lhci: | |
| name: Lighthouse CI | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout | |
| uses: actions/checkout@v4 | |
| - name: Use Node.js 20.10.0 | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 20.10.0 | |
| - name: Install dependencies | |
| run: | | |
| yarn install --immutable --immutable-cache --check-cache | |
| - name: Add host "local.ludo.study" | |
| run: sudo echo "127.0.0.1 local.ludo.study" | sudo tee -a /etc/hosts | |
| - name: Build the project | |
| run: | | |
| yarn build | |
| - name: Run Lighthouse CI - Desktop | |
| env: | |
| LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} | |
| run: | | |
| yarn global add @lhci/cli | |
| lhci collect --config=lighthouserc-desktop.cjs || echo "Fail to Run Lighthouse CI!" | |
| lhci upload --config=lighthouserc-desktop.cjs || echo "Fail to Run Lighthouse CI!" | |
| - name: Run Lighthouse CI - Mobile | |
| env: | |
| LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} | |
| run: | | |
| lhci collect --config=lighthouserc-mobile.cjs || echo "Fail to Run Lighthouse CI!" | |
| lhci upload --config=lighthouserc-mobile.cjs || echo "Fail to Run Lighthouse CI!" | |
| - name: Format Lighthouse Score | |
| id: format_lighthouse_score | |
| uses: actions/github-script@v7 | |
| env: | |
| working-directory: ${{ github.workspace }} | |
| with: | |
| github-token: ${{ secrets.GITHUB_TOKEN }} | |
| script: | | |
| const fs = require('fs'); | |
| const { | |
| LH_MONITORING_PAGE_NAMES, | |
| DEV_ORIGIN_URL, | |
| LH_MONITORING_PAGE_ROUTES, | |
| LH_MIN_SCORES, | |
| } = require('./src/Constants/lighthouse.ts'); | |
| const desktopLightHouseResults = JSON.parse(fs.readFileSync('lhci_reports/desktop/manifest.json')); | |
| const mobileLightHouseResults = JSON.parse(fs.readFileSync('lhci_reports/mobile/manifest.json')); | |
| let comments = `### 💡 LightHouse Reports\n\n`; | |
| comments += `🟢 90 ~ 100, 🟠 50 ~ 89 🔴 0 ~ 49 \n\n`; | |
| const getFormattingScore = (res) => Math.round(res * 100); | |
| const getScoreColor = (score) => (score >= LH_MIN_SCORES.GREEN ? '🟢' : score >= LH_MIN_SCORES.ORANGE ? 🟠 : 🔴); | |
| const getMonitoringPageName = (url) => { | |
| const route = url.replace(DEV_ORIGIN_URL, ''); | |
| for (let pageName of LH_MONITORING_PAGE_NAMES) { | |
| if (route === LH_MONITORING_PAGE_ROUTES[pageName]) return pageName; | |
| } | |
| }; | |
| const getFormattingResultByPage = (result) => { | |
| const { url, summary, jsonPath } = result; | |
| const { audits } = JSON.parse(fs.readFileSync(jsonPath)); | |
| const { performance, accessibility, 'best-practices': bestPractices, seo } = summary; | |
| const { | |
| 'first-contentful-paint': firstContentfulPaint, | |
| 'largest-contentful-paint': largestContentfulPaint, | |
| 'speed-index': speedIndex, | |
| 'total-blocking-time': totalBlockingTime, | |
| 'cumulative-layout-shift': cumulativeLayoutShift, | |
| } = audits; | |
| const formattingTable = [ | |
| `| Category | Score |`, | |
| `| --- | --- |`, | |
| `| ${getScoreColor(getFormattingScore(performance))} Performance | ${getFormattingScore(performance)} |`, | |
| `| ${getScoreColor(getFormattingScore(accessibility))} Accessibility | ${getFormattingScore(accessibility)} |`, | |
| `| ${getScoreColor(getFormattingScore(bestPractices))} Best practices | ${getFormattingScore(bestPractices)} |`, | |
| `| ${getScoreColor(getFormattingScore(seo))} SEO | ${getFormattingScore(seo)} |`, | |
| `| ${getScoreColor(getFormattingScore(firstContentfulPaint.score))} First Contentful Paint | ${firstContentfulPaint.displayValue} |`, | |
| `| ${getScoreColor(getFormattingScore(largestContentfulPaint.score))} Largest Contentful Paint | ${largestContentfulPaint.displayValue} |`, | |
| `| ${getScoreColor(getFormattingScore(speedIndex.score))} Speed Index | ${speedIndex.displayValue} |`, | |
| `| ${getScoreColor(getFormattingScore(totalBlockingTime.score))} Total Blocking Time | ${totalBlockingTime.displayValue} |`, | |
| `| ${getScoreColor(getFormattingScore(cumulativeLayoutShift.score))} Cumulative Layout Shift | ${cumulativeLayoutShift.displayValue} |`, | |
| `\n`, | |
| ].join('\n'); | |
| return `<details>\n<summary>${`📄 ${getMonitoringPageName(url)}\n`}</summary>\n\n${formattingTable}\n</details>\n\n`; | |
| }; | |
| const getLightHouseFormattingResult = (results, type) => { | |
| let comment = type === 'mobile' ? `####📱 Mobile` : `####🖥 Desktop\n`; | |
| results.forEach((result) => (comment += getFormattingResultByPage(result))); | |
| return comment + '\n'; | |
| }; | |
| comments += getLightHouseFormattingResult(desktopLightHouseResults, 'desktop'); | |
| comments += getLightHouseFormattingResult(mobileLightHouseResults, 'mobile'); | |
| core.setOutput('comments', comments) | |
| - name: Comment PR | |
| id: add_pr_comment | |
| uses: actions/github-script@v7 | |
| with: | |
| github-token: ${{ secrets.GITHUB_TOKEN }} | |
| script: | | |
| const { Octokit } = require('@octokit/rest'); | |
| const octokit = new Octokit({ auth: `${{ secrets.GITHUB_TOKEN }}` }); | |
| const { payload, repo } = context | |
| const newComment = `${{ steps.format_lighthouse_score.outputs.comments }}` | |
| const prevComments = await ocktokit.rest.issues.listComments({ | |
| owner: repo.owner | |
| repo: repo.repo, | |
| issue_number : payload.pull__request__number, | |
| }) | |
| const prevComment = comments.find(comment => comment.body.includes(`### 💡 LightHouse Reports\n\n`)); | |
| if (prevComment) { | |
| await octokit.rest.issues.updateComment({ | |
| owner: repo.owner | |
| repo: repo.repo, | |
| comment_id: prevComment.id, | |
| body: newComment, | |
| }); | |
| } else { | |
| await octokit.rest.issues.updateComment({ | |
| owner: repo.owner | |
| repo: repo.repo, | |
| issue_number : payload.pull__request__number, | |
| body: newComment, | |
| } | |