KMP Web, Firebase Hosting으로 배포하기

KMP, Kotlin Muiltiplatform으로 안드로이드, iOS, 데스크탑 및 웹 개발을 할 수 있습니다.

웹은 현재 alpha이긴 합니다만, 한번 시도해보려고 합니다.

개발 환경은 Android Studio에서 진행합니다.

프로젝트 생성은 젯브레인의 다음 공식 글을 참고하여 진행하면 됩니다.
https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-create-first-app.html

Create your multiplatform project | Kotlin Multiplatform Development

프로젝트 생성은 Android Studio에서 하지 않고 아래 웹 페이지를 통해서 합니다.
Android Studio의 Project 생성 Wizard를 이용하면 웹 개발을 위한 환경이 세팅되지 않는 것 같습니다.

https://kmp.jetbrains.com/?_gl=1*1aze0f7*_gcl_au*MjQ3NTM1OTcuMTcyNTcxNjMzMg..*_ga*MTE3MzM0NjAxOS4xNjgxNzkwNDIx*_ga_9J976DJZ68*MTcyOTE3MzYyNC4xOS4xLjE3MjkxNzQ2NDMuNDYuMC4w

Kotlin Multiplatform Wizard | JetBrains

상기 페이지에서 웹을 체크하여 프로젝트를 생성하면 zip 파일을 다운로드 받을 수 있습니다.
zip 압축을 풀고 Android Studio에서 해당 폴더를 open하여 프로젝트를 열면 됩니다.

가이드에 나와있는데로 gradle 설정합니다.

상기 화면과 같으며, 이제 실행을 해보면 "localhost:8080" 으로 잘 실행되는 것을 확인할 수 있습니다.

 

이제 이 샘플 웹을 Firebase Hosting을 통해 배포해보겠습니다.

Firebase에서 Hosting이라는 기능을 제공하고 있는데, App Hosting이라는 기능이 새로 추가된 것으로 보입니다.
이 두 기능은 비슷해보이지만 일단은 서로 다른 기능인 것 같습니다.
App Hosting은 현재 실험 단계로 KMP 프로젝트는 지원하지 않는 것 같아요.
Next.js, Angular 프레임워크로 개발된 웹 서비스만 지원하는 것으로 보입니다.
따라서 Firebase Hosting 기능을 사용하여 배포하겠습니다.

배포하기 위해 다음과 같이 gradle 설정을 추가하여 빌드합니다.

wasmJsBrowserDistribution task를 추가하고 run하면 다음과 같이 composeApp/build/dist/wasmJs/productionExecutable 경로에 뭔가 파일들이 잔뜩 생성된 것을 확인할 수 있습니다.

배포할 준비는 되었고, 이제 Firebase Hosting 쪽 작업을 해보겠습니다.

Firebase Hosting 세팅 역시 다음 구글 공식 문서를 그대로 따라갑니다.
https://firebase.google.com/docs/hosting/quickstart?hl=ko&_gl=1*d1o9ww*_up*MQ..*_ga*MTMxMjE0NzM4MS4xNzI5MTc1Mzgw*_ga_CW55HF8NVT*MTcyOTE3OTA4NC4yLjAuMTcyOTE3OTA4NC4wLjAuMA..

Firebase 호스팅 시작하기  |  Firebase Hosting

 

Android Studio 터미널을 엽니다.
Firebase Cli를 통해 세팅을 하도록 하겠습니다.
다음 명령어를 통해 hosting을 설정합니다.

$ firebase init hosting

몇가지 질문들이 나오는데 저는 다음과 같이 작성하였습니다.

이와 같이 작업을 완료하게 되면 dist 경로의 index.html이 덮어씌어지는데요.

다시 wasmJsBrowserDistribution task를 실행해주시면 됩니다.

그리고 다음 명령어를 통해 배포합니다.

$ firebase deploy

배포가 정상적으로 수행되었고, 해당 링크에 접속해보면 잘 접속되는 것을 확인할 수 있습니다.