Zenn
フェアリーデバイセズ公式Publicationへの投稿
🐦‍⬛

OSS表示WebアプリをKotlin/WasmでAmplifyにデプロイした

kabocha
に公開
Kotlin
WebAssembly
Amplify
tech

はじめに

Fairy Devices株式会社のKabochaです。Kotlin/Wasmを使ってOSSライセンス表示用のWebアプリを AWS Amplifyにデプロイした経験について紹介します。

Kotlin/Wasmは、Kotlinで書かれたコードをWebAssembly (Wasm) にコンパイルする機能です。これにより、KotlinコードをWebブラウザなど、Wasmが実行可能な環境で実行できるようになります。
今回は、AWS Amplifyで動かしました。使うことを検討している方の参考になると思います。

背景

OSSライセンス表示の必要性

例えば、Apache License 2.0 が適用されたライブラリを使用する場合、そのライセンス情報を製品に含める必要があります。
規約としては、紙に印刷して同梱することも可能ですが、当然実用性を考えるとWebで公開する方が遥かに便利です。

Androidアプリでは、OSS Licenses Gradle Pluginなどを用いて、アプリ内にライセンス表示機能を実装することが一般的です。

THINKLETでの課題

しかし、Fairy DevicesのTHINKLETでは画面がないハードウェアであるため、ユーザーがアプリ内でライセンス情報を確認することができません。

現在の解決策

そこで当社では、AboutLibraries を用いて依存ライブラリを収集し、それらを統合してWebアプリ上で表示するようにしています。
現在のWebアプリには、Flutter Webを採用し、収集したライセンスファイルを自作パーサーで解析して表示しています。

実際のアプリ：https://linklet-oss-license.linklet.ai/

なぜKotlin/Wasmに移行しようと思ったのか？

パーサー保守のコスト

AboutLibrariesを採用してから長期間が経過し、内部のライセンス構造も微妙に変化してきました。
その間、パーサーを適宜修正する必要があり、追従対応がそこそこのコストとなっていました。

AboutLibrariesのKotlin/Wasm対応

AboutLibrariesを確認したところ、Kotlin/Wasm向けのアプリが追加されていることを発見しました。
それなら自作パーサーを維持するよりも、公式のソリューションに乗り換えた方が良いのではないかと考え、試作を開始しました。

注意事項

Kotlin/Wasmはまだまだalpha版であることには留意が必要です。本番環境での使用には十分な検証が必要です。
なお、今回の記事では実際の開発は行っていませんが、ご自身のKotlin/Wasmアプリを開発された場合も、同じような手順でデプロイできると思います。

実際にKotlin/Wasmアプリを動かしてみる

今回は本家のものをそのまま動かしてみます。

ローカルで動作確認

まずはローカルで動かしてみます。2025年6月15日時点の最新Tagを指定します。
実行には、READMEに従いましょう。

git clone --branch 12.2.3 https://github.com/mikepenz/AboutLibraries.git
cd AboutLibraries
./gradlew :app:wasmJsBrowserDevelopmentRun
# http://localhost:8080 でアクセス可能

すんなり動きました。いい感じです。

プロダクションビルドの確認

次にプロダクションビルドできるか、アーティファクトがどこに配置されるかを確認しておきます。
READMEを見てもプロダクションビルドの方法は書いてなさそうでしたので、利用可能なタスクから確認します。

./gradlew :app:tasks

------------------------------------------------------------
Tasks runnable from project ':app'
------------------------------------------------------------

（中略）

Kotlin browser tasks
--------------------
wasmJsBrowserDevelopmentExecutableDistribution
wasmJsBrowserDevelopmentRun - start development webpack dev server
wasmJsBrowserDevelopmentWebpack - build webpack development bundle
wasmJsBrowserDistribution
wasmJsBrowserProductionRun - start production webpack dev server
wasmJsBrowserProductionWebpack - build webpack production bundle

...

wasmJsBrowserDistribution がそれっぽいですね。
公式 も念の為確認してみると、これで間違いないですね。このタスクを実行します。

./gradlew :app:wasmJsBrowserDistribution

実行した結果は、下記に配置されているようです。確認すると、

ls app/build/dist/wasmJs/productionExecutable/

70948e3d56fa0b7c5da1.wasm
8bc1b48ee28fd6b51bb9.wasm
composeApp.js
composeApp.js.LICENSE.txt
composeApp.js.map
composeResources
index.html
load.mjs

index.htmlや.wasmファイルなどができています。
これで正しく動くか確認してみます。確認するにはPythonのHTTPサーバーを使います。

cd app/build/dist/wasmJs/productionExecutable
python -m http.server 1234
# http://localhost:1234 でアクセス可能

問題なく動きました。では、実際にデプロイしてみようと思います。

AWS Amplifyにデプロイ

リポジトリの準備

これをAWS Amplifyにデプロイします。ビルドしてZipに固めてアップロードしてもOKですが、今後の運用を見据えて、ここではGitHub連携してデプロイします。
AboutLibrariesをフォークするなりして、リポジトリを取得します。適宜、ワークフローを停止しておきます。

amplify.ymlの設定

プロジェクトのルートにamplify.ymlを配置します。完全な例はこちらです。
Javaを11と17でそれぞれ入れているのは、AboutLibraries側の都合です。また、Yamlファイルにガッツリ処理を書いていますが、ご容赦ください。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - sudo yum install -y java-11-amazon-corretto-devel java-17-amazon-corretto-devel
        - export JAVA_HOME=/usr/lib/jvm/java-17-amazon-corretto
        - export PATH=$JAVA_HOME/bin:$PATH

        - cd $CODEBUILD_SRC_DIR
        - cd AboutLibraries
        - echo "Java version:" && java -version

    build:
      commands:
        - chmod +x ./gradlew
        - ./gradlew :app:wasmJsBrowserDistribution

  artifacts:
    baseDirectory: app/build/dist/wasmJs/productionExecutable
    files:
      - "**/*"

customHeaders:
  - pattern: "**/*.wasm"
    headers:
      - key: "Content-Type"
        value: "application/wasm"

AWS Amplifyでの設定

次に、AWSのコンソールを操作します。
AWS Amplifyから新しいアプリを作成し、GitHubからデプロイを選択します。

リポジトリとブランチを追加から、先ほど追加したリポジトリを追加します。
このとき、必要に応じてGitHubとのアクセス設定を行ってください。

次に進み、アプリケーション名などを適宜編集し、保存します。

ビルドとデプロイには、10〜15分ほど時間がかかりました。猫をもふもふしながら、気長に待ちましょう。

無事にデプロイされました！

終わりに

今回はKotlin/WasmアプリをAWS Amplifyで動かす試作を行いました。
もう少し手間取るかと思いましたが、大きな障壁もなく、デプロイできました。

まだKotlin/Wasmは、alpha版ということもあり本番環境での利用には注意が必要ですが、
今回のようなKotlin/Wasmを使って、Webアプリを作るほうがコストが抑えられるようでしたら、非常に魅力的な技術でよい選択肢になると思います。

弊社では、Flutterからの移行には、UI変更とロジックの追加が多少必要になりましたが、近い将来移行される予定です。
Kotlin/WasmをAWS Amplifyで動かす際の参考になれば幸いです。

参考

フェアリーデバイセズ公式
フェアリーデバイセズ公式Publication

フェアリーデバイセズのエンジニア・サイエンティストを中心に情報発信をしている Publication です。THINKLET / LINKLET サービスを支える技術情報や先端的な研究情報を中心に公開しています。

Discussion