[Capacitor] 하이브리드앱 만들기

Vue3 + Capacitor 조합으로 프로젝트를 하게 됐다.

 

Vue3는 마스터는 아니지만 어느정도 작동방식은 알고 있으니 Capacitor에 대한 개괄적인 학습부터 진행해보려고 한다.

 

---

capacitor.config.ts 파일 설정법도 공부해야한다.

 

 

터미널에 입력하여 vue 프로젝트를 생성한다.

npm create vite@latest 

 

웹 프로그램이 다 만들어지면

npm run build

 

capacitor 라이브러리를 받는다.

npm install @capacitor/core @capacitor/cli

 

capacitor를 초기화한다.

npx cap init

 

android, ios 프로젝트를 만든다.

npm i @capacitor/android @capacitor/ios

npx cap add android
npx cap add ios

 

dist 폴더에 생성된 Vue.js 앱을 Capacitor 프로젝트의 www 폴더에 복사

npx cap copy

 

Capacitor와 Android 프로젝트를 동기화

(앱 내용이 변경되었을 때에도 이 과정을 거쳐야 한다)

npx cap sync

 

-> 여기까지가 capacitor가 할 일이다.

참고로 android/ios 모듈(?)은 vue 프로젝트에서 import해서 쓰는 것으로 파악된다.

(그런 모듈이 있어야 gps 등의 기능을 쓸 수 있다는 듯)

 

그 다음은 android/ios 에뮬레이팅 + 앱 빌드 과정으로 분기된다.

 

<Android>

안드로이드 스튜디오에서 android 폴더를 open 하고

(npx cap open android 해도 된다)

Run 하면 다음과 같은 결과물을 얻을 수 있다

 

내가 만든 앱이 마음에 든다면

1. 상단 메뉴에서 "Build" -> "Generate Signed Bundle / APK"를 선택
2. "Generate Signed Bundle / APK" 대화상자가 나타납니다. "APK" 옵션을 선택한 후 "Next" 버튼을 클릭
3. Key store 경로 및 비밀번호, Key alias, 비밀번호 등을 입력
4. "Build Type"과 "Flavor"를 선택한 후 "Finish" 버튼을 클릭
5. APK 파일이 빌드되면 "Build" -> "Build Bundle(s) / APK(s)" -> "Build APK(s)"를 선택
6. APK 파일이 생성되며, "app/build/outputs/apk/" 폴더에 APK 파일이 저장됨

 

<IOS>

Xcode에서 ios 폴더를 open 하고

(npx cap open ios 해도 된다)

Run 하면 아이폰 화면이 에뮬레이팅이 된다.

 

1. 상단 메뉴에서 "Product" -> "Scheme" -> "Edit Scheme"을 선택
2. "Run" 항목에서 "Info" 탭을 선택하고, "Executable"에서 빌드할 타겟을 선택
3. "Build Configuration"에서 "Debug" 또는 "Release"를 선택
4. "Product" -> "Build"를 선택하거나, 단축키인 "Command + B"를 눌러 앱을 빌드
5. 빌드된 앱은 "Products" 그룹에서 찾을 수 있음
6. 빌드된 앱을 디바이스에 직접 설치하거나, App Store Connect와 같은 배포 서비스를 통해 사용자에게 배포할 수 있음

Xcode에서는 "Archive" 기능을 사용하여 앱을 빌드하고 배포할 수도 있다.
"Archive" 기능은 릴리스 빌드를 생성하여 앱을 배포하기 전에 테스트하고 싶은 경우에 사용할 수 있다.
"Archive"를 생성하려면, 상단 메뉴에서 "Product" -> "Archive"를 선택한다.
"Archive"는 "Window" -> "Organizer"에서 찾을 수 있다.
"Archive"를 선택한 후, "Distribute App"을 선택하여 앱을 배포할 수 있다.

---

ios에서 실제 기기에 테스트를 하려면 안드로이드와는 다른 방법을 써야한다.

archive 기능을 사용해야 하는데
Mac과 기기를 연결한 후
Xcode에서 ctrl + shift + 2하면 나오는 화면에서
devices를 내 기기로 설정한 후
네트워크를 이용한 어쩌구를 체크해야한다.

화면 중앙 상단에 있는 에뮬레이팅 기기를 내 기기로 바꿔야 한다.

내 기기에서는 개발자모드를 켜야하고
Xcode에서 Run을 누르면
내 기기에 앱이 설치되지만 바로 실행할 수 없다.

설정->VPN 및 기기 관리에서
신뢰할 수 있는 개발자 체크를 해줘야 한다.

---

Capacitor CLI를 사용하면, 안드로이드 스튜디오 없이도 명령어 한 줄로 APK 파일을 생성할 수 있다.

다음과 같은 명령어를 실행하여 APK 파일을 생성할 수 있다.

npx cap copy android

cd android

./gradlew assembleDebug

(.\gradlew assembleDebug)

위 명령어는, Capacitor CLI를 사용하여 안드로이드 프로젝트를 빌드하고,

gradlew를 사용하여 APK 파일을 생성하는 것이다.

이렇게 생성된 APK 파일은 android/app/build/outputs/apk/debug/app-debug.apk 경로에 저장된다.

 

빌드가 완료되면

npx cap run android

npx cap run ios

명령어를 이용해서 에뮬레이팅이 가능하다.

 

=> 여러차례 시도해 본 결과 앱빌드는 역시 순정이 낫다. 오류가 많음.

---

이틀정도 테스트를 해보니 맥에서 오류가 많았다

과장님께서는 windows 환경에서 npx cap sync 한 후

맥북으로 옮겨서 앱을 빌드하는 것이 낫다고 하셨다

---

맥 환경에서 xcode 오류가 난다면

아마 터미널을 열어서

xcode-select --install

xcode-select -p //경로 출력

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer //Xcode Developer Directory의 위치를 변경

npx cap sync

 

이렇게 하면 해결 될 것이다.

---

혹시나 혹시나 맥 환경에서 npx cap open android를 실행했을 때

다음과 같은 android studio 오류가 난다면

npx cap open android [error] Unable to launch Android Studio. Is it installed?

Attempted to open Android Studio at: /Applications/Android Studio.app

You can configure this with the CAPACITOR_ANDROID_STUDIO_PATH environment variable.

 

터미널을 열어서

export CAPACITOR_ANDROID_STUDIO_PATH=/Applications/to/Android\ Studio.app

라고 입력하면 된다.