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

Rails + TypeScript + React + Hypernovaで始めるSSRライフ

hatappi
July 14, 2018
1.6k

Rails + TypeScript + React + Hypernovaで始めるSSRライフ

Rails Developers Meetup 2018 Day 3 Extreme

hatappi

July 14, 2018
Tweet

Transcript

  1. Rails + TypeScript + React +
    Hypernovaで始めるSSRライフ
    Rails Developers Meetup 2018 Day 3 Extreme
    @hatappi

    View Slide

  2. About me
    • Yusaku Hatanaka (@hatappi)
    • Speee, Inc
    • Ruby, Go, TypeScript, etc.
    • Roppongi.rb organizer
    • Vimmer (vimと同じ年)
    • 煎り⼤⾖が好き

    View Slide

  3. 今⽇話すこと
    • 作成したシステムの全体像
    • どういった技術選定を⾏ったのか
    • 開発の苦労話
    • etc

    View Slide

  4. 今⽇話さないこと
    • 何を作ったのかの詳細
    • 懇親会で聞いてください

    View Slide

  5. プライベートで
    開発してますか?

    View Slide

  6. • Red Chainer
    • キュレーションサービス <= 今回話す
    • Slackで使うアンケートシステム
    • 家庭内Railsアプリ(ゴミ出しとかエアコンの遠隔操
    作)
    • etc

    View Slide

  7. Motivation
    • 技術的な検証の場がほしかった
    • 設定上はいけるはず!

    でも実際に反映したらどうなるのか知りたい!
    • toCやってみたい
    • Rubyでキメていたい

    View Slide

  8. システム全体像
    • Nginx, Rails, Puma on EC2
    • コンテンツはS3に保存されて
    おりCloudFront経由で配信
    • fluentdはnginxのログから
    GoogleBotなどを切り出して
    Datadogにメトリクスを送っ
    ている

    View Slide

  9. Datadog ダッシュボード

    View Slide

  10. システムを

    運⽤するにはお⾦が必要

    View Slide

  11. EC2 : t2.small $22
    RDS : db.t2.small $40
    ALB, CloudFront, etc.. $18
    $80
    約8,800円
    ⾒積もり

    View Slide

  12. た、⾼い

    View Slide

  13. 会社からのサーバー費⽀給
    システムの運⽤費 0円!!

    View Slide

  14. 使っている技術
    • React
    • TypeScript
    • Hypernova

    View Slide

  15. View Slide

  16. React
    • A JavaScript library for
    building user interfaces
    • Facebookが2011年にニュー
    スフィードに導⼊し2015年
    にオープンソースとして公開
    • JavaScriptの中にHTMLを記
    載するJSXを利⽤できる
    +49

    View Slide

  17. なぜReactなのか?
    • 基本的にはslimで書くが⼀部分だけコンポーネント
    に置き換えたい
    • 極⼒コンポーネントをステートレスにする
    • 数週間後の⾃分が⾒てもわかるΑ͏ʹ
    • ΍ͬͯΈ͔ͨͬͨ

    View Slide

  18. View Slide

  19. TypeScript
    • Microsoftが開発したオープンソースのプログラミン
    グ⾔語
    • Javascriptが動的型付けなのに対してTypeScriptは静
    的型付け
    • コード補完も効く
    • TypeScriptͰॻ͔Εͨίʔυ͸tscΛ༻͍ͯ
    JavaScriptʹίϯύΠϧ͢Δ

    View Slide

  20. なぜTypeScriptなのか?
    • 型があることで明らかなエラーを防ぐことが出来る
    • 数週間後の⾃分がこの値は⽂字列?数値?といっ
    た曖昧さから解放される
    • やってみたかった

    View Slide

  21. Hypernova

    View Slide

  22. Hypernova
    • JavaScriptコンポーネントをSSR(サーバーサイドレ
    ンダリング)するためのライブラリ
    • AirbnbがOSSとして公開している
    • https://github.com/airbnb/hypernova

    View Slide

  23. Hypernova
    • hypernova/server
    • nodejsで作られたHTTPサーバー
    • コンポーネント名とpropsを受け取りHTMLを返す
    • hypernova/react
    • サーバー、クライアント両⽅で動作するhypernova/server⽤のイ
    ンターフェースを提供
    • hypernova/ruby
    • hypernovaサーバーと連携するためのgem
    • Rails⽤にhelperなどを提供する

    View Slide

  24. HypernovaとRails

    View Slide

  25. なぜHypernovaなのか?
    • サーバー側でのエラーはブラウザで表⽰される
    • GoogleBotと仲良く出来る
    • JavaScriptを解釈してくれるようになったとはいえ100%ではな
    い!
    • 例:)GoogleにインデックスされたタイトルがJavaScriptが動作した
    ものもあれば、そうでないものも
    • やってみたかった
    • 以前使ったことはあったが0から⼊れてみたかった

    View Slide

  26. 開発の苦労話

    View Slide

  27. サーバーとクライアントで
    描画されるものが違う
    • 極⼒サーバーとクライアントで差異がないように!
    • どうしても差異が出てしまう場合は
    componentDidMount()などで処理を⾏う

    View Slide

  28. ⾃分が何を考えていたのか忘れる
    • プライベートに限らず⾃分が何を考えていたのか忘
    れてしまう
    https://kibe.la/ja
    ·ͩܗʹͳΒͳ͍ΞΠσΞͳͲ
    ະདྷͷࣗ෼ͱͷ৘ใڞ༗͸Kibela΁
    https://blog.hatappi.me
    ٕज़తͳΞ΢τϓοτͳͲܗʹ
    ͳΔ΋ͷ͸ϒϩάͰެ։

    View Slide

  29. AWSの値段が⾼い問題
    • ⽉に$80くらいのはずが$100超え
    • CloudWatchͷGetMetricsData API͕ݟʹ֮
    ͑ͷͳ͍ྉۚ

    View Slide

  30. AWSの値段が⾼い問題
    • Datadogが使っているサービスのメトリクスも
    CloudWatch経由でとるようになっていた

    View Slide

  31. AWSの値段が⾼い問題
    • 安くはなったけど1⽇$2はまだ⾼い。。。

    View Slide

  32. デザイン出来ない問題
    • デザイン全く出来ない
    • Bootstrap ??
    • jQueryを使うことが前提となってると今回は厳し

    • 0からCSSを書き始めるのはもっと厳しい

    View Slide

  33. デザイン出来ない問題
    • BULMA - https://bulma.io/
    • CSS3標準のFlexboxをベースとしたOSSのCSSフ
    レームワーク
    • レスポンシブデザインにも対応

    View Slide

  34. 作業時間の確保
    • 平⽇は仕事
    • 休⽇は家族と過ごしたり
    まとまった時間がとれない中

    どうやってプライベートでコードを書くか

    View Slide

  35. 作業時間の確保
    “Write Code Every Day - John Resig”

    https://johnresig.com/blog/write-code-every-day/
    • 毎⽇ 1commit、1PRを⽬標にして少しづつでもコー
    ドを書き続けられるようにする
    • 無理はしない

    View Slide

  36. まとめ
    • SSRはGoogleとも仲良くできるしHypernovaを使うと現
    時点では初期設定以降困ったことは起きていない
    • プライベートの開発
    • 楽しむ
    • 無理をしない
    • サーバー費1万円⽀給は最⾼
    • 平⽇に⼀⼈だと作業出来ないという⽅は...

    View Slide

  37. ⼀緒にもくもくしませんか?
    IUUQTSPQQPOHJSCDPOOQBTTDPNFWFOU

    View Slide