React + Spring Boot 배포하기(4) - Capacitor로 웹앱 만들기(feat. 안드로이드 스튜디오)

Capacitor로 웹을 감싸서 .apk 파일로 만들어 배포하기가 목표.

 

1. 안드로이드 스튜디오를 설치한다.

2. 웹앱 빌드 npm run build

3. Capacitor 프로젝트 설정

npm install @capacitor/core @capacitor/cli
npx cap init

 

• App name: Ballpark Weather
• App ID: com.kboweather.ballparkweather

4. 빌드된 웹앱을 Capacitor에 연결

npx cap add android
npx cap copy

 

 

5. Android Studio로 열어서 실행해보기

npx cap open android

 

6. capacitor.config.ts (또는 capacitor.config.json) 수정

(Capacitor 설정 파일은 frontend 폴더 쪽에 있음. 안드로이드 스튜디오에는 앱 관련만 열려있어서 나는 vscode로 따로 수정해줌.)

{
  "server": {
    "url": "https://kbo-ballpark-weather.vercel.app",
    "cleartext": true
  }
}

 

수정후 아래 명령어 통해 반드시 적용되게 해 줄 것.

npx cap copy

 

 

(중간에 몇가지 오류가 있었으나 대충 생략.)

 

대충 이런식으로 실행시 애뮬레이터로 잘 보이면 .apk 파일로 빌드하는 단계로 넘어가면 됨.

 

7. .apk 파일로 빌드

Build > Generate App Bundles or APKs > Build APK(s)

 

완료시 뜨는 팝업에서 locate 클릭시 해당 폴더로 이동됨.

기본적으로는 아래와 유사한 경로에 생성됨.

C:\BallparkWeather\frontend\android\app\build\outputs\apk\debug\app-debug.apk

 

apk앞의 이름은 바꿔줘도 됨.

 

---

이후론 옵션인데,

 

Android 앱 아이콘 변경

1. app 디렉토리에서 마우스 우클릭 → New > Image Asset 클릭
2. Icon Type: Launcher Icons (Adaptive and Legacy) 선택
3. Asset Type: Image
4. Path: C:\BallparkWeather\frontend\build\icons\BallparkWeather.png 선택
5. Background color는 기본으로 두거나 원하는 색상 지정
6. Next → Finish

나는 앱명을 바꾸기위해 android/app/src/main/res/values/strings.xml 파일도 수정해줬다.

<string name="app_name">KBO 날씨</string>

 

이미지나 이름 변경 후에는 다시 APK를 빌드해서 적용시켜줄 것.

 

---

iOS도 해보고싶었는데 macOS 기기가 없어서 그냥 여러모로 귀찮아서 포기 ㅎㅎ

 

kbo-weather.apk

5.93MB