이 문서는 하이브리드(React Native) 모바일 앱을 빌드하고 배포하기 위한 GitLab DevSecOps 워크플로 솔루션에 대한 지침 및 기능적 세부 정보를 제공합니다.

fastlane을 사용하는 네이티브 모바일 애플리케이션의 경우 제품 문서를 참조하세요.

이 지침에는 react-native-community/cli를 사용하여 부트스트랩된 샘플 React Native 애플리케이션이 포함되며, iOS 및 Android 기기 모두에 크로스 플랫폼 솔루션을 제공합니다. 샘플 프로젝트는 GitLab CI/CD 파이프라인을 사용하여 모바일 애플리케이션을 빌드, 테스트 및 배포하기 위한 엔드투엔드 솔루션을 제공합니다.

시작하기#

GitLab을 사용하여 모바일 애플리케이션 배포를 빠르게 시작하려면 이 React Native 모바일 앱 샘플 프로젝트를 사용하는 방법에 대한 다음 단계를 따르세요.

솔루션 구성 요소 다운로드#

1. 계정 팀에서 초대 코드를 받습니다.
2. 초대 코드를 사용하여 솔루션 구성 요소 웹 스토어에서 솔루션 구성 요소를 다운로드합니다.

솔루션 구성 요소 프로젝트 설정#

• Product Accelerator 마켓플레이스에서 모바일 앱 솔루션 구성 요소를 다운로드했습니다. 솔루션 팩에는 CI/CD 파일이 있는 모바일 앱 샘플 프로젝트가 포함되어 있습니다.

• 환경에서 Snyk 구성 요소를 호스팅하기 위한 새 GitLab CI/CD 카탈로그 프로젝트를 만듭니다. 모바일 앱 솔루션 팩에는 Snyk CI/CD 카탈로그 프로젝트를 설정할 수 있는 Snyk CI/CD 구성 요소 프로젝트 파일이 포함되어 있습니다.

  1. 이 Snyk CI/CD 카탈로그 프로젝트를 호스팅할 새 GitLab 프로젝트를 만듭니다.
  2. 제공된 파일을 프로젝트에 복사합니다.
  3. 프로젝트 설정에서 필요한 CI/CD 변수를 구성합니다.
  4. 프로젝트가 CI/CD 카탈로그 프로젝트로 표시되어 있는지 확인합니다. 자세한 내용은 구성 요소 프로젝트 게시를 참조하세요.

  [!note] SaaS를 사용하고 GitLab.com의 공개 GitLab Snyk 구성 요소에 액세스할 수 있는 경우, 자체 Snyk CI/CD 카탈로그 프로젝트를 설정할 필요가 없으며, GitLab.com의 공개 GitLab Snyk 구성 요소 문서를 따라 구성 요소를 직접 사용할 수 있습니다.

• 변경 제어 워크플로를 ServiceNow 솔루션 팩과 함께 사용하여 GitLab과의 DevOps Change Velocity 통합을 구성하여 변경 제어가 필요한 배포를 위한 ServiceNow의 변경 요청 생성을 자동화합니다. ServiceNow와의 변경 제어 워크플로 솔루션 구성 요소 문서를 참조하고, 계정 팀과 협력하여 ServiceNow와의 변경 제어 워크플로 솔루션 패키지를 다운로드하기 위한 액세스 코드를 받습니다.

• CI YAML 파일을 프로젝트에 복사합니다:

  • .gitlab-ci.yml
  • pipelines 디렉토리의 build-android.yml. build-android.yml 파일이 /pipeline이 아닌 다른 위치에 있는 경우 .gitlab-ci.yml의 파일 경로를 업데이트해야 합니다. 기본 .gitlab-ci.yml 파일이 빌드 job을 위한 build-android.yml 파일을 참조하기 때문입니다.
  • pipelines 디렉토리의 build-ios.yml. build-ios.yml 파일이 /pipeline이 아닌 다른 위치에 있는 경우 .gitlab-ci.yml의 파일 경로를 업데이트해야 합니다. 기본 .gitlab-ci.yml 파일이 빌드 job을 위한 build-ios.yml 파일을 참조하기 때문입니다.

  include:
    - local: "pipelines/build-ios.yml"
      inputs:
        image: macos-15-xcode-16
        tag: saas-macos-medium-m1
    - local: "pipelines/build-android.yml"
      inputs:
        image: reactnativecommunity/react-native-android
  

• 프로젝트 설정에서 필요한 CI/CD 변수를 구성합니다. 파이프라인 작동 방식을 알아보려면 다음 섹션을 참조하세요.

파이프라인 작동 방식#

이 파이프라인은 iOS 및 Android 빌드, 모바일 앱 테스트 및 배포를 처리하는 React Native 프로젝트용으로 설계되었습니다.

이 프로젝트에는 iOS 및 Android 모두에 대한 React Native 빌드를 위한 간단한 reactCounter 데모 앱이 포함되어 있습니다. 이 버전은 아직 아티팩트에 서명하지 않으므로 TestFlight 또는 Play Store에 업로드할 수 없습니다.

각 변경은 시맨틱 버전 업 구성 요소를 사용하며, 해당 버전은 패키지 레지스트리에 일반 패키지를 커밋하는 데 사용되는 임시 변수로 저장됩니다.

파이프라인 구조#

파이프라인은 다음 Stage 및 job으로 구성됩니다:

1. prebuild
   • unit test
   • Snyk scans
2. build
   • build IoS package
   • build Android package
3. test
   • dependency scanning
   • SAST scanning
4. functional-test
   • upload_ios/android_app_to_sauce_labs
   • automated_test_appium_saucelabs
5. app-distribution
   • app_distribution_sauce_android
   • app_distribution_sauce_ios
6. beta-release
   • beta-release-dev
   • beta-release-approval

필수 요건#

모바일 파이프라인 워크플로에는 여러 서드파티 도구가 통합되어 있습니다. 파이프라인을 성공적으로 실행하려면 다음 필수 요건을 갖추어야 합니다.

구성 요소를 사용한 Snyk 통합#

보안 스캔을 위해 GitLab Snyk CI/CD 구성 요소를 사용하려면 GitLab의 그룹 또는 프로젝트가 이미 Snyk와 연결되어 있는지 확인합니다. 그렇지 않은 경우 이 튜토리얼을 따라 구성하세요.

모바일 앱 프로젝트에 Snyk 통합을 위한 필수 변수를 추가합니다.

필수 CI/CD 변수#

이 모바일 앱 데모 프로젝트는 프라이빗 Snyk 구성 요소를 사용합니다. 그래서 모바일 앱 프로젝트가 프라이빗 Snyk 구성 요소 프로젝트에 액세스하기 위한 다음 추가 변수를 추가했지만, Snyk 구성 요소가 공개이거나 그룹 내에서 액세스 가능한 경우에는 필요하지 않습니다.

SNYK_PROJECT_ACCESS_USERNAME: "MOBILE_APP_SNYK_COMPONENT_ACCESS"
DOCKER_AUTH_CONFIG: '{"auths":{"registry.gitlab.com":{"username":"$SNYK_PROJECT_ACCESS_USERNAME","password":"$SNYK_PROJECT_ACCESS_TOKEN"}}}'

구성 요소 경로 업데이트#

파이프라인이 Snyk 구성 요소를 성공적으로 참조할 수 있도록 .gitlab-ci.yml 파일의 구성 요소 경로를 업데이트합니다.

 - component: $CI_SERVER_FQDN/gitlab-com/product-accelerator/work-streams/packaging/snyk/snyk@1.0.0 #snky sast scan, this examples uses the component in GitLab the product accelerator group. Please update the path and stage accordingly.
    inputs:
      stage: prebuild
      token: $SNYK_TOKEN

Sauce Labs 통합#

이 모바일 앱 데모 프로젝트 CI/CD는 자동화된 기능 테스트를 위해 Sauce Labs와 통합되어 있습니다. Sauce Labs에서 자동화된 테스트를 실행하려면 애플리케이션을 Sauce Labs 앱 스토리지에 업로드해야 합니다. GitLab의 프로젝트에 Sauce Labs에 액세스하고 아티팩트를 업로드하기 위한 필수 변수를 설정해야 합니다.

필수 CI/CD 변수#

자동화 테스트를 위한 Appium 사용#

SauceLabs를 자동화 테스트에 사용하려면 앱을 SauceLab 앱 관리에 업로드해야 합니다. 파이프라인은 API 엔드포인트를 사용하여 앱을 SauceLabs에 업로드하고 테스트에 사용할 수 있게 합니다.

WebdriverIO 및 Sauce Labs를 사용하여 React Native 모바일 애플리케이션을 테스트하기 위한 Appium 테스트 스크립트 파일을 tests/appium에 추가했습니다. 테스트 스크립트는 다음 환경 변수를 사용하여 SauceLabs에 액세스합니다.

# 프로젝트에 정의된 변수 사용

const SAUCE_USERNAME = process.env.SAUCE_USERNAME;
const SAUCE_ACCESS_KEY = process.env.SAUCE_ACCESS_KEY;

앱 배포 (Android 및 iOS)#

GitLab 파이프라인은 데모 목적으로 SauceLabs TestFairy에 앱 빌드를 배포합니다. SauceLabs TestFairy를 사용하면 사용자가 검토 및 테스트를 위해 테스터에게 새 버전의 앱을 제공할 수 있습니다.

ServiceNow 통합#

이 모바일 앱 데모 프로젝트 CI/CD는 변경 제어를 위해 ServiceNow와 통합되어 있습니다. 파이프라인이 ServiceNow에서 변경 제어가 활성화된 배포 job에 도달하면 변경 요청을 자동으로 만듭니다. 변경 요청이 승인되면 배포 job이 재개됩니다. 이 데모 프로젝트에서 베타 릴리스 승인 job은 ServiceNow에서 게이트되며 진행하기 위한 수동 승인이 필요합니다.

CI/CD 변수#

파이프라인이 ServiceNow와 통신하려면 웹훅 통합을 만들어야 합니다. ServiceNow와 통신하기 위해 API 엔드포인트를 사용하는 경우 다음 변수를 포함해야 합니다. 그러나 ServiceNow DevOps Change Velocity 통합을 사용할 때는 필요하지 않습니다. ServiceNow DevOps Change Velocity 온보딩의 일환으로 웹훅이 만들어집니다.

포함된 파일 및 구성 요소#

모바일 앱 프로젝트 파이프라인에는 여러 외부 구성 및 구성 요소가 포함됩니다:

• iOS 및 Android에 대한 로컬 빌드 구성
• SAST (정적 애플리케이션 보안 테스트) 구성 요소
• 자동 시맨틱 버전 관리 구성 요소
• 의존성 스캔
• Snyk SAST 스캔 구성 요소

참고 사항#

솔루션 구성 요소에 액세스하기 위한 초대 코드를 얻거나 추가 질문이 있는 경우 계정 팀에 문의하세요.