1. [스벨트킷모바일앱개발] capacitor Ionic SvelteKit 실행해보기

2. [스벨트킷모바일앱개발] 사인된 apk 만들기

 

 

 

이전에 스벨트에 capacitor를 설치하여 모바일 앱을 만들때는 설정해야 할 것들이 좀 있어서 귀찮았다.

https://infocentre.tistory.com/147

 

하지만 ionic-svelte 프로젝트를 사용하면 이미 설정이 되어있어서 편하다.

 

 

아이오닉 스벨트 설치부터 안드로이드 폰에 APK설치 해보기

 

1. 설치하기 

 npm create ionic-svelte-app@latest 프로젝트이름

위처럼 아이오닉스벨트를 설치하면 수동으로 세팅해야 할 것들이 이미 설정이 되있어서 좋음. 만약 기존 프로젝트에 추가하려면 아래의 깃 문서의 설치 방법을 따라야함.

 https://github.com/Tommertom/svelte-ionic-app

 

 

2. 설치할 패키지고르기 

안드로이드로 실행해보기

 

3. 안드로이드 플랫폼 설치 및 추가

  (3-1)안드로이드 플랫폼 설치

npm i @capacitor/android

  (3-2)안드로이드 플랫폼 추가

npx cap add android

 

4. 빌드하기 

npm run build

 

5. 안드로이드 폰에 설치하기

npx cap run android

 

ios는 위의 명령어들을 android를 ios로 대체함

 

 

 

------------------------------

 

위 처럼 하는 방법은 빌드가 된것을 폰에 옮길때 사용하는 방법이다. 하지만 개발할때는 실시간으로 코드가 변경함에 따라, 화면도 바뀌는 것을 볼 수 있어야 한다.  이를 '라이브리로드' 라고 한다.  (플러터에서는 Hot reload)

 

 

라이브리로드 사용하기 (개발모드)

 

1. 개발모드로 클라이언트 서버키기 

npm run dev -- --host

2. (-hmr:hot module replacement 플래그를 추하가여) 안드로이드로 폰에 설치하기

 

npx cap run adroid -hmr

: 아래의 코드를 보듯이 -hmr이 있으면 url값과 cleartext값을 전달함으로서 앱화면을 url주소와 연결 시킴

 

import { CapacitorConfig } from '@capacitor/cli';

const appId = 'ionic-sveltekit-ssr-demo.ionic.io'; // 이것에 따라 빌드될때 안드로이드 앱아이디 생성
const appName = 'ionic-sveltekit-ssr-demo';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

※만약 안된다면 위와 코드중 'url': http:// ... " 부분이 개발모드 클라이언트 로컬아이피 주소랑 같은지 확인한다.

 

좌:스벨트킷서버가 켜 있을때 / 우: 스벨트킷서버가 꺼지면

 

 

 

참조

https://ionic.io/blog/pwas-using-sveltekit-and-ionic

Blazing fast PWAs with SEO power using SvelteKit and Ionic - Ionic Blog