Frontend 실행 방법

Production용 .apk 파일 빌드하는 법

1. main에서 new branch를 생성합니다.
2. .gitignore의 env.json 파일을 주석처리해서 build에 포함되도록 변경합니다.
3. commit해야 현재 사항이 build에 적용됩니다. build는 가장 최근 commit기준으로 만들어집니다.

아래 명령어로 .apk 파일을 빌드할 수 있습니다. https://expo.dev에서 빌드 현황과 결과를 확인할 수 있습니다.

eas build --local --profile preview # 로컬에서 빌드 (비추천)
eas build --profile preview # expo에서 클라우드 빌드

Dev용 expo go 빌드하는 법

APP(Android)/meerkat 경로에서 아래 명령어를 실행합니다.

npm i 
npx expo start --tunnel

명령어 입력 후 나오는 url을 Expo Go앱에 입력합니다.

SDK가 설치되어 있지 않다고 나오면 아래의 명령어를 실행하면 됩니다.

sudo apt update && sudo apt install android-sdk
# 아래 두 줄 .bashrc에 추가 후 터미널 재시작.
export ANDROID_HOME=/lib/android-sdk # 자신의 설치 경로 맞는지 확인할 것.
export PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools/

이후 VS Code의 ngrok extension을 추가하고, 'npx expo start --tunnel'을 이용해 실행했다면 ngrok을 이용해 배포해서 웹으로 접속 가능합니다.

참고로 sample.env.json과 같은 형식으로 env.json을 만들어주어야 실행이 가능합니다.

Dev용 expo-dev-client 빌드하는 법 (Deprecated)

Android SDK와 JDK 인스톨

sudo apt update && sudo apt install android-sdk
sudo apt install openjdk-8-jdk

.bashrc 설정

export ANDROID_HOME=/lib/android-sdk # 자신의 설치 경로 맞는지 확인할 것.
export PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools/
export SEHOFEDIR=/workspaces/APP_Meerkat_IQDan/'APP\(Android\)'/meerkat_fe # 자신의 이름으로 사용. cd $SEHOFEDIR하면 편리함.

Android License 수락

cd /lib/android-sdk #혹은 적절한 위치로 이동.
sudo wget https://dl.google.com/android/repository/commandlinetools-linux-8512546_latest.zip
sudo unzip commandlinetools-linux-8512546_latest.zip
cd cmdline-tools/bin
sudo sdkmanager --sdk_root=$ANDROID_HOME --licenses # 들어가서 모두 y로 수락하면 끝임.

위에 수락안하면 아래 build가 안됨. 출처1 출처2

expo-dev-client 설정

npm i # node modules 다운로드
npx expo install expo-dev-client
npm i -g eas-cli
chmod -R 777 /lib/android-sdk # codespace의 경우 sudo eas가 안되기에 수동으로 이렇게 해야함.
npx expo prebuild
eas build --profile development --platform android --local # 로컬에서 커스텀 expo dev 앱 빌드하기.

project root directory에 eas.json 제작. 출처

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

새로운 bash에서 아까 생성된 apk http-server로 열고 서빙하여 폰에서 다운로드

npm i -g http-server
http-server # meerkat_fe 디렉터리 내에서 실행.

이후 해당 포트를 ngrok으로 열어줍니다. 코드스페이스는 snap install ngrok이 안되므로 vs code server 익스텐션 ngrok을 받아서 ctrl+shift+p 후 ngrok:start 실행 후 8080같은 포트 번호를 입력하여 열어줍니다. 열린 ngrok url로 폰 접속하여 apk다운로드 받습니다.

expo-dev-client 실행 출처

npx expo start --dev-client --tunnel

apk 설치 후 이제 나오는 링크를 열면 열립니다.