[Expo] AWS Cloud 9을 이용하여 Expo 개발 환경 세팅하기

[Expo] AWS Cloud 9을 이용하여 Expo 개발 환경 세팅하기

2020. 11. 25. 22:51ㆍ리액트 네이티브/Expo

1. 머릿말

스타트업에 취업한 지 2주가 되간다. 취업준비생일 때는 주로 VSC(Visual Studio Code)를 이용했다. 그런데 취업 후, 회사에서는 나에게 Cloud9을 이용할 것을 요구했다. Aws Cloud9은 브라우저만으로 코드를 작성, 실행, 디버깅까지할 수 있는 클라우드 통합 개발 환경이다. 기본으로 NodeJS와 Git이 설치되어 있고, 웬만한 필수 도구가 사전에 패키징되어 있어 자바스크립트, 파이썬, PHP를 비롯한 프로그래밍 언어로 코드를 작성할 수 있다.

처음보는 개발환경은 무척이나 낯설었다. 특히 Aws는 한 번도 써보지 않았고, 평소에 굉장히 어렵다는 인식이 나에게 박혀있었기 때문에 거부감도 있었다. 하지만 이것저것 건드리면서 Cloud9을 써보니, 이 통합 개발 환경의 매력에 빠진 나를 발견할 수 있었다. Aws Cloud 9은 관리형 Amazon Ec2 인스턴스(리눅스 서버)에서 개발환경을 실행할 수 있는 유연성을 제공한다. 또한, Cloud 9은 클라우드 기반이기 때문에 성능에 영향을 받지 않는다. 하지만, 이는 높은 성능의 컴퓨터를 이용할 경우 좋은 하드웨어의 장점을 이용할 수 없다는 뜻도 된다.

리액트 네이티브 역시 한 번도 다뤄본 적이 없다. 그래도 리액트는 다뤄본 적이 있기 때문에 Hello World 프로젝트 정도는 금방 만들 수 있을 것이라 생각했다. 하지만 생각과 현실은 달랐다. QR코드를 인식하면 Hello, world라는 출력문구가 바로 뜰 줄 알았는데 네트워크 오류만 엄청나게 뜨더라. 3일 동안 구글링 작업을 한 끝에 드디어 Cloud9으로 Hello, World 문구를 출력할 수 있었다.

이번 포스팅은 나처럼 Cloud9을 이용하여 Expo 개발환경을 설정하는데 어려움을 느꼈던 사람에게 도움이 됐으면 한다.

2. 과정

먼저, Aws Cloud 9 콘솔로 접속해서 로그인을 해야한다. 아이디가 없으면 만들도록 하자. 나는 회사에서 받은 I AM 계정을 이용했다. 아마 개인 계정으로 이용하려면 요금을 내야하기 때문에, Cloud 9 대신 VSC 에디터를 쓸 것을 권장한다. 로그인을 했으면 Create environment를 눌러 클라우드 환경을 생성하도록 하자.

새 클라우드 환경의 이름과 소개를 입맛에 맞게 입력하자.

이름과 설명을 입력한 후 Next Step을 누르면 Configure 설정하는 페이지가 나온다. Environment type, Instance type, Platform, Cost-saving setting 네 가지를 입맛에 맞게 설정하면 된다.

Envrionment type

Create EC2 instance for environment(dicrect access): 환경 생성과 동시에 Ec2 인스턴스를 생성한다.
Create a new no-ingress EC2 instance for environment(access via Systems Manager): 안써봐서 모르겠다.
Create and run in remote server(SSH connection): 안써봐서 모르겠다.

Instance type

m5.large(8 GiB RAM + 2vCPU)를 선택하자. 왜냐하면 expo build 명령어로 apk파일을 생성할 때, 그 이하 인스턴스 타입의 경우 CPU용량(?)이 부족하다는 메세지를 만나게 된다.

Platform

입맛에 맞게 설정하자. 필자는 Amazon Linux를 선택했다.

Cost-saving setting

After 30 minutes(default)를 선택하자. 웹 브라우저가 모두 닫힌 후 Aws cloud9은 이 시간 동안 대기했다가 EC2 인스턴스를 종료함을 의미한다. 긴 기간을 선택할 수록 더 많은 요금이 발생할 수 있다는 점을 알아두도록 하자.

세팅을 완료했으면 Next Step을 누른 뒤, 설정한 조건을 확인 후 Create Environment 버튼을 눌러 Cloud9 환경을 생성하자.

헤더 메뉴를 보자. 맨 오른 쪽에 있는 Share 버튼 바로 왼쪽에 있는 프로필 단추([그림 3]에서는 동그란 M 위치)를 눌러 Manage EC2 Instance를 누르자. 그러면 EC2 인스턴스를 관리하는 페이지가 나온다. 맨 왼쪽에 있는 메뉴 중 볼륨을 눌러 방금 만들어진 인스턴스에 마우스를 갖다대고 오른쪽 버튼을 클릭한다. 클릭 후 나오는 메뉴 중 볼륨 수정을 누르면, SSD의 용량을 조절할 수 있는데 20기가 정도를 주자.

볼륨 수정 요청이 성공했다는 메세지를 봤다면, Cloud9으로 돌아간다. 그리고 터미널에 df -h 명령어를 입력하자. 아직 확장한 볼륨 용량이 적용되지 않은 것을 알 수 있다.

sudo growpart /dev/nvme0n1 1

sudo resize2fs /dev/nvme0n1p1

두 명령어를 쳐서 제한된 리소스를 풀어준다. 그리고 df -h를 다시 입력해서 볼륨이 확장되었는지 확인한다. 볼륨을 바로 확장하는 이유는 yarn과 expo-cli를 글로벌범위로 깔기 위해서다. 확장하지 않고, 두 패키지를 동시에 깔면 용량이 작아 깔리지 않는다.

이제 npm install -g expo-cli yarn을 입력해서 두 패키지를 설치하도록 하자. 설치 후에 expo init [프로젝트 이름] 명령어를 입력해서 blank로 설정하여 expo 프로젝트를 생성하자. cd testapp[프로젝트 명]을 입력하면 expo 프로젝트 폴더로 이동됨과 동시에 .git 폴더가 깔려있기 때문에 마스터 브런치로 인식된다. yarn start를 입력하면 QR 코드가 뜸과 동시에 App.js가 실행되지만, EC2 인스턴스에서 19000대 포트를 열어주지 않고, 또한 REACT_NATIVE_PACKAGER_HOSTNAME 환경 변수 값을 설정해주지 않았기 때문에, Expo 앱으로 QR 코드를 인식하면 네트워크 오류가 뜬다.