[EXPO(react-native-create-app) 프로젝트 배포] 1. EXPO를 이용한 배포 과정 살펴보기
안녕하세요, 주니어 개발자 한유덕입니다.
회사에 들어오고 나니, 좋은 개발자들의 영입이 절실한 상황이었습니다. 물론연봉 많이 주고, 엄청난 비전을 보여줄 수 있다면 좋겠지만 현실적으로 어렵다는 생각이 들었습니다. 그래서 제 나름대로 어떻게 우리 회사에 오고자 하는 마음을 들게 할 수 있을까 고민하다가, 저희가 어떤 업무를 하고 있고 어떤 전문성을 가진 회사인지를 기술 블로그를 통해 알리면 좋겠다는 생각에 기술 블로그를 만들게 되었습니다.
이제 막 현업에서 배우기 시작하는 초보 개발자이기에 부족한 점들이 많겠지만, 저와 같이 아무 것도 모르는 상태에서 시작하는 누군가에게는 도움이 될 것이라 믿습니다. 만약 잘못되었거나 고쳐야하는 부분이 있다면 언제든 피드백 보내주시면 감사하겠습니다.
제가 입사하고 처음 맡게 된 임무는 기존에 개발된 web app을 react-native를 통해 감싸서 mobile app으로 만드는 것이었는데요. react를 조금 다뤄보긴 했습니다만, 실무에서 적용할 수준은 아닌 초보였으므로 좌충우돌이 많았습니다.
이번 포스팅에서는 react-native로 만들어진 mobile app을 play store, app store에 배포하는 방법을 알려드릴텐데요. 이 과정에서 필수적으로 이해해야 할 부분이 android와 ios의 인증서 구조체계입니다. 이 부분은 양이 방대하기에 또 다른 포스팅에서 설명합니다. 천천히 차근차근 따라오시면 여러분들도 충분히 해내실 수 있으실 겁니다.
EXPO가 뭐죠? 먹는 건가요?
먼저 ‘expo’라는 것에 대해 설명드려야 하겠죠?
react-native는 react를 기반으로 만들어졌습니다. react는 초보자들을 위해 각종 패키지를 모두 세팅해놓은 상태에서 프로젝트를 시작할 수 있도록 react-create-app이라는 라이브러리를 제공합니다. 이 라이브러리를 사용하면 환경설정을 할 필요없이 꼭 필요한 패키지를 설정해놓은 새로운 프로젝트를 생성하여 프로젝트를 시작할 수 있습니다. 마찬가지로 react-native에서도 환경설정이 된 상태에서 새로운 프로젝트를 시작할 수 있는 react-native-create-app이라는 라이브러리를 제공하고 있었는데요. expo는 이 라이브러리를 사용하여 프로젝트를 진행할 때 android simulator, ios emulator 혹은 실제 device에서 프로젝트를 실행하게 해주고, 마지막에는완성된 프로젝트를 build 하여store에 배포할 때 필요한 standalone file( .apk, .ipa)들을 만들어주는 도구였습니다. 그런데 얼마전 react-native-create-app 라이브러리가 expo랑 아얘 통합되면서 이름도 expo로 변경되었어요. 이제는 expo가 react-native-create-app이라고 생각하시면 됩니다. 즉, expo는 react-native 초보자들을 위해 빠르게 새로운 프로젝트를 시작할 수 있게 해주는 도구라는 말이죠! react-native를 새롭게 시작하시는 분이라면 expo로 시작하시면 됩니다 😁
참고 : 위의 standalone file이라 함은 네트워크 연결없이 실제 기기에 설치하여 실행할 수 있는 파일을 말합니다.
expo는 국문 자료가 별로 없지만 document가 워낙 친절하게 나와있어서 초보자분들도 쉽게 접근하실 수 있을 거에요. (네, 물론 저는 영알못이라 어려웠습니다. 번역기 돌리면서 열심히 해석했습니다…)
EXPO 배포 과정
일단 expo에서 배포를 하기 위한 과정은 다음과 같습니다.
- 완성된 프로젝트를 build하여 standalone software 파일(android는
.apk, ios는.ipa)로 변환
(여기서 standalone software는 네트워크 연결없이 오프라인에서도 작동하는 소프트웨어를 말합니다. 또한 이 과정에서 android, ios에 대한 인증서 지식이 필요합니다. 관련 포스트 바로가기) - build 후 만들어진
.apk,.ipa파일을 실제 기기 혹은 android simulator, ios emulator에서 테스트 - play store, app store에 등록 및 배포
- 지속적인 업데이트
본격적으로 배포 과정 살펴보기
전체적인 과정을 눈에 익히셨다면, 과정 하나하나를 살펴볼까요? 혼란을 줄이기 위해 아래의 공식 문서와 같은 순서로 진행해보겠습니다.
터미널을 이용해 프로젝트 폴더 안의 경로에 진입합니다.
Install Expo CLI
expo cli는 expo app을 개발하고 빌드하기 위한 툴입니다. 이 툴을 설치해야 build에 필요한 expo로 시작하는 많은 명령어들을 사용할 수 있습니다.
npm install -g expo-cliConfigure app.json
expo init your-project-name 으로 생성한 프로젝트의 app.json폴더를 수정하여 배포에 대한 환경 설정을 합니다.
{
"expo": {
"name": "Your App Name",
"icon": "./path/to/your/app-icon.png",
"version": "1.0.0",
"slug": "your-app-slug",
"sdkVersion": "XX.0.0",
"ios": {
"bundleIdentifier": "com.yourcompany.yourappname"
},
"android": {
"package": "com.yourcompany.yourappname"
}
}
}만약 ios, android 둘 다 배포하는 것이 아니라 하나만 한다면 플랫폼에 맞게 ios나 android 속성 중 하나만 작성해도 무방합니다. ios, android 배포 옵션에 대한 링크는 아래에서 참조하시길 바랍니다.
Start the build
이제 build를 하여 standalone 파일을 만들어 낼 차례입니다.
만약 .ipa파일을 만들 것이라면 expo build:ios 를, .apk파일을 만들 것이라면 expo build:android 를 입력합니다.-c 옵션을 입력하면 캐시를 삭제하므로 기존의 인증서 정보를 지운 후 다시 입력할 수 있습니다.
이렇게 입력하면 명령어가 ios인지 android인지에 따라 다음과 같이 다른 문구가 나옵니다.
ios
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...[exp] No currently active or previous builds for this project.
? How would you like to upload your credentials?
(Use arrow keys)
❯ Expo handles all credentials, you can still provide overrides
I will provide all the credentials and files needed, Expo does no validation
android
[exp] No currently active or previous builds for this project.Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :) 1) Let Expo handle the process!
2) I want to upload my own keystore!
잘 읽어보시면 아실 수 있겠지만, 말 그대로 인증서 관련 문제를 expo에 맡길 건지 직접 설정할 건지를 묻는 부분인데요. ios든 android든 1번을 선택하면 배포에 필요한 인증서 관련 파일들을 expo가 모두 새로 만들어서 등록해줍니다. 만약 app store나 play store에 등록한 적이 없는 새로운 프로젝트라면 expo에게 맡겨도 되겠지만, 기존에 배포된 적이 있는 프로젝트거나 인증서를 새로 생성할 수 없는 상황이라면 직접 인증서를 다운받아 키체인에 넣은 후, 2번을 선택하여 경로를 지정해줘야 합니다. (app store의 경우는 production 인증서 개수 제한이 있습니다. ios, android 인증서 관련 부분은 여기서 보실 수 있습니다.)
아래 스크린 샷은 ios 기준인데요. apple store ID, password, ios 배포 인증서 .p12파일, 푸시 알람 인증서 .p12파일, 프로비저닝 .mobileprovision파일이 순서대로 필요한 것을 알 수 있습니다. 이 파일들 중에 만료된 인증서가 있거나, 현재 앱과 연관되지 않은 파일이 있다면 build가 실패합니다.
android는 play store ID, password, .jks인증서 파일이 필요합니다. ios와 마찬가지로 해당 앱에 맞는 고유한 인증서인 .jks파일이 유효하지 않다면 build가 실패합니다.
ios, android 인증서 체계와 관련된 내용은 이 곳에서 확인하세요!
Wait for it to finish building
이제 build가 모두 끝나기를 기다립니다.
build가 모두 완료되면 터미널 윈도우에 expo.io/builds/some-unique-id 와 같은 형식으로 url이 출력되는데요. 이 url을 클릭하여 브라우저로 열면 build가 완료된 .apk파일 혹은 .ipa파일을 다운받을 수 있습니다.
Test it on your device or simulator
이제 이 파일을 테스트 해 볼 차례인데요.
android같은 경우는 이메일을 이용하여 .apk파일을 다운 받은 후 설치하여 직접 기기에서 테스팅이 가능합니다. 이 경우에 USB 디버깅 허용해주는 것 잊지마세요!
ios 같은 경우도 Testflight을 이용하여 실제 기기에서 테스트가 가능합니다. 다만 android와 다른 것이 있다면 .ipa파일은 이메일로 전송이 불가능합니다. 따라서 실제 ios 디바이스에서 testflight 어플리케이션을 설치하고, 컴퓨터에서 .ipa파일을 testflight을 등록한 후 ios 디바이스에서 이 어플리케이션을 다운받는 형식으로 테스트가 가능합니다.
Submit it to the appropriate store
정상적으로 테스팅이 완료되었다면 .ipa파일은 app store에, .apk파일은 play store에 배포하면 됩니다. 이 과정도 쉽지 않겠죠? 내용도 추가적으로 포스팅하여 올린 후 링크를 첨부해두도록 하겠습니다.
Update your app
이제 배포가 완료되었습니다! 여러분이 만든 앱을 play store, app store에서 모두 다운로드 받으실 수 있을 거에요. 그런데 이 앱의 업데이트는 어떻게 할까요? 원래대로라면 앱의 파일이 조금이라도 변경 될 때마다 위의 과정을 모두 반복하여야하겠지만, react-native는 그럴 필요가 없습니다. OTA update방식을 채택하고 있거든요. 쉽게 말하면 배포할 때 expo의 자체 서버에 프로젝트의 모든 파일이 저장되고, 제작자가 JS파일을 바꾼 후 expo를 통해 publish를 누르면 JS파일만 대체해서 앱을 업데이트 합니다. 새로 standalone파일들을 만들어서 각 스토어에 재등록할 필요가 없는 거죠! 정말 엄청난 장점이 아닐수 없습니다. 하지만 JS파일이 아닌 것들을 바꾸게 된다면 어쩔 수 없이 다시 standalone파일을 생성해서 배포해야만 합니다. 😨 관련 내용은 아래 링크에서 참고하실 수 있습니다.
글을 마치며
사실 expo에 대한 배포는 그리 어려운 과정은 아니었습니다. 저의 경우는 처음 접하는 ios, android 인증서 체계를 이해하고 expo가 원하는 조건에 맞추어 제공하는 데에서 시간을 많이 쏟았거든요. 아마 한 번도 앱 개발을 해보신 분이 아니라면, 저와 마찬가지로 이 부분에서 여러움을 겪으실 것이라 생각합니다. 다음 포스팅에서는 이 ios, android인증서체계 설명과 함께 app store, play store에 배포하는 방법을 들고 찾아오도록 하겠습니다.
긴 글 읽어 주셔서 감사합니다! 🙏🏻
만약 위의 내용에 대해 이해가 되지 않는 부분이 있으시거나 수정해야할 부분을 발견하셨다면 주저없이 댓글 남겨주시거나 아래 이메일로 피드백주시면 감사하겠습니다.
