React Native 프로젝트를 위한 CI/CD 파이프라인 설정 가이드

React Native는 JavaScript와 React 라이브러리를 사용하여 크로스 플랫폼 모바일 앱을 개발하는 데 널리 사용되는 프레임워크입니다. 이 글에서는 React Native 프로젝트를 위한 CI/CD 파이프라인을 설정하는 방법에 대해 다룹니다. 이를 통해 코드 작성과 사용자에게 제공되는 시간 사이를 줄일 수 있습니다.

 

React Native 프로젝트를 위한 CI/CD 파이프라인 설정 가이드

 

CI/CD 파이프라인이란?

개요

지속적 통합(Continuous Integration)과 지속적 전달/배포(Continuous Delivery/Deployment, CI/CD)는 코드 작성과 배포 사이의 시간을 줄이는 것을 목표로 하는 소프트웨어 개발 방법론입니다. 이 방법론은 코드 변경 사항을 자동으로 빌드, 테스트 및 배포하는 과정을 포함합니다. 이를 통해 개발자는 새로운 기능과 버그 수정을 신속하게 사용자에게 전달할 수 있습니다.

 

주요 도구

CI/CD 파이프라인을 설정하기 위해 다음과 같은 다양한 도구를 사용할 수 있습니다:

• CircleCI
• Jenkins
• TravisCI
• GitLab CI/CD
• GitHub Actions

 

이 글에서는 CircleCI를 사용한 설정 방법을 중점적으로 다룹니다. 하지만 여기서 논의된 원칙은 다른 CI/CD 도구에도 동일하게 적용할 수 있습니다. 또한, 이 글에서는 yarn을 사용하지만, npm으로도 동일한 작업을 수행할 수 있습니다.

 

CircleCI 설정

CircleCI 계정 생성 및 설정

CircleCI를 사용하여 CI/CD 파이프라인을 설정하려면 먼저 CircleCI 웹사이트에 등록해야 합니다. 그런 다음, React Native 앱의 루트 디렉터리에 circleci 디렉터리를 생성하고 그 안에 config.yml 파일을 추가해야 합니다. 이 파일에는 코드 빌드 및 테스트 지침이 포함됩니다. 다음은 기본 config.yml 파일의 예시입니다.

 

config.yml 예제

이 config.yml 파일에는 빌드 작업만 정의되어 있으며, 다음 작업을 수행합니다:

1. 리포지토리의 코드를 다운로드합니다.
2. yarn을 사용하여 프로젝트 요구 사항을 설치합니다.
3. yarn test를 사용하여 테스트 스위트를 실행합니다.
4. yarn build를 사용하여 앱의 프로덕션 버전을 생성합니다.

jobs:
  build:
    docker:
      - image: circleci/node:12
    steps:
      - checkout
      - run: yarn
      - run: yarn test
      - run: yarn build

 

 

빌드, 테스트, 배포

리포지토리에 변경 사항을 푸시할 때마다 CircleCI가 자동으로 코드를 빌드하고 테스트합니다. CircleCI 대시보드에서 빌드 상태와 로그를 확인할 수 있습니다. 빌드가 성공하면 코드를 배포할 수 있습니다.

배포 메커니즘 및 대상 플랫폼(iOS 또는 Android)에 따라 React Native 앱을 배포하는 다양한 방법이 있습니다. 일반적으로 사용되는 옵션은 다음과 같습니다:

• AppCenter
• Fastlane
• AWS Amplify

 

이 글에서는 AppCenter를 사용하여 iOS 및 Android 앱을 각 앱 스토어에 배포하는 방법을 다룹니다.

 

 

AppCenter 설정

AppCenter 계정 생성 및 설정

AppCenter 계정을 생성한 후, 앱의 이름, 패키지 이름 및 빌드 스크립트와 같은 세부 정보를 포함하여 설정 지침을 따릅니다. 또한, Android의 경우 Keystore, iOS의 경우 프로비저닝 프로파일 및 서명 인증서를 업로드해야 합니다. 이 과정이 번거로울 수 있으므로, 필요한 인증서, 프로비저닝 프로파일 및 키스토어를 생성하는 단계별 가이드를 준비했습니다.

 

iOS 앱을 위한 서명 인증서 및 프로비저닝 프로파일 생성

iOS 앱을 위한 서명 인증서 및 프로비저닝 프로파일을 생성하려면 다음 단계를 따릅니다:

1. Apple Developer 계정에 로그인합니다: developer.apple.com/account/
2. "Certificates, Identifiers & Profiles" 섹션으로 이동합니다.
3. "Certificates" 섹션에서 "+" 버튼을 클릭하여 새로운 인증서를 생성합니다.
4. 생성할 인증서 유형을 선택합니다:
5. 지침에 따라 서명 인증서를 생성합니다. 먼저, Mac의 Keychain Access 유틸리티를 사용하여 CSR(Certificate Signing Request) 파일을 생성해야 합니다.
6. 인증서가 발급되면 다운로드하여 Keychain에 설치합니다.
7. "Identifiers" 섹션에서 앱에 대한 새로운 식별자를 생성합니다. 예: com.example.myapp과 같은 역방향 DNS 스타일 문자열을 선택합니다.
8. "Provisioning Profiles" 섹션에서 "+" 버튼을 클릭하여 새로운 프로비저닝 프로파일을 생성합니다.
9. 생성할 프로비저닝 프로파일 유형을 선택합니다:
10. 지침에 따라 프로비저닝 프로파일을 생성합니다. 이전에 생성한 서명 인증서와 앱 식별자를 선택해야 합니다.
11. 프로비저닝 프로파일이 생성되면 다운로드하여 Xcode에 설치합니다.

 

Android 앱을 위한 Keystore 생성

Android 앱을 위한 Keystore를 생성하려면 다음 단계를 따릅니다:

1. 개발 머신에서 터미널 또는 명령 프롬프트를 엽니다.
2. Keystore 파일을 생성할 디렉토리로 이동합니다.
3. 다음 명령어를 실행하여 새로운 Keystore 파일을 생성합니다:

keytool -genkey -v -keystore my-keystore.jks -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

 

1. Keystore와 키에 대한 비밀번호를 입력합니다. 이 비밀번호는 앱 서명 시마다 필요하므로 안전하게 보관해야 합니다.
2. 개인 정보를 입력합니다(예: 이름, 조직 등). 이 정보는 앱의 인증서에 포함됩니다.
3. Keystore가 생성되면 빌드 구성에 Keystore와 키 별칭을 지정하여 Android 앱을 서명할 수 있습니다.

 

이제 AppCenter를 설정하여 빌드를 앱 스토어에 업로드할 준비가 되었습니다. 다음 명령어를 config.yml 파일에 추가하여 CircleCI 파이프라인에 AppCenter를 통합할 수 있습니다:

  - run:
      name: Install AppCenter CLI
      command: |
        npm install -g appcenter-cli
  - run:
      name: Deploy to AppCenter (Android)
      command: |
        appcenter login --token $APPCENTER_TOKEN
        appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.apk --group "Collaborators" --release-notes "Automatic deployment from CircleCI"
  - run:
      name: Deploy to AppCenter (iOS)
      command: |
        appcenter login --token $APPCENTER_TOKEN
        appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.ipa --group "Collaborators" --release-notes "Automatic deployment from CircleCI"

 

 

이 예제에서는 AppCenter CLI를 사용하여 AppCenter에 로그인하고 app-release.apk 및 app-release.ipa 파일을 배포합니다. CircleCI 대시보드에서 $APPCENTER_TOKEN 및 $CIRCLE_ARTIFACTS 환경 변수를 설정해야 합니다.

배포 명령어는 필요에 따라 수정할 수 있습니다. 예를 들어, 사용자에게 직접 배포하는 대신 App Store 또는 Play Store에 배포하려면 다른 배포 그룹이나 릴리즈 노트를 제공해야 합니다.

 

 

결론

이 글에서는 CircleCI 및 AppCenter를 설정하여 React Native 프로젝트를 위한 CI/CD 파이프라인을 구축하는 방법에 대해 다뤘습니다. 이를 통해 빌드, 테스트, 배포 과정을 자동화하여 시간과 노력을 절약할 수 있으며, 새로운 기능과 버그 수정을 더욱 빠르고 일관되게 사용자에게 제공할 수 있습니다.

모든 단계를 직접 수행하지 않고 react-native-ci 패키지를 사용하여 CircleCI 설정을 자동화할 수도 있습니다. 그러나 이 패키지는 여전히 실험적이며, 다음과 같은 특정 스택에 의존합니다:

• GitHub
• CircleCI
• 개발, 스테이징 및 프로덕션 빌드 플레버