PlayとHerokuでSPAを作ってみた

はてなブックマークのランキングが閲覧できるサービス「BukumaRanking」を作った
勉強がてらPlayとDockerでSPA作ってみたので、実装方法、苦労した点を共有

Transcript

1. PlayとHerokuでSPA のアプリ作ってみ た
2. 自己紹介 ❏ 小石真人 ❏ Twitter: @umeneri 2
3. 概要 ❏ はてなブックマークのランキングが閲覧 できるサービス「BukumaRanking」を作っ た ❏ 勉強がてらPlayとDockerでSPA作ってみた ので、実装方法、苦労した点を共有 3
4. BukumaRanking ❏ 日別・週別・月別・年別・累計 4
5. BukumaRanking ❏ HotEntry（ブクマ数降順） 5
6. モチベーション - はてなブックマークが好き - 日間週間等の人気ランキングがほしい - 6
7. はてなブックマークの問題 - 人気順はできるが、全ブクマの検索はで きない仕様 - キーワードorタグorユーザー指定の検索 はできる 7
8. モチベーション - タグ検索で無理やり作る 8
9. SPA構成 9
10. 全体構成 ❏ フロントエンド： ❏ VueJs2.5 ❏ Bulma ❏ サーバーサイド： ❏ Play2.6.2(Scala) ❏ 本番サーバー： ❏ Docker ❏ Heroku 10
11. 構成(ローカル) 11 localhost:8 080 localhost:9000 1:index.html vue-routerで 切り替え 2: /api/** はてなRSS 3: RSS取得
12. 構成(本番) 12 index.html 1: /api以外のパス (/ranking/daily等) 2: /api/** はてなRSS 3: RSS取得
13. Playですべてを配信する ❏ Index.htmlやjs等の静的ファイルの配信 先 ❏ ローカル：vue-cliのサーバー ❏ 本番：play ❏ buildしたファイルをpublicへ置く ❏ / …public/index.html ❏ /*path … /api等一部のパス以外すべて public/index.html ❏ Controllerの実装： 13
14. Docker化 14
15. HerokuでPlayのコンテナを作るには 1. DockerのBaseImage選択 (java系) 2. Heroku用のアプリ側ソース修正 3. Heroku用のDockerfile修正 4. Dockerイメージ作成 5. イメージをHerokuのクラウドにpush 15
16. DockerのBaseImage選択 (java系) ▣ adoptopenjdk/openjdk11:alpine-slim ❏ 247 MB ❏ https://k11i.biz/blog/2018/10/29/base-docke r-images-for-java11/ 16
17. Heroku用のアプリ側ソース修正 ❏ PORTは可変で固定(9000等に)できない ❏ Heroku上で環境変数で定義されている$PORTをア プリ側に設定 ❏ （失敗）JAVA_OPTS="-Dhttp.port=$PORT" ❏ `heroku config`でアプリの使用する環境 変数を設定 ❏ PLAY_APPLICATION_SECRETなど 17
18. Heroku用のDockerfile修正 ❏ sbt-native-packager (1.3.10)で設定 ❏ CMDが空コマンドなので消す ❏ ENTRYPOINTはHerokuだと使えない罠 ❏ CMDに変換 18
19. sbt-native-packager1.3.19の罠 ❏ Dockerのビルドで以下行でエラー ❏ useradd --system --create-home --uid 1001 --gid 0 demiourgos728 ❏ alphineだとuseraddが使えない（adduserはある） ❏ 時間かけすぎたのでひとまずバージョンダウン ❏ 1.3.19 → 1.3.10 19
20. イメージの作成とpush ❏ $ sbt "docker:publishLocal" ❏ imageを生成 ❏ $ docker tag hatena:1.0 \ registry.heroku.com/<app-name>/web ❏ $ docker push registry.heroku.com/<app-name>/web ❏ $ heroku container:release web 20
21. まとめ ▣ 苦労した点 □ PlayをSPAで動かす方法わからない □ Docker化が地味に大変だった ▪ Heroku独特の設定でハマる ▪ sbt-native-packagerが一筋縄でいかない ▣ SPAの作り方とDocker化がわかってきた 21
22. 参考 ❏ [ScalaアプリをDockerイメージ化してHerokuにデプロイした話 - Chatwork Creator's Note](https://creators-note.chatwork.com/entry/2017/11/24/1027 49) ❏ スライド：[Free modern Powerpoint template or Google Slides theme with fresh colors](https://www.slidescarnival.com/desdemona-free-presenta tion-template/165) ❏ [Play2でのSPAコンテンツの配信の仕方 - Qiita](https://qiita.com/uryyyyyyy/items/0719dc4b25512b3d3e5f) 22