lighthouse.yml

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')
            
            let comments = '💡 Lighthouse Reports!'

            console.log(${{ env.working-directory }})

            const desktopResults = JSON.parse(fs.readFileSync(`${{ env.working-directory }}/lhci_reports/desktop/manifest.json`))
            const mobileResults = JSON.parse(fs.readFileSync(`${{ env.working-directory }}/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 >= 50 ? "🟠" : "🔴");

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