소개

내가 모바일 응용 프로그램 개발에 있어서의 첫 번째 체험은reactnative with Expo를 사용하는 것이다. (Expo가 소스 플랫폼인 것을 모르면 자바스크립트와 React를 사용하여 안드로이드, iOS, 웹을 위해 통용되는 본체 응용 프로그램을 만들 수 있다. 이것은 자바나 swift를 이해하지 않아도 본체 응용 프로그램을 만들 수 있다는 것을 의미한다.
React의 배경에서 왔습니다. 적응하고 파악하기 쉽습니다.나는 핸드폰에서 미리 보기와 실시간으로 응용 프로그램을 다시 불러오는 능력에 대해 매우 인상적이다. 마치 웹 응용 프로그램처럼 엑스포에서 제공한 핸드폰 하드웨어와 상호작용하는 소프트웨어 패키지도 있다.나는 이 모든 개선이 개발 과정에서의 속도와 질을 향상시키는 데 도움이 된다고 생각한다.
그러나 발표 과정은 이상적이지 않다.초보자로서 나는 각 응용 상점에 게시되고 업로드되는 개념에 대해 곤혹스러움을 느낀다.이 외에도 모든 새 버전에는 고급 엔지니어가 필요합니다.

출시 시간

변경 사항을 임시 채널로 게시

스테이션 기능이 제대로 작동하는지 테스트

Expo의 turtle Cli 인스턴스로 응용 프로그램 구축

30분, 각 응용 프로그램의 바이너리 파일 완성 대기 (iOS 및 Android)

Testflight/Google 스토어에 파일 업로드

더 간단한 방법으로 프로그램을 업데이트할 수 있다면?나는 기존의 절차를 개선하여 테스트와 발표 과정의 자동화를 확보하고 싶다.
다음 글은 두 부분으로 나뉘는데 먼저 지속적인 통합(응용 테스트와 발표 PR 심사)을 구축하는 방법을 소개하고, 두 번째 부분은 당신의 엑스포 프로젝트에 GitHub 조작을 사용하여 지속적으로 배치하는 방법을 소개할 것입니다.

통합 솔루션

내가 GitHub actions를 CI/CD로 사용한 지 이미 한참이 되었다. 이것은 숙주 달리기를 허용하는 데 여러 가지 기능이 있을 뿐만 아니라 지역 사회가 하는 일련의 조작도 곁들였다.그것은 모든 공공 저장소에 무료이며, 이것은 우리 프로젝트의 매우 매력적인 선택이 되었다.
Expo는 워크플로우에서 Expo 명령을 실행할 수 있도록 expo/expo-github-action라는 이름GitHub action tool도 제공합니다.이것은 우리가 모든 것이 정상적임을 확보하기 위해 모든 버전의 코드를 발표하고 심사할 수 있다는 것을 의미한다.

Expo 배포 설정

시작하기 전에 응용 프로그램을 발표하려면 sign up for an Expo account 이 필요합니다.그런 다음 나중에 사용할 수 있도록 이러한 자격 증명을 안전한 GitHub 기밀 저장소에 저장해야 합니다.EXPO_CLI_USERNAME 및 EXPO_CLI_PASSWORD 변수를 사용하는 것을 권장합니다.너는 찾을 수 있다how to store secrets on the GitHub documentation site.
현재 사용자 테스트용 Expo 애플리케이션만 게시할 예정입니다.단, 어플리케이션 배포 및 업로드에 대한 자세한 지침은 here on the Expo site 을 참조하십시오.

유닛 테스트 및 연결 실행

테스트는 반드시 없어서는 안 될 것이다. 그 목적은 소프트웨어 코드의 모든 단원이 예상대로 실행되는지 검증하고 엔지니어가 생산하기 전에 가능한 한 빨리 오류를 발견하여 후기에 원가와 생산력을 절약하도록 돕는 것이다.
우선, 우리는 .github/workflows 디렉터리를 만들어서 그 안에 모든 작업 흐름을 저장해야 한다.
다음 예제를 보일러 템플릿으로 사용하여 각 당김 요청에 대해 자동으로 테스트를 수행할 수 있습니다.

name: Deploy Branch Preview

on: [pull_request]

jobs:
  test:
    name: Lint & Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Cache Node Modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-   
            ${{ runner.os }}-build- 
            ${{ runner.os }}-
      - name: Install Packages
        run: npm install
      # Peform a type check if you are using typescript
      - name: Typecheck
        run: npx --no-install tsc --noEmit
      - name: Check Lint
        run: npm run lint
      - name: Test
        run: npm run test -- --coverage

리셋 링크는 글 아래에서 찾을 수 있습니다

자동화된 PR 배포

나는react 원생 개발 과정에서 특히 유용한 것은 어떤 코드를 전송하기 전에 코드 심사에서 응용 프로그램을 발표하고 검사하는 것을 좋아하고 발견했다.이것은 나로 하여금pull 요청에서 변경한 것을 더욱 잘 이해하고 더 좋은 심사를 제공할 수 있게 한다.
다음 코드는 Exponent 서버에서 PR 검토 버전을 게시하는 작업입니다.

  deploy_branch_preview:
    name: Deploy Branch Preview
    needs: test
    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-packager: npm
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
          expo-cache: true
      - name: Cache Node Modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Install Packages
        run: npm install
      - name: Expo Publish Channel
        run: expo publish --non-interactive --release-channel pr${{ github.event.number }}
      - name: Add Comment To PR
        uses: mshick/add-pr-comment@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          EXPO_PROJECT: "@justussoh/github-actions-expo-boiler-template" # Put in your own Expo project name here
        with:
          message: |
            ## Application
            ![Expo QR](https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=exp://exp.host/${{ env.EXPO_PROJECT }}?release-channel=pr${{ github.event.number }})
            Published to https://exp.host/${{ env.EXPO_PROJECT }}?release-channel=pr${{ github.event.number }}

리셋 링크는 글 아래에서 찾을 수 있습니다
배포는 항상 모든 사람에게 고정된 URL을 만들어서 응용 프로그램을 엽니다.여기서, 나는 QR 생성기를 사용하여 프로그램의 링크에서 QR을 휘젓는다. 이 프로그램은 누구나 쉽게 검사할 수 있도록pull 요청에 대한 설명을 할 것이다.
Expo 클라이언트 응용 프로그램을 사용하여 QR 코드를 스캔하여 응용 프로그램을 시작할 수 있습니다.

임시 환경에 게시

효율을 최대한 높이기 위해서, 우리는pull 요청을 마스터에 통합한 후에 임시 저장 환경에 배치할 수 있도록 조작을 설정할 수 있습니다. 이것은 생산에 발표하기 전에 항상 존재하는 임시 저장 환경입니다.
코드는 상대적으로 홍보 활동과 유사하기 때문에 파일 here 을 연결합니다.

결론

위의 몇 가지 부분에서 우리는 사용자 테스트를 위해 테스트를 실행하고 응용 프로그램을 발표하는 데 도움을 주는 튼튼한 CI를 실현했다.응용 프로그램의 버전을 공중 업데이트하기 위해 응용 상점에 발표하는 방법을 설명해 드리겠습니다.만약 당신이 완전한 환매 협의를 보고 싶다면, 아래에 링크하세요.

회사 명 / github actions expo boiler 템플릿

엑스포와 GitHub의 협력

이것은 dev.to 게시물에서 설명한 예시이며, 더 많은 상세한 정보는 곧 제공될 것이다.
View on GitHub