Example of Lighthouse CI GitHub Actions

lighthouse-ci.yaml

name: Run lighthouse CI When Pull Request

on:
  pull_request:
    branches: ['dev']
    paths:
      - './frontend/**'
  workflow_dispatch:

jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js 18.7.0
        uses: actions/setup-node@v3
        with:
          node-version: 18.7.0

      - name: Install packages
        run: |
          cd ./frontend
          npm ci

      - name: Build
        run: |
          cd ./frontend
          npm run build
        env: 
          CI: false

      - name: Run Lighthouse CI
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        run: |
          # .lighthouserc.json 파일이 있는 곳으로 이동 
          cd ./frontend
          # lighthouse cli 설치 
          npm install -g @lhci/cli
          # autorun 명령어로 성능 측정 
          lhci autorun || echo "🚨 Fail to Run Lighthouse CI!"

      - name: Format lighthouse score
        # 작업의 이름 -> 추후 댓글 생성할 때 사용 
        id: format_lighthouse_score
        uses: iyu88/lighthouse-report-formatter@1.0.0
        with:
          # 디렉토리 루트를 기준으로 '.lighthouserc.json' 파일이 있는 위치를 명시합니다. 
          # .github 폴더가 최상위에 있고 
          # frontend 폴더에 lighthouse 를 설치했기 때문에 
          # 다음의 경로로 입력값을 줍니다. 
          lh_directory: ./frontend/
          # lighthouse 실행 결과 파일들이 저장되는 폴더 이름 (outputDir) 을 명시합니다.
          # '.lighthouserc.json' 에 명시된 경로와 같아야 합니다. 
          manifest_path: lhci_reports

      - name: comment PR
        uses: unsplash/comment-on-pr@v1.3.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          # 바로 이전 작업의 결과값은 comments 라는 변수에 저장됩니다. 
          # [이전 작업 id].comments 로 결과에 접근할 수 있습니다.
          msg: ${{ steps.format_lighthouse_score.outputs.comments}}