Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PlayとHerokuでSPAを作ってみた

7e5c469c0a128ee8ee9f665c604c4cb2?s=47 umeneri
April 18, 2019

 PlayとHerokuでSPAを作ってみた

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

7e5c469c0a128ee8ee9f665c604c4cb2?s=128

umeneri

April 18, 2019
Tweet

Other Decks in Technology

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