React Native 라이브러리의 빌드 프로세스 자동화

내 에서 반응 네이티브 라이브러리에 사용할 도구에 대해 설명했습니다. 이제 빌드 프로세스를 자동화할 것입니다.

모든 오픈 소스 Github 리포지토리에는 대부분의 워크플로를 자동화할 수 있는 무료 Github 작업이 있습니다. 저는 자동화 프로세스 전반에 걸쳐 Github Actions를 사용할 것입니다.

라이브러리의 빌드는 다음 항목으로 구성됩니다. ﹣

보푸라기

테스트 실행

테스트 커버리지 게시

엑스포에 예제 앱 게시

반음계에 스토리 게시

문서가 포함된 스토리북을 정적 사이트로 게시합니다

.

내 .github/workflows/build.yml 프로젝트의 react-native-better-image 파일에서 내 빌드 워크플로를 찾을 수 있습니다. 빌드 프로세스는 다음과 같습니다. ﹣

워크플로를 트리거하는 시기

마스터 브랜치가 항상 안정적인지 확인하는 빌드 워크플로우를 원했습니다. 따라서 마스터에 대한 모든 푸시에서 실행됩니다. 하지만 태그에 대해서는 실행되지 않을 것입니다. 이에 대한 또 다른 릴리스 워크플로를 계획했기 때문입니다.

name: build
on:
  push:
    branches:
      - master
    tags:
      - '!*' # Do not execute on tags
    paths:
      - example/*
      - src/*
      - test/*
      - __tests__/*
      - '*.json'
      - yarn.lock
      - .github/**/*.yml

린팅

프로젝트에서 react-native-community/bob을 사용하고 있으므로 package.json 파일에서 lint 및 typescript 스크립트를 모두 실행할 수 있으며 lint 프로세스를 완료하기에 충분합니다.

  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

테스트 및 적용 범위

테스트 커버리지를 표시하기 위해 code climate for open source projects 을 사용하기로 결정했습니다. 그들은 또한 paambaati/codeclimate-action에서 사용할 수 있는 좋은 작업을 가지고 있습니다.

코드 기후는 모범 사례에 대한 코드를 확인하고 유지 관리 메트릭을 제공합니다. 이와 함께 코드 커버리지 보고서도 받을 수 있습니다. 코드 환경을 설정하면 모든 사람에게 라이브 코드 품질 점수를 제공하는 배지를 리포지토리에 추가할 수 있습니다 ﹣



다음 구성은 테스트 실행에 사용됩니다. ﹣

  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

linting 및 테스트 작업이 모두 완료되면 코드 적용 범위를 코드 분위기로 밀어야 합니다. docs에 이어 이름이 CC_TEST_REPORTER_ID인 저장소에 secret을 생성한 후 다음 구성을 추가해야 합니다.

  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
      - uses: paambaati/[email protected]
        env:
          CC_TEST_REPORTER_ID: ${{secrets.CC_TEST_REPORTER_ID}}
        with:
          coverageCommand: npx yarn test --coverage
          debug: true

엑스포에 예제 앱 게시

린트 및 테스트 작업 후에도 게시해야 합니다. 이번에는 expo/expo-github-action 을 사용할 것입니다. 작업docs에 따라 EXPO_CLI_USERNAME & EXPO_CLI_PASSWORD라는 이름으로 저장소의 비밀에 엑스포 사용자 이름과 암호를 추가해야 합니다.

If you have an organization, you can add it under the organization secrets and share it with all your repositories!

게시하는 첫 번째 단계는 yarn bootstrap 명령을 실행하는 것입니다. 그러나 다음 단계expo run는 example 디렉토리 내에서 실행되어야 합니다. 이를 위해 working-directory 구성을 사용합니다.

  publish:
    needs: [test, lint]
    name: Publish example app 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
      - working-directory: example
        run: expo publish

라이브러리의 예제 앱에 대해 게시된 페이지가 표시됩니다. 내 react-native-better-image 라이브러리의 페이지를 확인할 수 있습니다example app.

반음계에 스토리 게시

expo와 마찬가지로 chromatic에도 chromaui/action에서 사용할 수 있는 GitHub 작업이 있습니다. Chromatic에서 새 프로젝트를 만들고 프로젝트 토큰을 가져와야 합니다. 그런 다음 이름CHROMATIC_PROJECT_TOKEN으로 리포지토리의 비밀에 추가합니다.

스토리북이 이 디렉토리에 있기 때문에 예제 디렉토리 내에서 반음계 작업을 실행해야 합니다. chromaui/action에는 특정 디렉토리 내에서 실행할 수 있는 옵션이 없었습니다. 그래서 예제 앱의 package.json 파일 ﹣에 다음 스크립트를 수동으로 추가해야 했습니다.

"chromatic": "npx chromatic"

그런 다음 Chromatic ﹣을 수동으로 실행하는 다음 워크플로 구성을 추가했습니다.

  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 }}

스토리북을 정적 사이트로 게시

Netlify를 사용하여 스토리북을 정적 사이트로 게시했습니다. 처음에는 GH Pages를 사용할 계획이었지만 netlify에서 제공하는 원클릭 롤백 및 배포 미리 보기가 필요했습니다. 리포지토리 구축 및 미리 보기 배포를 자동으로 처리하는 Netlify app을 설치하여 작업 구성을 작성할 필요가 없었습니다.

라이브러리에 GitHub 페이지를 사용하려는 경우 이 용도로 Deploy to GitHub Pages 작업을 사용할 수 있습니다.

GitHub Actions를 통해 netlify로 배포를 구성하려는 경우 시도해 볼 수도 있습니다Netlify CLI.

이 빌드 워크플로는 두 라이브러리rex-state 및 react-native-better-image에서 활발히 사용됩니다.

포스팅에서는 리뷰 워크플로를 설정하는 방법에 대해 설명하도록 하겠습니다!