개발

이번에 사용해볼 라이브러리는 GoogleChrome의 lighthouse-ci이다.

1. CLI로 lighthouse 측정하기

1. lighthouse ci 라이브러리 설치 : npm i -g @lhci/cli

   • Lighthouse CI를 CLI로 실행할 수 있는 명령어이다.

2. lighthouserc.js 파일 구성

   module.exports = {
     ci: {
       upload: {
         target: 'temporary-public-storage',
       },
     },
   };
   

   • 더 많은 구성은 configuration에서 확인할 수 있다.

3. 이 때, exports폴더가 존재해야 한다. Next.js의 경우, next.config.js를 다음과 같이 설정하여 만들 수 있다.

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: "export",
   };
   
   module.exports = nextConfig
   
   

4. Lighthouse 측정 : lhci autorun

   • 1번에서 설치한 lhci를 실행한다.

2. github actions로 Lighthouse CLI 자동화하기

// .github/workflows/ci.yml
name: Run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Use Node.js 18.20.2
        uses: actions/setup-node@v1
        with:
          node-version: 18.20.2

      - name: Install Packages
        run: |
          npm install

      - name: npm build
        run: npm run build

      - name: run Lighthouse CI 
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun

위와 같이 .github/workflows아래에 .yml형식으로 작성해주면 된다.

step들은 다음과 같다.

1. uses: actions/checkout@v2 : 레포를 체크아웃하는 checkout 액션을 사용한다.
2. uses: actions/setup-node@v1 : NodeJS를 설치하는 setup-node를 사용한다.
3. npm i : package.json을 바탕으로 패키지를 설치한다.
4. npm install -g @lhci/[email protected] : @lhci/cli를 글로벌로 설치한다.
5. lhci autorun : 4번에서 설치한 lhci를 이용하여 autorun을 실행한다.

3. comment로 기록하기