Composeで作ったものや、計算ツールや定型文生成ツールを気軽に公開したい
みたいな事をやってみたかったけど手が出なかった、忘れてた。
みたいな僕の様な人用に、GitHub Pagesに公開まではサクッとできたので記事にしてみました。（サイトとして完成度を高めるという話は一切ありません！）
(さっくりできるので、手順を公開するほどではないのかもしれませんが、備忘録をかねています）
ただCompose for Web周りの公式のアップデートはKMMよりは後手になってしまうと考えられるので、割と水物であることに注意してください。
https://github.com/JetBrains/compose-jb/blob/master/tutorials/Web/Getting_Started/README.md
公式のチュートリアルを見てプロジェクト作成自体はサクッとできるだろうとは思って始めましたが、内容が色々古いままで罠があったので参考になればと。
（そのままこの記事を真似してできる保証はしておりません。）
作成した環境
OS: Mac
IDE: IntelliJ IDEA 2022.2.1 (Ultimate Edition)
(公式推奨は IntelliJ IDEA Community Edition or Ultimate Edition 2020.2 or later)
手順1： プロジェクトの作成
今回は画像の通り、Single PlatformでWebを対象にしてプロジェクトを作成した時の手順として公開します。マルチプラットフォーム設定はやってないのでわかりません。demo1になってますがプロジェクト名は任意で。
手順2： ビルド、 動作確認
./gradlew jsBrowserRun
を実行すると、ブラウザが立ち上がり、Composeで書いたページの動作が確認できます。
Warning
おそらく単にビルドしただけではCould not find org.nodejs:node:14.17.0.とNode.jsに関するエラーで問題が発生して、ビルドの途中で止まってしまうかもしれません（現在僕の環境ではそうでした）
解決策はいくつか検索で出てきましたが、GitHubで最近pushされたKotlinJS用プロジェクトのソースコードを検索した結果、以下のコードをbuild.gradle.ktsの最後尾に追加するだけで問題は解消しなかったので。さらに検索した結果どの記事を見たか忘れましたが・・・gradle.propertiesのKotlinバージョンを1.7.0にし、composeのバージョンを1.2.0-alpha01-dev753にしたらうまく行きました。
多分この方法もそのうち使えなくなると思うので、その時は公式がいい感じにしてくれるか誰かのワークアラウンドを探す羽目になると思います。build.gradle.kts
rootProject.extensions.configure<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension> { versions.webpackCli.version = "4.10.0" }gradle.properties
kotlin.code.style=official kotlin.native.enableDependencyPropagation=false kotlin.js.webpack.major.version=4 kotlin.version=1.7.0 agp.version=4.2.2 compose.version=1.2.0-alpha01-dev753
手順3： GitHubにpushする
ここまで来たら、GitHubに適当にリポジトリを作成してpushします。
リポジトリを空で作成したらGitHubのリポジトリのトップページに書かれているコマンドを使ってpushするだけですね。
# いつものやつ
git remote add origin XXXX
git branch -M main
git push -u origin main
（pushしてもうまくいかない！って人はわからなければ"GitHub push うまくいかない"とか、エラー内容を入れてググって解決してください。その人によって原因が違いますし、それぞれにあった内容の記事はたくさん記事はあるためです。今回は趣旨がブレるので割愛します。）
手順4： GitHub ActionsのWorkflowを作成する
pushが成功したらGitHub ActionsのWorkflowでmainブランチにcommitが追加されたらサイトが最新の状態で公開される様にしたいと思います。
作成したGitHubのリポジトリのページでWorkflowを作成するためにActionsページを開き、yamlファイルを作成してcommitを作成します。（GitHub上でcommitを作成したら、ローカルにも反映忘れないようにpullしておきましょう）
https://dev.to/kotlin/hosting-kotlin-js-on-github-pages-via-github-actions-3gep
のSetting up GitHub Actionsのところを参考にしつつ、GitHubで探した内容をアレンジしたyamlファイルが以下です。
はい。
on:
push:
branches: [ "main", "master" ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up JDK 17
uses: actions/setup-java@v1
with:
java-version: 17
distribution: 'adopt'
- name: Grant execute permission for gradlew
run: chmod +x gradlew
- name: Buid JS bundle
run: |
./gradlew jsBrowserProductionWebpack
- name: Deploy 🚀 to GitHub Pages
uses: JamesIves/github-pages-deploy-action@3.7.1
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: github-pages # デプロイ用のファイルを配置するブランチ名
FOLDER: build/distributions # デプロイ用のファイルが排出されるフォルダ
CLEAN: true # Automatically remove deleted files from the deploy branch
あ、ちなみにJDKを17にしていますので参考サイトそのままではないです。（Compose for WebのプロジェクトをビルドするはJDKは１１以上である必要がありそうです）
github-pagesが公開されるHTMLが配置されるブランチであることに注意してください。
これで、mainブランチもしくはmasterブランチにコードがpushされたタイミングで、ビルドが入りgithub-pagesブランチに対してビルドでデプロイ用に生成されたファイルだけがcommitされます。あとはこのブランチをGitHub Pageの設定に教えてあげるだけです。
Start commitボタンを押して、Workflowを作成すると、すでにmain/masterブランチに対してpushしてあれば、自動的にWorkflowが実行されると思うので終了するのを待ちます。
コーヒーかお茶でも飲んで待ちましょう
demo1.js
demo1.js.map
index.html
がgithub-pagesブランチのRootフォルダに作成されていました。
手順5： GitHubのPages設定を行い、公開する
リポジトリのページからSettingsを選択し、Pagesにアクセスして、Branchを先ほどワークフローでgithub-pagesブランチを指定し、Rootフォルダを指定し、Saveボタンを押下。しばらく待つと、GitHub Pagesのトップに自分のデプロイしたhtmlファイルにアクセスできるURLリンクが表示されるので、クリックすれば動作確認ができます。
ここもググればすぐに解決しましたので、この説明で分からなければググってください。
まとめ
大まかですが、たった5つの手順を踏むだけでKotlinのComposeで作ったコードで作ったものを誰にでも見てもらえる様にできました。
現在自分の環境ではこれでうまく行きましたが、今はうまく行ってもそのうち上手くいかなると思うので。その時は、最新のGitHubの誰かのコードを探すという伝家の宝刀があるので、それでなんとかして仕舞えばいいと思います。
皆さんのちょっと便利なツールが公開されみんなで共有されたらいいなと思います。
今回はこれで動いたよって情報であって、やり方について推奨するものではありませんのでご注意ください。
それではエンジョイしてやっていきましょう。