[React Native Tutorial] React Native + Expo + Android Emulator on Windows (feat. GCP)

이전 게시글에서 VM을 만들고 guacamole로 window vm에 접속하는 방법을 배웠다. 이제부터는 android emulator를 돌리기 위한 과정을 밟을 것이다.

https://hyelie.tistory.com/entry/Deploy-Window-Server-on-WEB-using-guacamole-feat-GCP?category=947331

Windows RDP through WEB using guacamole + code-server (feat. GCP)

 

1. 가상화 적용해서 GCP VM 만들기

일반 window VM의 경우 가상화 기능이 꺼져 있다. 따라서 가상화를 켜야 한다... VM을 새로 만들자.

 

https://cloud.google.com/community/tutorials/setting-up-an-android-development-environment-on-compute-engine

Set up an Android development environment on Compute Engine  |  Google Cloud Platform Community

 

 

 

2. Window 접속 후 설치할 것들

Chrome 설치

powershell에 아래 명령어를 입력하면 된다.

(new-object System.Net.WebClient).DownloadFile('http://dl.google.com/chrome/install/375.126/chrome_installer.exe', $env:TEMP+'\chrome.exe'); start $env:TEMP\chrome.exe

 

NVM 설치

아래 링크에서 .exe 파일을 찾아 설치하면 된다.

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

 

nvm이 설치되었다면 아래 명령어를 입력해서 16.17.0 (lts)버전 node를 설치한다.

nvm install 16.17.0
nvm use 16.17.0

 

 

2. react native + expo + android studio 설치

react native + expo 설치

expo-cli를 설치하면, expo 자체에 react-native의 dependency가 있어 자동으로 설치된다. 아래 명령어로 설치하고, 임시 프로젝트를 만들고 해당 프로젝트를 빌드해 보자.

# expo cli 설치
npm install -g expo-cli

# 프로젝트 만들기
expo init AwesomeProject

# 해당 프로젝트로 이동
cd AwesomeProject

# 프로젝트 실행
expo start

 

프로젝트를 실행하게 되면 아래와 같은 화면이 나온다. 이 화면의 QR 코드를 휴대폰에서 찍으면 그 앱이 돌아간다.

 

android studio 설치

공식 홈페이지에서 다운, 설치한다. 

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

 

주어진 대로 쭉쭉 깔다 보면 어느 새 다 깔려있다. 다 깔았다면 안드로이드 sdk의 환경변수 설정을 해야 한다. sdk 매니저를 찾아 들어가서 위에 있는 Android SDK Location를 복사해서 환경변수 path에 붙여넣는다.

 

아무 플젝 열어서 접속하고, 우측에 있는 휴대폰 버튼 누르고 에뮬 시작 누르면 된다. 드디어 된다.