[Expo] 빌드 준비 (Google 설정 등) [2/5]

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

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

---

Google 설정

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

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

 

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

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

 

3. Google play 최초 설정

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

---

Expo 홈 설정

1. Expo 계정 설정

: Expo.dev에서 프로젝트 생성

 

---

프로젝트 설정

1. 프로젝트 내 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를 넣어야 함 (미입력시 에러발생)
    }
  },
});