lighthouse.yml

name: lighthouse

on:
  workflow_dispatch:
  pull_request:
    branches:
      - "main"
      - "dev"
    types:
      - opened
      - synchronize

jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository // 저장소 체크아웃
        uses: actions/checkout@v4

      - name: Install pnpm // pnpm 설치
        uses: pnpm/action-setup@v3
        with:
          version: 9.7.0
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - name: Setup pnpm cache
        uses: actions/cache@v4
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: Run Lighthouse CI // Lighthouse 실행
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        run: |
          pnpm i -g @lhci/cli
          pnpm run dev
          lhci autorun || echo "Fail to Run Lighthouse CI!"

      - name: Format lighthouse score
        id: format_lighthouse_score
        uses: actions/github-script@v3
        with:
          script: |
            const fs = require('fs');
            const path = require('path');
            const resultsPath = path.join(process.env.GITHUB_WORKSPACE, 'lhci_reports', 'manifest.json');

            console.log(`Looking for results in ${resultsPath}`);

            const results = JSON.parse(fs.readFileSync(resultsPath));
            let comments = ""

            results.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 + 1}**`,
                `| 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
        uses: unsplash/comment-on-pr@v1.3.0
        with:
          msg: ${{ steps.format_lighthouse_score.outputs.comments }}