React 프로젝트 Ionic Capacitor 사용하여 Android, Ios Build하기

Android, Ios App 배포를 위한 Capacitor 사용법 및 빌드 적용 방법에 대해서 정리한 글입니다.

제가 담당하고 있는 프로젝트는 추후 앱으로도 출시하기 위해 처음부터 Ionic 환경으로 시작한 웹뷰 형식의 웹사이트입니다.

이 글에서는 신규 프로젝트를 Ionic으로 생성하는 방법 보다는 기존에 Ionic으로 작업했던 React 프로젝트를 Android, Ios로 Build하는 작업에 집중하겠습니다.

Ionic이란?

Ionic - 웹앱을 네이티브앱으로 래핑하는 개발 방식을 사용합니다.

Ionic UI Frameworks : 모바일 UI + 웹UI 쉽게 도와주는 UI 컴포넌트들을 제공

Ionic Native : Capcaitor 나 Cordova 플러그인을 활용해 쉽게 디바이스 제어 기능 제공

Capacitor란?

Capacitor는 iOS, 안드로이드, Electron, 웹에서 기본으로 실행되는 웹 앱을 쉽게 구축할 수 있는 크로스 플랫폼 앱 런타임입니다.
https://capacitorjs.com/

신규프로젝트 Ionic 설치 및 실행

신규 프로젝트로 시작하는 방법을 정확히 알고 싶으시면 Capacitor 공식문서를 통해 확인해주세요.

npm install -g @ionic/cli
ionic start [myApp]

// Self signed certificate in certificate chain 에러시 입력
set NODE_TLS_REJECT_UNAUTHORIZED=0

ionic serve --no-open

//ionic start myApp sidemenu --type react
ionic build
npx cap init --npm-client=npm

기존 React 프로젝트에서 Capacitor 적용

1. npm install --save @capacitor/core @capacitor/cli
2. npx cap init // npx cap init [my project name] com.[myDomainName].[myProjectName]

3-1. npx cap add android // android studio 필수
3-2. npx cap add ios // Xcode 필수

4. yarn build => npm run ios => npm run android

5. npx cap sync android(ios) // 
6. npx cap open android(ios) // 실행-> 안드로이드 스튜디오 연동 

package.json 설정

"scripts": {
  "start": "ionic serve",
  "build": "react-scripts build && npx cap sync", // build시 sync 함께 작업하도록 변경 
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "android": "npx cap add android", // 추가
  "ios": "npx cap add ios", // 추가
  "android-open": "npx cap open android", // 추가
  "ios-open": "npx cap open ios" // 추가
},

gitignore 설정

ios, android 폴더가 생성되므로 gitignore에 추가해줍니다.

/ios
/android 

에러 처리 방법

build 과정에서 생긴 error 처리 방법 공유합니다.

1. npm ERR - dependancy error
   => npm dependancy 문제가 있어서 아래 방법처럼 처리합니다.
   https://stackoverflow.com/questions/66239691/what-does-npm-install-legacy-peer-deps-do-exactly-when-is-it-recommended-wh

npm install --save --legacy-peer-deps

1. build error : Error: Cannot find module 'caniuse-lite/dist/unpacker/agents'

npm i --save caniuse-lite