ionic Capacitor 사용하여 ANDROID, IOS 환경으로 실행하기

IONIC으로 작업했던 ANGULAR 프로젝트를 웹 환경이 아닌 ANDROID, IOS환경으로 실행시켜보겠습니다.

 

프로젝트 생성

ionic start ionic-capacitor

위에 코드를 입력한후 angular > blank > Standalone을 선택해줍니다.

 

Capacitor 설치하기

Ionic 프로젝트를 웹 환경이 아닌 Android 및 iOS 환경에서 실행하기 위해 Capacitor를 사용할 수 있습니다. Capacitor는 Ionic 앱을 네이티브 앱으로 변환하여 다양한 플랫폼에서 실행할 수 있도록 해주는 도구입니다.

프로젝트 경로로 이동하여 아래의 코드를 입력해줍니다.

npm install @capacitor/core @capacitor/cli

npm install @capacitor/android //android
npm install @capacitor/ios // ios

 

Capacitor 초기화 하기

Capacitor를 설치한 후 Ionic 프로젝트의 루트 디렉토리에서 Capacitor를 초기화해야 합니다. 다음 명령을 실행하여 Capacitor를 초기화합니다.

npx cap init [앱 이름] [앱 아이디]

위의 명령어를 입력하면 capacitor.config.ts 파일이 생성된 것을 볼수있습니다. 만약 생성시 앱이름과 아이디를 잘못 입력하였다면 이 파일에 들어가서 수정하시면 됩니다.

 

 

Android 및 iOS 플랫폼 추가

Capacitor를 초기화한 후에는 Android 및 iOS 플랫폼을 추가해야 합니다. 다음 명령을 실행하여 각 플랫폼을 추가합니다. 이 명령어를 입력하면 android폴더와 ios폴더가 각각 생성된것을 볼수있습니다.

npx cap add android
npx cap add ios

 

www 파일 만들어 파일 복사하기

www파일을 만들기위해서는 build를 해주어야합니다. ionic build 명령은 내부적으로 npm run build 명령을 실행하여 Ionic 애플리케이션을 빌드하기때문에 num run build를 해주셔도 무방합니다.

ionic build  // 또는 npm run build

위와같이 명령어를 입력하면  www 폴더가 생성된것을 볼수 있습니다.

 

 

처음 프로젝트 파일을 네이티브로 복사할경우는 copy명령어를 수정후 변경사항을 적용할 때는 sync 명령어를 사용하여 줍니다

npx cap sync
npx cap copy

• npx cap sync: 이 명령은 Ionic 프로젝트의 변경 사항을 네이티브 플랫폼으로 전파하여 앱을 업데이트합니다. 이 명령은 www 디렉토리의 웹 애플리케이션 파일을 복사하고, Capacitor 플러그인 및 플러그인의 종속성을 네이티브 플랫폼에 추가하며, 네이티브 플랫폼의 프로젝트를 빌드하고 업데이트된 앱을 실행할 수 있는 상태로 준비합니다.
• npx cap copy: 이 명령은 Ionic 프로젝트의 웹 애플리케이션 파일을 네이티브 프로젝트로 복사합니다. Capacitor를 사용하여 Ionic 앱을 네이티브 플랫폼으로 변환하기 전에 실행되어야 합니다. 이 명령은 www 디렉토리의 웹 애플리케이션 파일을 Android 및 iOS 네이티브 프로젝트의 적절한 위치로 복사합니다.

따라서, 일반적으로 npx cap copy 명령을 실행하여 웹 애플리케이션 파일을 네이티브 프로젝트로 복사한 다음, 변경 사항을 적용하기 위해 npx cap sync 명령을 실행하는 것이 일반적인 순서입니다. 이렇게 함으로써 Capacitor는 Ionic 프로젝트의 최신 변경 사항을 네이티브 앱에 반영하고 업데이트된 앱을 실행할 수 있도록 준비합니다.

 

앱 실행시키기

앱을 실행시키기 전에 android는 안드로이드 스튜디오 ios는 xcode가 깔려있어야합니다!!

npx cap open ios
npx cap open android

 

수정시 반영하기

다시 프로젝트를 빌드해준후 sync명령어를 통해 변경사항을 적용해줍니다.

ionic build
npx cap sync

 

아래의 사이트를 참고해서 진행하였습니다.

https://capacitorjs.com/docs/ios

Getting Started | Capacitor Documentation