자습서: GitHub Actions를 사용한 자동화된 Lighthouse 테스트

GitHub에서 웹 프로젝트를 작업 중이며 각 git 푸시 후 프로젝트의 Lighthouse KPI를 알고 싶습니까? 방법은 다음과 같습니다.

우리의 목표는 Lighthouse 결과를 this과 같이 만드는 것입니다.

1. GitHub Actions를 사용하여 코드 빌드

실제로 구축 및 배포 중인 웹 사이트에서 Lighthouse KPI를 계산하려고 합니다. GitHub Actions[ https://github.com/features/actions ]는 git push에서 이러한 단계를 바로 실행할 수 있는 좋은 수단입니다.

this repo을 예로 들어 보겠습니다. 이 프로젝트에는 작은 Vuepress 데모 사이트가 포함되어 있습니다.
.github/workflows 폴더에는 GitHub Actions 워크플로를 설명하는 .yaml가 포함되어 있습니다. 이 파일을 살펴보겠습니다.

다음으로 문서를 시작하여 Git Push에서 워크플로가 트리거되는지 확인합니다.

on:
  - push

그런 다음 GitHub Actions VM에서 빌드에 필요한 종속 항목을 설치하고 빌드 단계를 실행합니다.

      - name: Setup Node
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        uses: actions/setup-node@v1
        with:
          node-version: v16.x

      - name: Build Node assets
        if: ${{ steps.project.outputs.deployment-enabled == 'true' }}
        run: |
          npm ci
          npm run build

2. 어딘가에 배포하고 URL 저장

다음 단계는 빌드 결과를 어딘가에 배포하는 것입니다. 내 예제 프로젝트에서는 배포 대상으로 IONOS Deploy Now을 사용합니다. 참고: Deploy Now는 인프라를 제공할 뿐만 아니라 빌드를 설정하는 데도 도움이 됩니다. 이는 GitHub Actions 구문에 익숙하지 않은 경우 특히 유용합니다.

지금 배포를 사용하는 경우 워크플로의 Deploy to IONOS 단계에서 웹 사이트를 IONOS 서버에 배포하고 URL을 제공합니다.

3. Lighthouse 테스트 실행

this awesome GitHub Action을 워크플로에 추가하여 Lighthouse 테스트를 실행해 보겠습니다.

      - name: Audit URL using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        id: lighthouse
        with:
          urls: |
            https://example.com/
          temporaryPublicStorage: true # upload lighthouse report to the temporary storage

지금 배포를 사용하는 경우 웹 사이트가 배포된 URL을 참조하기 위해 https://example.com/를 ${{ steps.project.outputs.site-url }}로 바꿀 수 있습니다.

4. 예쁜 출력 생성

GitHub는 최근 Job Summaries 이라는 멋진 기능을 발표했습니다. 이를 통해 각 워크플로 실행 직후 GitHub UI에서 시각적 상태 보고서를 생성할 수 있습니다.



위의 이미지에서 볼 수 있듯이 몇 가지 추가 정보로 장식했습니다. 요점은 다양한 KPI에 대한 올바른 참조를 삽입하는 것입니다. ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }} 인쇄할 수 있습니다.

      - name: Job successful feedback
        if: ${{ success() }}
        run: |
          echo '### Successfully published to Deploy Now :white_check_mark:' >> $GITHUB_STEP_SUMMARY
          echo "Changes went live under: ${{ steps.project.outputs.site-url }}" >> $GITHUB_STEP_SUMMARY
          echo "Triggered by **${{ github.actor }}** ∙ deployed from **${{ github.ref_name    }}**" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "**Lighthouse results:**" >> $GITHUB_STEP_SUMMARY
          echo "Performance: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}" >> $GITHUB_STEP_SUMMARY
          echo "Accessibility: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.accessibility }}" >> $GITHUB_STEP_SUMMARY
          echo "Best-practices: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.best-practices }}" >> $GITHUB_STEP_SUMMARY
          echo "SEO: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.seo }}" >> $GITHUB_STEP_SUMMARY
          echo "PWA: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.pwa }}" >> $GITHUB_STEP_SUMMARY
          echo ' ' >> $GITHUB_STEP_SUMMARY
          echo "[Visit documentation](https://docs.ionos.space/)" >> $GITHUB_STEP_SUMMARY
          echo "[Log in to Deploy Now](https://ionos.space/)" >> $GITHUB_STEP_SUMMARY

물론 Lighthouse 테스트는 빌드 및 배포가 성공한 경우에만 의미가 있습니다. 배포에 실패한 경우를 대비하여 약간의 상태 보고서를 추가할 수 있습니다.

     - name: Job failed feedback
        if: ${{ failure() }}
        run: |
          echo '### Publishing to Deploy Now was not successful :cross:' >> $GITHUB_STEP_SUMMARY
          echo "Unfortunately, the deployment failed." >> $GITHUB_STEP_SUMMARY
          echo "Find help to debug this [here](https://docs.ionos.space/)." >> $GITHUB_STEP_SUMMARY

그리고 그게 다야! 리포지토리로 푸시하고 각 배포 후 Lighthouse KPI를 확인하세요. 원하시면 Deploy Now 방문하십시오.

당신은 어때요? 이 구현이 당신에게 의미가 있습니까?