SP-668 페이지별 성능 측정 tool(LightHouse) 자동화 환경 구축 #41
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 | |
| with: | |
| script: | | |
| const fs = require('fs') | |
| let comments = '💡 Lighthouse Reports!' | |
| const desktopResults = JSON.parse(fs.readFileSync(`${{github.workspace}}/lhci_reports/desktop/manifest.json`)) | |
| const mobileResults = JSON.parse(fs.readFileSync(`${{github.workspace}}/lhci_reports/mobile/manifest.json`)) | |
| comments = `🖥 Desktop Reports` | |
| ### 데스크탑 포매팅 | |
| desktopResults.forEach((result, index) => { | |
| const { summary } = result; | |
| const formatResult = (res) => Math.round(res * 100); | |
| Object.keys(summary).forEach( | |
| (key) => (summary[key] = formatResult(summary[key])) | |
| ); | |
| const score = (res) => (res >= 90 ? "🟢" : res >= 70 ? "🟠" : "🔴"); | |
| const comment = [ | |
| `⚡️ Lighthouse report ${index}`, | |
| `| Category | Score |`, | |
| `| --- | --- |`, | |
| `| ${score(summary.performance)} Performance | ${summary.performance} |`, | |
| `| ${score(summary.accessibility)} Accessibility | ${summary.accessibility} |`, | |
| `| ${score(summary['best-practices'])} Best practices | ${summary['best-practices']} |`, | |
| `| ${score(summary.seo)} SEO | ${summary.seo} |`, | |
| `| ${score(summary.pwa)} PWA | ${summary.pwa} |`, | |
| `\n`, | |
| ].join("\n"); | |
| comments += comment + "\n"; | |
| }); | |
| 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 { context } = require('@actions/github'); | |
| const { payload, repo } = context | |
| const newComment = `${{ steps.format_lighthouse_score.outputs.comments }}` | |
| octokit.issues.createComment({ | |
| owner: repo.owner | |
| repo: repo.repo, | |
| issue_number : payload.pull__request__number, | |
| body: newcomment | |
| }) | |