React Native 라이브러리의 PR 검토 프로세스 자동화

마지막으로 React Native 라이브러리의 빌드 프로세스를 자동화하는 방법을 살펴보았습니다.

PR 검토는 오픈 소스 라이브러리 관리의 중요한 부분입니다. 그러나 바쁜 생활로 인해 상당한 시간과 노력이 필요할 수 있습니다. 즉, 가능한 한 효율적이어야 합니다.

내 전체 도구 체인은 검토 프로세스를 가능한 한 쉽게 만들기 위해 설정되었습니다. 이번에는 검토 프로세스를 훨씬 더 간단하게 만들기 위해 Github 작업 워크플로를 만들 것입니다.

라이브러리에 제기된 모든 PR에는 다음 검사가 자동으로 수행됩니다.

린팅 및 테스트

코드 커버리지 보고서

업데이트된 스토리북 문서의 미리 보기 배포

신속하게 테스트할 수 있는 링크가 포함된 예제 모바일 앱의 검토 버전 빌드

시각적 검토를 위해 모든 스토리를 chromatic으로 전송

PR이 전송되는 즉시 검토 작업 흐름의 진행 상황을 볼 수 있어야 합니다. ﹣



위 이미지는 내rex-state 라이브러리의 PR에서 가져온 것입니다. 이를 효과적으로 구현할 수 있는 방법을 살펴보겠습니다.

내 .github/workflows/review.yml 라이브러리의 rex-state 파일에서 내 작업 검토 워크플로를 찾을 수 있습니다.

워크플로 트리거

이 워크플로는 모든 풀 요청에서 실행됩니다.

name: review
on: pull_request

린팅 및 테스트

이 단계는 빌드 워크플로에서 수행한 것과 동일합니다. 다른 모든 작업은 린팅 및 테스트가 완료된 후에만 실행됩니다.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

커버리지 보고서

이전 빌드 단계에서 Code Climate를 사용하여 테스트 커버리지 보고서를 저장했습니다. 그러나 PR에서는 들어오는 코드의 테스트 범위를 빠르게 확인할 수 있는 방법이 필요합니다.

이를 위해 romeovs/lcov-reporter-action 테스트 커버리지 세부 정보와 함께 PR에 멋진 댓글을 게시할 수 있습니다. 댓글 ﹣ 다음과 같은 보고서를 받게 됩니다.



커버리지를 댓글로 받기 위해 다음 구성 추가 ﹣

  coverage:
    needs: [test, lint]
    name: coverage
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn test --coverage
      - uses: romeovs/[email protected]
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}

업데이트된 스토리북 문서의 미리보기 배포

Netlify Github 앱을 사용하고 있었기 때문에 추가 설정 없이 즉시 배포 미리 보기를 받을 수 있습니다. Github 작업으로 배포 미리 보기를 수동으로 활성화하려는 경우 Netlify CLI을 시도할 수 있습니다.

예제 앱의 버전 검토

여기에서 엑스포 툴체인의 힘이 빛을 발합니다. expo-cli를 사용하여 검토 목적으로 사용할 수 있는 별도의 채널에 앱을 게시할 수 있습니다.

엑스포 팀은 또한 documentation에 대한 자세한 내용expo-github-action을 제공했습니다. 워크플로에 다음 구성을 추가합니다(msg의 URL을 애플리케이션의 URL로 바꿉니다)﹣

  expo-publish:
    needs: [test, lint]
    name: Publish to Expo 🚀
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      - run: npx yarn bootstrap
      - run: expo publish --release-channel=pr-${{ github.event.number }}
        working-directory: example
      - uses: unsplash/comment-on-pr@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          msg: App is ready for review, you can [see it here](https://expo.io/@daniakash/rex-state-example?release-channel=pr-${{ github.event.number }}).

이제부터 모든 PR에 대해 다음과 같은 댓글을 받게 됩니다 ﹣

반음계에 이야기 보내기

마지막으로 PR이 스토리에 영향을 미쳤는지 시각적 검토를 위해 스토리를 반음계로 보낼 수 있습니다. 구성은 마지막 구성과 동일하며, 크로매틱은 데이터가 PR에서 온 것임을 알아낼 만큼 똑똑합니다!

  chromatic:
    needs: [test, lint]
    name: Publish storybook to chromatic 🧪
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn chromatic
        working-directory: example
        env:
          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

모든 준비가 완료되면 PR에는 매번 수동으로 확인해야 하는 사항에 대한 자세한 정보가 포함됩니다 ﹣



이제 강력한 검토 워크플로가 생겼습니다. 에서 GitHub에서 새 릴리스를 만들 때마다 라이브러리를 NPM에 게시합시다!