[Expo] 빌드 및 배포 [1/5]

728x90

목표

: Expo로 제작한 React-native앱을 빌드 및 배포

공식문서 : https://docs.expo.dev/submit/android/

시리즈 (일반 : 2번 ~ 4번 | 심화 : 5번)

빌드 및 배포 전체메모 : 현재 글
빌드 준비 (Google 설정 등) : https://radpro.tistory.com/464
일반 로컬 빌드 및 Google Play 배포 (Expo 빌드) : https://radpro.tistory.com/466
EAS(Expo Application Sevice) 자동화 : https://radpro.tistory.com/463
Git Actions 연결 : https://radpro.tistory.com/465

준비

1. Google Developer 유료 계정 생성 (약 3만원 / 1회만) [ Google Play Console 가입 페이지 ]

: 계정 생성 후 첫 앱 등록 (임의로 생성가능)

2. Google 서비스 계정 생성 및 JSON 비공개키 다운로드 [ Google 서비스 계정 ]

: API 사용설정 후 IAM 및 관리자의 서비스 계정에서 키 탭으로 들어가 키추가를 통해 JSON키를 생성

3. Google play 최초 설정

: 최초 앱 설정 (설명 링크)

4. Expo 계정 설정

1) Expo.dev에서 프로젝트 생성

5. 프로젝트 내 app.json 또는 app.config.js 파일 설정 (공식문서)

1) app.json의 경우 코드 스니펫

{
  "expo": {
    "name": "앱이름",                                    // 앱이름
    "slug": "Expo.dev에 만들어둔 프로젝트의 slug명",       // Expo.dev페이지에서 만든프로젝트 slug명
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/playerIcon.png",    // 원하는 icon 경로
    "userInterfaceStyle": "light",
    "extra": {
      "eas": {
        "projectId": "7cc8c45a-b351-4cd8-ad96-b77149886be1"      // Expo.dev에 만들어둔 프로젝트의 Id
      }
    },
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "packagerOpts": {
      "port": 53833
    },
    "ios": {
      "supportsTablet": true,                           // ios 빌드 설정 부분
      "bundleIdentifier": "com.nyong.dsplayer",         // com.본인기관이름.서비스명
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {                                   // android 빌드 설정 부분
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF",
      },
      "package": "com.nyong.dsplayer",                  // com.본인기관이름.서비스명
      "versionCode": 1,
      "permissions": [
        "CAMERA",
        "READ_EXTERNAL_STORAGE"
      ]
    },
    "web": {
      "favicon": "./assets/playerIcon.png"
    },
    "description": "D's player. (only firebase data, Only video)"
  }
}

2) app.config.js의 경우 입력되어야 할 코드

module.exports = ({ config }) => ({
  name: config.name,
  slug: "SLUG_FROM_EAS",
  extra: {
    eas: {
      projectId: "PROJECT_ID_FROM_EAS"   // <== 여기에는 Expo.dev에 만든 본인의 프로젝트 Id를 넣어야 함 (미입력시 에러발생)
    }
  },
});

6. 필요시 Git Actions 연동

1) 공식문서에 따라 update.yml파일을 만든다. (공식문서)

/* 1. 프로젝트 루트에 다음 경로로 파일 생성 */
.github/workflows/update.yml

/* 2. update.yml 파일 내용. 그대로 복붙 */
name: update
on: push

jobs:
  update:
    name: EAS Update
    runs-on: ubuntu-latest
    steps:
      - name: Check for EXPO_TOKEN
        run: |
          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
            exit 1
          fi

      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: 16.x
          cache: yarn

      - name: Setup Expo
        uses: expo/expo-github-action@v7
        with:
          expo-version: latest
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Find yarn cache
        id: yarn-cache-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Restore cache
        uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: ${{ runner.os }}-yarn-

      - name: Install dependencies
        run: yarn install --immutable

      - name: Publish update
        run: eas update --auto

2) Expo에서 EXPO_TOKEN을 만든다. 이름은 맘대로 만들어도 무방하다. (생성 링크)

3) 프로젝트 Github 레포지토리에서 Setting => Secrets => Actions에 들어가서 EXPO_TOKEN을 등록한다.
이때, 이름은 EXPO_TOKEN, 값은 2번에서 만든 Access-token값으로 저장한다.

* 주의할 점 : 로컬에서 eas login이 안되어 있거나, app.json파일에 protect_id값이 올바르게 입력되지 않으면

아래의 에러가 발생한다.

* 주의할 점 : app.json에는 Expo에 성절한 slug이름과 ID값을 확인하여 slug명을 입력해야한다.

(Expo.dev 에서 해당 프로젝트의 Overview 들어가서 확인 가능)

* 주의할 점 : app.json혹은 app.config.js 둘중 하나만 있어야 한다. (두개로 나누면, 둘 중 하나만 인식하여 오류발생)

error: project config: slug for project identified by "extra.eas.projectid"

error: project config: slug for project identified by "extra.eas.projectid" (앱이름) does not match the "slug" field

7. 프로젝트 빌드 방법 (일반 | 공식문서)

// expo가 처음에만 실행
npm install -g expo-cli
npx create-expo-app my-app

// eas설치
npm install -g eas-cli

// eas 로그인 (회원가입 필요)
eas login

// congigure 빌드
eas build:configure

// 일반 빌드 (apk 혹은 app.bundle로 빌드 가능. 로컬테스트는 apk | Google play에 배포시에는 app.bundle)
expo build:android

// eas로 빌드 = 서버에서 빌드 및 배포 (안드로이드 | ios | 전체 | 혹은 eas build 후 선택 가능)
eas build --platform android
eas build --platform ios
eas build --platform all

*주의할 점 : 빌드 중 다음과 같은 에러가 발생하면 Expo사이트에 있는 Build탭에 들어가서 에러 로그를 확인해보자

Error: Gradle build failed with unknown error. See logs for the "Run gradlew" phase for more information.

만약 Run gradlew 탭 에러로그 중 맨 밑에 다음과 같은 에러로그가 있다면, 안드로이드 스튜디오에서

프로젝트 구조에서 JDK를 JDK11로 변경 및 저장해야한다.

Execution failed for task ':react-native-firebase:compileReleaseJavaWithJavac'.

또한 아래의 명령어를 로컬 프로젝트에서 실행해줘야 한다.

yarn add --dev jetifier
yarn run jetify

과정

1. Google Developer 유료 계정 생성

2. Google 서비스 계정 생성(설명 링크) 및 JSOM 비공개키 다운로드

3. Google Play Console에서 앱 만들기 후 수동 앱 업로드(설명 링크)

4. EAS CLI 설치 및 Expo계정 인증

npm install -g eas-cli
eas login

5. 로컬 프로젝트에서 빌드

: 빌드가 완료되면 링크가 나오며, 다운로드가 가능하다.

: 링크를 통해 Expo.dev창으로 가면, 빌드한 파일의 Options에서 Submit to an app store로 배포 시작

: 아래와 같은 명령어가 뜨며, 로컬 프로젝트 터미널에 입력

npm install --global eas-cli
eas submit --platform android --url https://exp-shell-app-assets.s3.us-west-1.amazonaws.com/android/%40neoguri/dsplayer-00000000000000000000000000000000-signed.apk

: 아래와 같은 안내가 나오면, Google cloud flatform에서 생성한 IAM 키 파일 이름을 입력해 줘야함.

키 파일은 상단의 [준비2]단계에서 받은 json파일로, 프로젝트 루트경로에 넣어주고, 해당 파일 이름 넣으면 됨

A Google Service Account JSON key is required to upload your app to Google Play Store.
If you're not sure what this is or how to create one, learn more: https://expo.fyi/creating-google-service-account
√ Path to Google Service Account file:

*API 키 종류가 많아 헷갈릴 수 있으니 아래의 순서로 들어가 발급받은 키JSON파일을 사용하면된다.

1) Google Play Developer console

2) 모든 앱

3) 사이드 바에 있는 설정 => API 액세스

4) API키 보기

5) 서비스 계정 => 이메일 클릭

6) 상단의 키 탭 => 키 추가 => JSON 생성

6. 만약 JSON 키 파일을 잘못 입력했을 경우, Expo.dev홈의 Credencial탭에서 해당 프로젝트를 선택 후 변경 가능

1) Google Service Account Key에서 등록된 파일을 지우고 새로 업로드하면됨

2) 만약 FCM(Firebase Cloud Messaging)을 사용한다면, Firebase에서 발급받은 토큰값을 업로드해줘야 함

(JSON형식의 키파일을 받아 올릴 수도 있으나, FCM v1이 지원안된다는 에러가 발생하므로 토큰입력 권장)

(Firebase 홈 => 해당 프로젝트 => 프로젝트 개요 옆 설정아이콘 => 프로젝트 설정 => 클라우드 메시징 => 서버키 토큰)

728x90

저작자표시 비영리 변경금지

'React-native > 정리' 카테고리의 다른 글

[Expo] 빌드 준비 (Google 설정 등) [2/5] (0)	2023.01.01
[Expo] EAS 자동 빌드 (CI/CD) [4/5] (0)	2023.01.01
Youtube search 기능 구현하기 (진행중) (0)	2022.06.19
iframe API - videoID로 연속재생 구현하기 [2편 임의의 keys로 된 JSON] (0)	2022.06.17
iframe API - videoID로 연속재생 구현하기 [1편 Index로 된 JSON] (0)	2022.06.16

목표

시리즈 (일반 : 2번 ~ 4번 | 심화 : 5번)

준비

과정

'React-native > 정리' 카테고리의 다른 글

티스토리툴바