제 블로그에 올려 놓은 글인데, 먼데 갔다오시는 것보다 바로 보시라고 올려드려요.
 

CAPACITOR 이용한 스벨트 하이브리드앱 빌드하기

하이브리드앱을 좀 아시는 분들은 cordova 나 ionic 등등을 들어봤을 것이다.

ionic은 cordova기반을 유료버전으로 만든 사업자정도로 이해하고 있는데,

react-native 나 flutter 가 생겨나서면서 견제차원에서 인지

capacitor 이라는 cordova+ionic+capacitor를 모두 사용가능한 하이브리드앱 개발환경을 free 로 공개하게 되었다.

자세히 보면 자동 배포환경 정도에서 돈을 받겠다는 정도로 눈치를 챌수 있는데, 아무튼 이 자동배포도 찾아보면 누군가 무료버전으로 만들어 놓았다.

초창기에는 ionic는 angular 기반이라 사용하기 난해했다.

그리고 react, vue가 나오면서 좀더 쉬워졌다고 생각했는데,

이게 svelte 가 나오면서 완전히 쉬워졌다.

뭐 이제는 하이브리드앱 누가 못만들까 싶을 정도로 아주 쉬워 졌다.

그냥 입람 웹페이지 만들고, capacitor만 적용하면 된다.

쉽다는 것은 svelte가 쉽다는 것이 한목한다. 바로 spa환경을 만들어주니까.

cordova 상태값 도망갈일도 없고 아주 편하다.

그래서 스벨트로는 오히려 웹보다는 하이브리드앱만드는게 바로 배포할수도 있어서

더 쾌적하다. 

svelte로 만들고 capacitor 연동해주면 끝난다.

SVELTEKIT+ CAPACITOR 설치

그리고 안드로이드 스튜디오 빌드 앱실행

애플도 ios도 바로 된다. 

SVELTEKIT 설치

스벨트KIT 설치(스벨트와 스벨트킷은 다릅니다. 아래 내용은 스벨트킷에서만 작동합니다.)

npm init svelte@next [프로젝트명]

프로젝트 폴더로 이동

cd [프로젝트명]

의존성 패키지 다운로드

npm i

정상작동 확인

npm run dev

스벨트 빌드 아답터 설치

*스벨트는 빌드 방식이 다양하다. 자동으로 빌드 결과를 서버로 업로드하는등, CDN 서비스와 연동하는 등 편의 기능을 제공하는데, sveltekit 부터는 기본 아답터 그리고 sveltekit docment 페이지에 안내하는 아답터로는 자체 운영서버로 빌드하는 아덥터 내용이 없다. 그래서 해깔릴 수 있다. (아무래도 상용 CDN 서비스 업체에서 후원을 받고 있는듯하다 뒷광고인 듯)

그리고 검색하면 나오는 sveltejs/adapter-static 를 GITHUB 에서 들어가 안내하는데로 다운로드하면 잘 안된다.

npm i @sveltejs/adapter-static

svelte.config.js 파일을 열어서

import adapter from '@sveltejs/adapter-static';

내용을 제일 윗 줄에 넣어준다. 기존 어덥터는 주석처리하면 빌드시 두가지 방식으로 빌드되지 않을 것이다.

그리고 아래 KIT 안에 adapter:adapter() 를 넣고 그안에 옵션 설정을해준다.

아래 부분은 간혹 바뀌는 경우가 있으니

https://kit.svelte.dev/docs/adapter-static 링크에 다시 확인 바래요.

export default {

kit: {

adapter: adapter({

// default options are shown. On some platforms

// these options are set automatically — see below

pages: 'build',

assets: 'build',

fallback: null,

precompress: false,

strict: true

})

}

};

CAPACITOR 설치

CAPACITOR 패키지 다운로드

npm install @capacitor/core @capacitor/cli @capacitor/android

CAPACITOR 설치

npx cap init [앱이름] [앱ID]

*입이름은 입이름

*앱ID는 회사 구분 ID 예)com.example.appname or com.appname.app

실행하면

Web asset directory 디렉토리 물어보는데, 이때 build 로 하고 엔터

*웹앱 폴더를 복사해서 안드로이드에 붙여 넣는데 복사할 폴더 즉, svelte 빌드 결과 폴더를 지정한다. svelte build 시 adapter 설정에서 폴더 명을 지정하면 된다 주로 build 폴더로 만든다.

우선 디바이스를 추가하기 전에 build 폴더를 생성해주자(안하면 디바이스 추가시 에러가 난다.)

npm run build

주의 사항

그런데 사이트 복잡도에 따라서 빌드하면 에러가 자주 난다. 

어뎁터의 이름처럼 고정형으로 내용을 뿌려주는데, 가변적인 방식이 아닌

SSR 방식이라서 그런 것이다. 그래서 먼저 랜더링하라고 페이지 마다 넣어줘야 한다.

에러 나는 포인트를 메시지로 보여주는데 두가지 에러이다. 그곳에 가는 링크가 없다거나 

아니면 프리렌더링 설정이 없다는 에러이다. 

후자의 경우에는 해당 폴더에 +page.js 파일 만들어 주고 안에

export const prerender = true; 라고 써주면 된다.

그리고 링크가 없다고 나오는 에러가 있는데, 이때는 다른 페이지에서 해당 페이지로 <a href="{주소}"/>

이렇게 넣어준다. 꼼수인데, 이렇게 하면 해결된다. 다른 방법도 있을텐데 아직 모르겠어서 우선 되던걸로 알려드립니다.

CPAPCITOR 에 Android 개발환경 설치

npx cap add android

IOS 가발환경 설치

npx cap add ios

sveltekit 빌드 + CAPACITOR SYNC 연결

그리고 안드로이드 스튜디오 실행

sveltekit 빌드

npm run build

capacitor sync

npx cap sync

capacitor sync 는 build 폴더안의 내용을 android 폴더의 웹서버 폴더로 복사해줍니다.

capacitor cli 로 안드로이드스튜디오 실행

npx cap open android

mac 에서 xcode 실행

npx cap open ios

*capacitor cli 로 열지 않고 실행하려면

android studio 에서 file>new>Import project 메뉴를 이용하여 폴더를 지정하는 방식으로

이렇게해서 Android studio 가 열리면 gradle 파일 설치하느라고 한참 걸립니다. 좀기다리고

에러가 없으면 Run app(상단 플레이버튼) 또는 Shift + f10 으로 앱 설치 실행

실시간 저장 변경내용 앱에서 확인

요부분은 실행 안될것이다. 대충 이런식으로설정하면 실시간 로드 환경이 갖추어 진다.

얼마전가지 해봤는데, 잘 생각이 나지않는다. 

(usb케이블 또는 wifi 디버그 연결 되어있어야 합니다.)

root 폴더에 capacitor.config.ts 파일

bundledWebRuntime: false, 줄 아래에

server:{

url : "http://10.0.2.2:3000", //<=이부분은 연결할 주소로 설정

cleartext : true

}