GCP先日、『g4』というポモドーロ+RPGなサービスをリリースしました。そのサービスで使った技術について聞かれることがあったので残しておきます。どんなサービス?ポモドーロ・タイマーを使い25分間集中すると経験値をもらえ、その経験値でレベルが上がる。https://www.g-g-g-g.gamesこんな特徴があります。ポモドーロ・タイマーやRPG的なUIはリッチで動きがある現在のステータスをOGP画像にしてシェアできる上昇する能力値や覚えるスキルは登録した文章を解析して決まる構成はこんな感じフロントエンドの選定理由フロントエンドはSSRしたReactアプリをfly.ioにおいています[React]自分は過去に仕事でNuxt.jsや生Vue.jsを使ったことがあり、個人ではExpoやNext.jsでReactにも触っていました。今回Reactを選択した理由は以下です。HooksめっちゃいいApolloを使うならVueよりReactのほうが色々揃っている[fly.io]SSRするためにNode.jsをホスティングするやつが欲しかったので選定。mizchiさんのブログで知り、面白そうだなと思ったのがきっかけ。Runを使うことになってしまっています(後述)(サポートに聞いたらリポジトリ教えてもらったので(OSS)対応できるようなら自分で対応してなげたいなぁ)キャッシュコントロールもよいキャッシュの操作も面白くて、g4の公開用ページではAPIからもらった結果をキャッシュして、キャッシュがあればそれをそのまま返すということをしています。これによってAPIサーバーへの負荷はかなり低くなってると思います。APIサーバー側からは、データ更新時にfly.ioのキャッシュを削除する操作をしていて、データが更新されるまではfly.ioはキャッシュを使い続けてます。この辺のAPIが普通に使いやすくて簡単にかけるのでめっちゃ良きです。fly.io良いよfly.io自体ははデプロイも早いし、導入コストも安いのでnowとかと並べて、手軽にNode.jsをホスティングするための選択肢にしてもいいんじゃないかなって思います。Next.jsを選ばなかった理由SSRする予定ではありましたが、OGPだけ生成できればいいなというレベルだったので、通常のReactアプリで作りました。最初は、Expoで作ろうかと思っていました。Firebaseで作り、マルチブラウザ対応が辛いと思った経験がありました。いうアプリでExpoを試しみて、使い勝手が良い事までは確認してました。今回はモバイルより、デスクトップアプリのほうが欲しいということに気づき、Electronで作りやすかったり、PWAならそのままインストールもできちゃうのでWebでいいかなって思いPWAにしました。マルチブラウザ辛いは解決してないです。ここは個人開発なので修行と割り切って本業に生かしていきます。Safari対応が結構めんどいけど、ユーザー多くて無視できない...マルチブラウザと言っても、現状Chrome、Safari以外はほぼ無視してまっす。APIも辛いだろうなと思って、GraphQLに手をだしたのがきっかけでした。Clientがいいのはキャッシュコントールで、クエリ毎にキャッシュを優先するかサーバーを優先するかを選択できます。キャッシュがあれば再取得しないなどを簡単に書けたり、とにかくこれはSPAのベストプラクティスだなって感じの実装をシンプルに書けます。Client使おうぜ!こいつのおかげでこれまたAPIサーバーの負荷はまあまあ抑えられてそうです。Storage]についてバックエンドはRailsですが、APIサーバー作るのに正直Deviseとか使いたくないです(完)Twitter連携やら諸々簡単なので選ばない理由がない。Auth0は選択肢に入るけど今回GCPなのでGoogleでまとめられるし、そこまで込み入った認証必要ないしでこれにしました。Authの認証ユーザー単位での権限指定が楽なので使い勝手は良いです。デザインについてg4のデザインはレスポンシブのヘルパーとしてbootstrap-gridだけ使わせてもらってます。それ以外はcss全部自分で書いてます。Designの粒度で、Storybook作ってコンポーネントを作ってる感じです。Storybookは割とぶっ壊れやすかったり、他のビルド設定と競合とか重複したり、辛みもありますが、storyshotsによるスナップショットの差分確認ができるのと、テストの安心感があるので、無いと無いで不安ではあります。Clientの項で書きましたが、GraphQLを使うことは決まっていました。GraphQLをマネージドでホスティングしてくれるやつを探したりしたんですが、普段Railsエンジニアなので慣れてるからテストとかも書きやすいしRailsでいっかで、graphql-rubyにしました。稼働してないものにお金払うみたいなことにならない想定(自分が使い続ける)で、コストかける覚悟はしました。graphql-rubyは仕事でも使ってるので、今後も押していきたい存在。Engineについてはこちらの記事で書きました。要約するとHerokuでも良かったけど、使ってみたかったのでGCPにした。