Kasm-Desktop에 React-Native 개발환경(Android) 구성하기

언젠간 정리해야지 싶었는데, 미루고 미루다 이제야 정리를 합니다 ㅎㅎ;;

포스팅을 쓰는 게 쉽지 않네요 (핑계일 뿐이지만!)

쉽지 않은 문제를 해결하고 나선 포스팅을 반드시 하는 습관을 길러야겠습니다. 그래야 기록으로도 유용하게 쓰일 테니까요:)

 

이번엔 저번 포스팅에서 다루었던 Kasm-Desktop 위에 React-Native 개발환경을 구성한 방법에 대해서 다루려 합니다.

역시나 많은 시행착오가 있었습니다 ㅎㅎ;

Kasm-Desktop 환경을 어떻게 구성했는지 궁금하시다면 아래에 링크를 읽어보심이 좋을 듯합니다.

https://movingjin.tistory.com/46

Synology NAS 에 Kasm-Desktop (VDI)구성하기

 

VDI환경에서 React-Native 개발환경 구성순서는 아래순서로 진행했습니다.

1. Kasm-Desktop VDI 환경구성

2. React-Native 환경구성(in Kasm)

3. Android 가상머신 이미지생성 (in NAS)

4. React-Native App실행

---

1. Kasm-Desktop VDI 환경구성

이전 VDI구성 포스팅에선 sudo 명령어가 설치되지 않았었는데, 제가 사용했던 버전의 kasmweb/ubuntu-bionic-desktop 이미지는 sudo명령어가 설치되지 않는 듯합니다.

대신, ubuntu 엔진이 좀 더 최신버전인 kasmweb/desktop 에선 원활히 설치가 되던 것을 확인했습니다.

Kasm-Desktop에 React-Native 개발환경을 구성하기 위해 사용한 Dockerfile은 아래와 같습니다.

FROM kasmweb/desktop:1.14.0-rolling
USER root

ENV HOME /home/kasm-default-profile
ENV STARTUPDIR /dockerstartup
ENV INST_SCRIPTS $STARTUPDIR/install
WORKDIR $HOME

######### Customize Container Here ###########
RUN apt upgrade -y

RUN  apt-get update \
    && apt-get install -y sudo \
    && echo "root:sh110930sh35!" | chpasswd \
    && echo 'kasm-user ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers \
    && rm -rf /var/lib/apt/list/* \
    && apt-get install -y uim uim-byeoru \
    && apt-get install -y xrdp && adduser xrdp ssl-cert

RUN  add-apt-repository ppa:openjdk-r/ppa \
    && apt-get update \
    && apt-get install -y openjdk-17-jdk \
    && add-apt-repository ppa:maarten-fonville/android-studio \
    && apt-get update \
    && apt-get install -y android-studio

RUN  apt-get install -y software-properties-common apt-transport-https \
    && curl -sSL https://packages.microsoft.com/keys/microsoft.asc | apt-key add - \
    && add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" \
    && apt-get update \
    && apt-get install -y code

RUN  add-apt-repository ppa:mmk2410/intellij-idea -y \
    && apt-get install intellij-idea-community -y

RUN  sudo apt install python3-pip -y \
    && curl -s https://s3.eu-central-1.amazonaws.com/jetbrains-ppa/0xA6E8698A.pub.asc | gpg --dearmor | sudo tee /usr/share/keyrings/jetbrains-ppa-archive-keyring.gpg > /dev/null \
    && echo "deb [signed-by=/usr/share/keyrings/jetbrains-ppa-archive-keyring.gpg] http://jetbrains-ppa.s3-website.eu-central-1.amazonaws.com any main" | sudo tee /etc/apt/sources.list.d/jetbrains-ppa.list > /dev/null \
    && apt update \
    && apt install pycharm-community -y

RUN  apt-get install -y mariadb-client
######### End Customizations ###########

RUN chown 1000:0 $HOME
RUN $STARTUPDIR/set_user_permission.sh $HOME

 

Dockerfile을 보시면, 주석으로 표기한 Customize Container Here 부분부터

개발에 필요한 패키지를 입맛에 맞게 추가로 설치한 것을 확인할 수 있습니다. 한 가지 단점이라면, 패키지가 늘어갈수록 빌드되는 속도는 비례해서 늘어납니다ㅎㅎ

개인에게 필요한 패키지를 추가로 설치하시거나 필요 없는 부분은 빼면 되지 싶습니다:)

저는 Project 디렉터리나 개인설정을 저장하기 위해 $Home경로를 마운트 volme으로 지정했습니다.

Kasm-Desktop VDI 구성은 위 Dockerfile 하나로 끝낼 수 있겠네요:)

---

2. React-Native 환경구성(in Kasm)

Kasm-Desktop 이미지를 만드셨다면, Kasm-Desktop에 React-Native 개발환경을 구성할 필요가 있습니다.

필요한 프로그램은

• NVM
• AndroidStudio
• VSCode
• React-Native CLI

사실, 위 Dockerfile엔 React-Native 구성에 필요한 AndroidStudio와 VSCode가 들어있어 위 Dockerfile을 그대로 활용하신다면, 이 두 개는 이미 설치되어 있을 겁니다! :)

 

그럼, NVM을 설치해 보도록 하겠습니다.

NVM은 NodeJS를 효율적으로 version관리할 수 있는 패키지입니다.

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ source ~/.bashrc

Kasm-Desktop은 우분투를 기반으로 하기 때문에 우분투 설치명령어를 사용합니다.

$ nvm --version

설치확인은 위 명령어로 확인합니다.

version 정보가 출력된다면 성공적으로 설치가 된 것입니다.

$ nvm install 16.20.2

NVM을 설치하셨다면, nvm 명령어를 통해 NodeJS와 NPM까지 설치해 보겠습니다.

$ node --version

NodeJS가 성공적으로 설치되었다면, version 정보가 출력될 것입니다.

 

$ npm install -g react-native-cli

위 명령어로 React-Native를 빌드하기 위한 패키지 react-native-cli를 설치하겠습니다.

 

AndroidStudio를 설치한 이유는 SDK와 ADB(Android Debug Brige)로 가상머신과 연결하기 위함입니다.

export ANDROID_HOME="/home/kasm-user/Android/Sdk"
export PATH="$PATH:$ANDROID_HOME/emulator"
export PATH="$PATH:$ANDROID_HOME/platform-tools"

AndroidStudio가 설치되었다면 cli로 sdk와 adb를 이용하기 위해 ~/.bashrc에 위와 같이 환경변수를 추가해 줍니다.

 

이것으로 Kasm-Desktop에서 React-Native 개발환경 설치는 끝났습니다.

---

3. Android 가상머신 이미지생성 (in NAS)

로컬 PC에서 React-Native를 구성했다면 android emulator를 사용해 개발하겠지만, Kasm-Desktop은 환경자체가 docker container에서 구동되기 때문에 가상머신인 emulator는 구동되지 않습니다! ㅠ

하지만, 다른 방법으로 우회해 사용할 수 있어요!

HostOS에 Android 가상머신을 구동하는 방법입니다.

Kasm-Deskop에서 구동 중인 React-Native 앱은 이 가상머신과 연결되어 빌드되는 것이죠!

 

우선 가상머신을 만들 Android 이미지를 아래링크에서 다운로드합니다.

https://sourceforge.net/projects/android-x86/files/

android-x86 - Browse Files at SourceForge.net

현재기준, 9.0 버전이 가장 최신 이미지네요.

 

Synology VMM으로 들어가서 새로운 가상머신을 만들겁니다.

우리는 Android를 설치하지만, Microsoft Windows를 선택해 설치를 진행합니다.

 

알맞은 저장소를 선택하신 뒤,

 

CPU와 메모리는 필요한 만큼 할당해 주면 되는데, 저는 NAS가 여유가 있는 편이라 넉넉하게 주었습니다.

톱니바퀴를 눌러 Hyper-V Enlightenments 활성화를 체크해 주시고, 예약된 CPU를 하나 두고 가중치를 보통이상으로 둡니다.

 

디스크 크기도 넉넉하게 주고,

 

다운로드한 ISO 이미지를 부팅용 ISO파일로 지정하고 설치를 진행합니다.

 

이미지설치가 완료되었다면, ISO 이미지를 실행시켜 Anroid OS를 설치할 차례입니다. (과정이 꽤나 기네요 ㅎㅎ;;)

설치된 이미지를 선택 후, "연결" 버튼으로 접속합니다.

 

우리는 만들어진 가상이미지 위에 설치할 것이기 때문에 3번째 항목인 Install... to Harddisk를 방향키로 선택합니다.

 

어느 파티션에 설치할 것인지를 묻습니다.

최초설치로 인해 파티션이 없으므로 첫 번째 Create... partitions를 선택합니다.

 

No를 선택하시면 됩니다.

 

총 32기가가 할당된 것을 볼 수 있고, 파티션을 만들어야 하기 때문에 좌측하단에 "New"를 선택합니다.

 

Primary로 선택하시고, Primary가 최대사이즈인 32G로 잡혀있을 텐데, 그대로 Enter를 누릅니다.

 

하단 "Write"로 완전히 저장하시고,

 

"yes"를 입력해 포맷에 동의하고 계속진행합니다.

 

새로운 파티션이 만들어졌으므로 "Quit"를 눌러 뒤로 이동합니다.

 

방금 만든 새로운 파티션으로 설치를 진행합니다.

 

파일포맷은 "ext4"를 선택합니다.

이후, 모두 "YES"를 선택해 설치를 진행합니다.

 

설치가 완료되고 나면, VMM에서 "연결" 버튼을 통해 브라우저로 접속해 볼 수 있습니다.

 

하지만, 이대로는 반응속도가 느려서 사용하기에 많이 답답할 수 있습니다.

속도개선을 위해 Android의 해상도를 낮춰서 반응속도를 높일 겁니다!

부팅된 Android 가상머신을 종료 후, 부팅시킵니다.

부팅되자마자 "연결" 버튼으로 접속 후, 빠르게 shift 버튼을 연타해 Boot mode를 선택할 수 있는 grub쉘로 진입합니다.

이 화면에서 2번째 Debug mode를 선택해 부팅을 진행합니다.

 

몇 차례 진행이 완료된 이후에 enter를 입력해 command을 입력할 수 있는 쉘이 나타나도록 만듭니다.

이제 부팅 시 해상도를 선택할 수 있는 화면을 출력하도록 변경할 겁니다.

아래의 명령어를 순서대로 입력해 선택할 수 있는 해상도목록을 출력할 수 있도록 부팅옵션을 변경합니다.

$ mount -o remount, rw /mnt
$ cd /mnt/grub
$ vi menu.lst

 

우리가 수정할 건 7번째 줄입니다.
nomodeset vga=ask_... 부분에 원래는 quiet만 있을 건데, quiet을 지우고 ask_를 입력한 뒤 엔터를 눌러 저장합니다.

'b' 키를 눌러서 해당 옵션으로 부팅해 주면 video mode를 선택할 거냐는 질문이 나오는 우리는 해상도를 바꿔줄 거니 Enter를 입력해 진입합니다.

video mode로 진입하게 되면, 선택할 수 있는 해상도의 옵션이 출력되는데, 해상도 왼쪽에 있는 3자리 숫자는 해당 해상도를 가리키는 HEX 키입니다.

최적의 성능을 내기 위해 가로 해상도 800 이하 중, 32비트 컬러로 골라줍니다.

해당 HEX키를 입력 후, Enter를 입력해 부팅합니다.

저는 343 (800 * 600 * 32)를 선택했습니다.

선택한 HEX키는 잘 기억해 둡니다. 

이대로 부팅하면 선택한 해상도로 출력이 되겠지만, 다음부팅 시엔 초기화가 됩니다.

영구적용을 하려면 선택한 HEX키의 해상도로 vga설정을 변경해야 합니다.

 

제대로 해상도가 적용된 것을 확인하셨다면, 해상도 영구적용을 위해 VM을 재부팅해 다시 debug모드로 진입합니다.

위에서 진행한 대로 부팅옵션을 변경할 수 있는 edit모드까지 진입합니다.

아까 수정했던 7번째 줄,
nomodeset vga=ask_ 부분을 지우고 아까선택한 HEX키 343을 10진수로 변환한 값 835로 입력한 뒤 엔터를 눌러 저장합니다.

Esc + Shift + zz로 변경사항을 저장한 뒤,

쉘에서 reboot -f 를 입력해 재부팅합니다.

추가로 안드로이드 가상머신은 장시간 입력이 없으면 절전모드로 들어가 active 한 상태로 깨울 수 없게 되는데, 이를 방지하기 위해 Screen On앱을 play store에서 다운로드 받아 always모드로 실행합니다.

여기까지 진행하셨다면, 거의 다 했습니다ㅎㅎ;;

---

4. React-Native App실행

React-Native 프로젝트를 생성하셨다면, 우리가 구성한 Android 가상머신에 앱을 구동할 차례입니다.

VMM에서 Android 가상머신의 ip를 알아내신 후,

Kasm-Desktop command에 아래와 같이 입력합니다.

$ adb connect 192.168.0.17:5555

위 명령어를 입력하면 Android와 연결되었다는 메시지가 출력됩니다.

Android OS의 adb 기본포트는 5555번입니다!

 

그 뒤에

VSCode에서 쉘을 2개 실행시키신 후,

1번 쉘에선

$ npm start

로 NodeJS를 실행시켜 주시고,

 

2번 쉘에서

$ react-native android-run

을 입력해 React-Native 프로젝트를 가상머신으로 배포합니다.

정상적으로 실행이 되었다면, 아래와 같이 React-Native 앱이 가상머신에서 자동으로 실행됩니다.

---

설치과정이 험악하지만, 구조를 보면 그렇게 어려운 구조는 아닙니다.

Synology NAS 위에 Kasm-Desktop(in Docker), Android 가상머신(in VM)을 각각 구동시키고 adb로 서로 연결하는 구조입니다.

 

React-Native개발환경을 VDI로 구성하면 여러 가지 이점이 있습니다.

1. 인터넷이 가능한 어느 곳이든 접속하여 개발을 이어나갈 수 있다는 점.
2. 장비가 바뀌더라도 환경구성 때문에 시간을 낭비하지 않을 수 있다는 점.
3. React-Native개발환경은 emulator 등으로 인해 상당히 무거운 편입니다. 사용하는 PC가 클린 하게 유지될 수 있다는 점.

하지만, 단점도 있습니다.

1. Android 가상머신의 속도가 느리고, 카메라, GPS 등의 센서이용은 못함.
2. 인터넷이 없는 환경에선 개발진행이 안됨.

사실, 개발환경을 구성하면서도 이렇게까지 해야 하나 싶었지만, 구성하고 나니까 너무 유용하게 잘 쓰고 있습니다.

만족도는 한 80% 정도라고 해두죠 ㅎㅎ (20%는 단점 1입니다,,)

NAS나 개인서버를 구비하신 분이라면 한 번쯤 시도해 볼 만한 구성인 것 같습니다.

이상으로 포스팅을 마칩니다:)

감사합니다.

 

Reference:

https://arca.live/b/lastorigin/8237007

복구) 라붕이들을 위한 NAS로 24시간 라오머신 만들기 - 라스트오리진 채널

https://helpahoy.tech.blog/2018/08/22/how-to-change-the-screen-resolution-dpi-on-android-x86/

How to Change the Screen Resolution + DPI on Android x86