App Center에서 React Native iOS 빌드 구성

아티클
07/19/2023

중요

Visual Studio App Center는 2025년 3월 31일에 사용 중지될 예정입니다. Visual Studio App Center가 완전히 사용 중지될 때까지 계속 사용할 수 있지만 마이그레이션을 고려할 수 있는 몇 가지 권장 대안이 있습니다.

지원 타임라인 및 대안에 대해 자세히 알아보세요.

App Center는 React Native 버전 0.34 이상으로 작성된 React Native 앱을 빌드할 수 있습니다.

iOS용 React Native 앱을 빌드하려면 다음을 수행합니다.

리포지토리 서비스 계정(예: Azure DevOps, Bitbucket, GitHub 또는 VSTS)에 연결합니다.
앱이 있는 리포지토리 및 분기를 선택합니다.
빌드의 프로젝트 또는 작업 영역과 빌드하려는 체계를 구성합니다.

참고

앱이 실제 디바이스에서 실행되려면 빌드가 유효한 프로비저닝 프로필 및 인증서로 서명된 코드여야 합니다.

1. 리포지토리 연결

먼저 리포지토리 서비스 계정을 App Center에 연결합니다. 계정이 연결되면 iOS 프로젝트가 있는 리포지토리를 선택합니다. 리포지토리에 대한 관리자 및 끌어오기 권한이 있어야 합니다.

2. 분기 선택

리포지토리를 선택한 후 빌드할 분기를 선택합니다. 기본적으로 모든 활성 분기가 나열됩니다.

3. 첫 번째 빌드 설정

첫 번째 빌드 전에 React Native 프로젝트를 구성해야 합니다.

3.1. Project

프로젝트의 package.json를 선택합니다. App Center는 연결된 Xcode 프로젝트/작업 영역을 자동으로 검색합니다.

3.2. Xcode 버전

드롭다운 목록에서 빌드를 실행할 Xcode 버전을 선택합니다. "레거시 빌드 시스템 사용" 토글이 On인 경우 레거시 빌드 시스템은 프로젝트 또는 작업 영역 설정에 관계없이 사용됩니다. "레거시 빌드 시스템 사용" 토글이 Off이면 프로젝트 또는 작업 영역 설정의 빌드 시스템 구성이 사용됩니다.

참고

작업 영역 설정은 리포지토리에 커밋되어야 합니다.
작업 영역 설정이 커밋되지 않으면 최신 빌드 시스템이 사용됩니다.

3.3. Node.js 버전

빌드에 사용할 Node.js 버전을 선택합니다. Node.js 버전을 선택하는 방법에 대해 자세히 알아보기

3.4. 빌드 트리거

기본적으로 개발자가 구성된 분기에 푸시할 때마다 새 빌드가 트리거됩니다. 새 빌드를 수동으로 트리거하려는 경우 구성 창에서 이 설정을 변경할 수 있습니다.

3.5. 증분 빌드 번호

사용하도록 설정 CFBundleVersion 하면 앱의 프로젝트 Info.plist 에 있는 가 각 빌드에 대해 자동으로 증가합니다. 변경 내용은 빌드 전 발생하며 리포지토리에 커밋되지 않습니다.

3.6. 코드 서명

빌드가 성공하면 .ipa 파일이 생성됩니다. 디바이스에 빌드를 설치하려면 빌드에 유효한 프로비저닝 프로필 및 인증서로 서명해야 합니다. 분기에서 생성된 빌드에 서명하려면 구성 창에서 코드 서명을 사용하도록 설정하고 인증서의 암호 와 함께 프로비전 프로필(.mobileprovision 파일) 및 유효한 인증서(.p12)를 업로드합니다.

Xcode 프로젝트의 설정은 업로드 중인 파일과 호환되어야 합니다. App Center의 iOS 코드 서명 및 Apple 개발자 설명서에 대해 자세히 알아보세요.

앱 또는 watchOS 확장을 사용하여 앱에 서명하려면 확장당 추가 프로비저닝 프로필이 필요합니다.

3.7. 실제 디바이스에서 성공적인 빌드 시작

새로 생성된 .ipa 파일을 사용하여 앱이 실제 디바이스에서 시작되는지 테스트합니다. 시작 테스트는 총 빌드 시간에 약 10분을 더 추가합니다. 시작 테스트를 구성하는 방법에 대해 자세히 알아보세요.

3.8. CocoaPods

App Center는 선택한 분기를 검사하고 Podfile을 찾으면 모든 빌드의 시작 부분에서 자동으로 단계를 수행 pod install 합니다. 이렇게 하면 모든 종속성이 설치됩니다.

3.9. 메일 그룹에 배포

분기에서 성공한 각 빌드를 이전에 만든 배포 그룹에 배포하도록 구성합니다. 배포 섹션 내에서 새 메일 그룹을 추가합니다. 앱에 액세스할 수 있는 모든 사용자를 포함하는 "협력자"라는 기본 메일 그룹이 항상 있습니다.

구성을 저장하면 새 빌드가 자동으로 시작됩니다.

4. 결과 빌드

빌드는 다음 상태 중 하나일 수 있습니다.

queued - 사용 가능한 리소스를 기다리는 빌드가 큐에 추가됩니다.
building - 빌드가 실행 중이며 미리 정의된 작업을 실행합니다.
성공 - 빌드가 성공적으로 완료됨
실패 - 빌드가 실패했습니다. 빌드 로그를 다운로드하고 검사하여 무엇이 잘못되었는지 문제 해결
canceled - 빌드가 사용자 작업을 통해 취소되었거나 시간 초과됨

4.1. 빌드 로그

완료된 빌드(성공 또는 실패)의 경우 로그를 다운로드하여 빌드가 어떻게 진행되었는지 자세히 알아보세요. App Center는 다음 파일이 포함된 보관 파일을 제공합니다.

|-- 1_build.txt (this is the general build log)
|-- build (this folder contains a separate log file for each build step)
    |-- <build-step-1> (e.g. 2_Get Sources.txt)
    |-- <build-step-2> (e.g. 3_Pod install.txt)
    |--
    |-- <build-step-n> (e.g. n_Post Job Cleanup.txt)

빌드 로그(보관의 디렉터리에 있음 build/ )는 빌드가 실패한 단계와 이유를 문제 해결 및 이해하는 데 유용합니다.

4.2. 앱(.ipa)

파일은 .ipa iOS 앱을 포함하는 iPhone 애플리케이션 보관 파일입니다.

빌드가 올바르게 서명된 경우 서명할 때 사용되는 프로비저닝 프로필에 포함된 실제 디바이스에 파일을 설치 .ipa 할 수 있습니다. App Center를 사용하여 코드 서명 및 배포에 대한 자세한 내용은 App Center의 iOS 코드 서명 설명서에서 확인할 수 있습니다.
빌드 중에 빌드가 서명되지 않은 경우 개발자는 파일에 서명 .ipa 하거나(codesign을 사용하여 로컬로) 다른 용도로 사용할 수 있습니다(예: 실제 디바이스에서 UI 테스트를 위해 테스트 서비스에 업로드하거나 시뮬레이터에서 실행).
서명되지 않은 빌드는 파일을 생성 .ipa 하지 않습니다. 서명되지 않은 빌드의 아티팩트 는 .xcarchive Xcode Archives 구성 도우미를 .ipa 사용하여 파일을 생성하는 데 사용할 수 있는 파일입니다.

4.3. 소스 맵 및 기호 파일

React Native iOS 앱을 빌드하면 JavaScript 원본 맵과 하나 이상의 .dsym 파일이 각 빌드와 함께 자동으로 생성되며 빌드가 완료되면 다운로드할 수 있습니다.

이전에 앱에서 크래시 보고 모듈을 사용하도록 설정한 App Center SDK를 통합한 경우 크래시 보고 비콘에는 이 .dsym 파일과 빌드에 대한 JavaScript 원본 맵이 있어야 사람이 읽을 수 있는(기호화된) 충돌 보고서를 표시할 수 있습니다.
이전에 앱에서 크래시 보고를 위해 다른 SDK를 통합한 경우 해당 서비스에는 사람이 읽을 수 있는(기호화된) 크래시 보고서를 표시하기 위해 파일 및 JavaScript 소스 맵이 필요합니다 .dsym .

파일은 .dsym 코드 서명 .ipa시 변경되지 않습니다. 나중에 .dsym 빌드에 코드를 서명하기로 결정한 경우 코드 서명 전에 생성된 가 여전히 유효합니다.

이 앱에 크래시 SDK가 포함된 경우 iOS 기호 및 원본 맵이 App Center 크래시 서비스로 전송됩니다. 기호를 사용하면 네이티브 및 JavaScript 스택 모두에서 사람이 읽을 수 있는(기호화된) 크래시 보고서를 사용할 수 있습니다.

5. 빌드 팁

5.1. Yarn

Yarn 은 에 대한 더 빠르고 결정적인 대체입니다 npm. yarn.lock 파일이 옆에 package.json있는 리포지토리에 있는 경우 App Center는 빌드 시작 시 Yarn yarn install 을 사용합니다. 그렇지 않으면 을 수행합니다 npm install.

5.2. 사용자 지정 빌드 스크립트

App Center의 기본 빌드 명령이 실행되기 전에 스크립트를 실행하기 위한 몇 가지 옵션이 있습니다.

프로젝트 파일에 사후 설치 스크립트를 package.json 만듭니다. 종속성이 설치된 후 자동으로 실행됩니다.
```
  "scripts": {
    ...
    "postinstall" : "eslint ./" // other examples: "node ./postinstall.js" or "./postinstall.sh"
  },
```

App Center의 사용자 지정 빌드 스크립트 기능을 사용하여 셸 스크립트를 작성합니다.

#!/usr/bin/env bash

# Example: Authenticate with private NPM registry
echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc

# Example: Create a file that's not in version control (from base64 encoded environment variable)
base64 -d <<< "$MY_FILE_CONTENTS" > ios/SuperSecretFile.txt

다음을 통해 공유