React Native Expo publish로 외부에서 사용할 테스트 QR코드 페이지 만들기

Expo publish

React Native Expo 프로젝트는 QR 코드를 생성해서 프로젝트를 실행시켜볼 수 있는 Expo publish라는 기능이 있습니다.

 

만약에 외부 업체 사람들에게 보여줄 필요가 있다면 테스트용으로 보여줄 때 좋겠죠? :)

 

먼저 Expo의 publish란 무엇인지 알아보겠습니다.(공식문서 : https://docs.expo.dev/archive/classic-updates/publishing/)

 

설명을 하자면 exp.direct는 터널링으로 사용하는 도메인이라서 같은 LAN에 있지 않은 다른 사용자와 공동 작업 중인 프로젝트를 전송할 수 있고 액세스할 수 있다고 합니다. 다만 컴퓨터에서 번들러 및 개발 서버가 실행되고 있으므로 노트북을 끄거나 Expo CLI를 중지하면 해당 URL에서 프로젝트를 로드할 수 없습니다.

 

Expo publish 실행법

 

expo publish하는 방법은 해당 프로젝트를 열고 터미널에서 명령어를 실행해줍니다.

expo publish

install에 y를 눌러주고 기다린다면 Mainfest를 생성하고 해당 Mainfest를 볼 수 있는 페이지와, 생성된 프로젝트의 QR코드를 볼 수 있는 Project page를 생성해줍니다.

expo publish를 완료한 모습

 

이렇게 publish 하고나서 Expo 사이트에 로그인해보면 Project에 아까 publish한 프로젝트가 올라가있습니다

 

그리고 자동으로 Expo가 생성해준 Mainfest를 살펴보겠습니다.

 

Mainfest 페이지 생성 규칙

https://exp.host/@(사용자Expo아이디)/(프로젝트명)/index.exp?sdkVersion=(ExpoSDK버전)

터미널에서 생성된 url을 클릭하면 나오는 Mainfest

 

Project page 페이지 생성 규칙

https://expo.dev/@(사용자Expo아이디)/(프로젝트명)?
serviceType=(설정한 serviceType)&distribution=(설정한 distribution)

- serviceType 기본설정 : classic

- distribution 기본설정 : expo-go

터미널의 url을 클릭하면 나오는 QR코드가 있는 Project page

 

그리고 QR코드 하단의 Advanced options을 클릭하면 이렇게 추가적인 옵션이 존재한다.

다른 옵션들에 대해서는 나중에 기회가 된다면 따로 작성하겠습니다

 

이 ProjectPage에 들어가면 나오는 QR코드를 카메라 어플로 스캔하면 Expo앱으로 실행됩니다. (스캔한 핸드폰에 Expo 앱이 없다면 실행되지 않습니다)

저는 안드로이드 카메라 어플로 scan해서 실행했어요!

 

 

장점 

네트워크가 달라도 프로젝트를 실행할 수 있어요. 실행한 사진을 보시면 아시겠지만 저는 데이터를 사용했고 publish한 프로젝트는 와이파이를 사용하고 있었습니다. 그냥 로컬에서 expo 앱을 통해서 실행하면 원래 프로젝트가 안되겠지만 이런 식으로 하면 expo 앱만 설치해서 누구든지 해당 프로젝트를 쉽게 실행할 수 있어요. 

 

단점

위에서 언급했던 내용이지만 expo publish했던 서버가 종료되면 생성된 QR코드를 스캔하거나 url 접속을 한다고 하더라도 실행되지 않습니다.

저는 제 개인 pc로 expo publish를 하고나서 그 직후에는 제대로 앱이 정상적으로 실행되었지만 나중에 pc를 한번 종료하고 나서는 계속 실행되지 않았습니다.

이 화면이 1시간이 지나도 계속 그대로 입니다

 

즉, expo publish를 하신다면 서버가 많이 종료되는 개인 pc보다는 별도의 서버에서 실행하시는 게 더 좋을 거 같습니다.

 

현재 expo publish의 경우 정상적으로 실행되지만 EAS Update라는 기능이 새로 된 만큼 나중에 EAS Update에 관해서 또 정리해서 포스팅 하겠습니다.

 

참고

- Mainfest 관련 공식 문서 : https://github.com/expo/fyi/blob/main/manifest-url.md

- Project page 관련 공식 문서 : https://github.com/expo/fyi/blob/main/project-page.md