[오픈소스] SVELTEKIT+ CAPACITOR 설치 그리고 안드로이드 스튜디오 빌드 앱실행
SVELTEKIT+ CAPACITOR 설치
그리고 안드로이드 스튜디오 빌드 앱실행
좋은 YOUTUBE 영상을 발견하여 문서로 만들어 봅니다.
https://www.youtube.com/watch?v=If1p7yV1gec
앞서 등록한 svelte ionic은 SVELTE + ROUTIPY(ROUT 라이브러리)로 제작된 것입니다.
그래서 최근 업데이트된 SVELTEKIT 의 유용한 기능을 사용할 수 없어서 아쉬웠는데,
아래 방법을 사용하면 SVELTEKIT에 CAPACITOR를 연동하여 개발 할 수 있습니다.
단, IONIC 컴포넌트 사용은 별도로 지정해야 할 것 같네요.
요즘 TAILWIND 사용하고 있는데 이것이 대안이 될 수 있지 않을까요?
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@1.0.0-next.26
*npm i -D @sveltejs/adapter-static@next 하라고 read.me 파일에 안내하는데 @next 로 하면 에러가 나와서 구체적으로 버전 번호를 적어주는 방식으로 해야한다.
svelte.config.js 파일을 열어서
import adapter from '@sveltejs/adapter-static';
내용을 제일 윗 줄에 넣어준다. 기존 어덥터는 주석처리하면 빌드시 두가지 방식으로 빌드되지 않을 것이다.
그리고 아래 KIT 안에 adapter:adapter() 를 넣고 그안에 옵션 설정을해준다.
export default {
kit: {
adapter: adapter({})
}
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 폴더로 만든다.
CPAPCITOR 에 Android 개발환경 설치
npx cap add android
sveltekit 빌드 + CAPACITOR SYNC 연결
그리고 안드로이드 스튜디오 실행
그리고 실시간 변경 사항 확인 그것도 앱에서
sveltekit 빌드
npm run build
capacitor sync
npx cap sync
* capacitor sync 는 build 폴더안의 내용을 android 폴더의 웹서버 폴더로 복사해줍니다.
capacitor cli 로 안드로이드스튜디오 실행
npx cap open androidb
*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 }
추가
