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

検索のMicroservices化 with Apollo Server

roolrool
December 07, 2018

検索のMicroservices化 with Apollo Server

roolrool

December 07, 2018
Tweet

More Decks by roolrool

Other Decks in Technology

Transcript

  1. スペース検索のMicroservices化
    with Apollo Server
    2018.12.6
    Ryosuke Yamamoto

    View full-size slide

  2. 2
    自己紹介
    Ryosuke Yamamoto ( @roolrool )
    よちよちWebバックエンドエンジニアです。
    男子シンクロのインストラクター、 Webディレクターを経て2017
    年1月にスペースマーケットにジョイン。
    直近では新規事業やリニューアル PJを担当。
    開発比率:Webバックエンド 9:1 Webフロント

    View full-size slide

  3. 3
    改めまして、

    View full-size slide

  4. 4
    先日サイトリニューアルしました!

    View full-size slide

  5. 5
    before after
    トップ

    View full-size slide

  6. 6
    before after
    スペース検索一覧

    View full-size slide

  7. 7
    ではバックエンドは何がどう変わったのというお話。

    View full-size slide

  8. 8
    アジェンダ
    ● リニューアル概要
    ● 検索用DBの作成
    ● GraphQL APIの実装
    ○ Apollo Server
    ○ knex.js
    ○ TypeScript
    ● まとめ

    View full-size slide

  9. 9
    スペース検索のMicroservices化

    View full-size slide

  10. 10
    リニューアル概要

    View full-size slide

  11. 11
    旧全体図
    スマートフォンアプリ
    REST/GraphQL
    Webフロント/サーバー
    クライアント API DB
    RDS for MySQL

    View full-size slide

  12. 12
    リニューアル後全体図
    スマートフォンアプリ
    REST/GraphQL
    Webフロント/サーバー
    クライアント API DB
    RDS for MySQL
    GraphQL Amazon Aurora

    View full-size slide

  13. 13
    何をしたか
    ● 検索用のキャッシュテーブルをRDS for MySQLからAmazon Auroraへ移行
    ● REST APIからGraphQL APIへ移行
    ● Ruby on RailsからNode/Express/Apollo Serverへ移行
    ポイント

    View full-size slide

  14. 14
    検索用DBの作成

    View full-size slide

  15. 15
    検索用DBの作成
    ● 検索結果に必要なデータだけを持つテーブルを作成
    ○ スペース、空き情報、お気に入りなど
    ● 新規検索機能に答えられる設計
    ○ 正確な空き時間検索など
    ● 発行クエリ数やjoinを最小限に抑えられる設計
    ● スケーラブルなシステム
    ○ Amazon Auroraを採用
    ■ AutoScale・Reader Endpointによる読み込みの負荷分散
    方針

    View full-size slide

  16. 16
    GraphQL API

    View full-size slide

  17. 17
    GraphQL API
    ● GraphQL Server:Apollo Server
    ● HTTP Server:Express
    ● クエリビルダー:knex.js
    ● 言語:TypeScript
    技術スタック

    View full-size slide

  18. 18
    Apollo Server

    View full-size slide

  19. 19
    Apollo Server
    ● Apollo Client
    ○ React.jsやVue.jsなどのframeworkで使用するGraphQL Client
    ○ 弊社の各クライアントサイドでも使用
    ● Apollo Server
    ○ ExpressにアドオンするGraphQL Server
    ○ 今回初使用
    ● Apollo Engine
    ○ Apollo Serverのモニタリング、パフォーマンス計測
    ApolloプロジェクトのOSS

    View full-size slide

  20. 20
    Apollo Server
    ● ユニバーサルJSの流れ
    ● 公式ドキュメントが充実
    ● APIドキュメントを自動生成
    ○ GraphiQL的なもの
    ● playgroundが便利
    ● Apollo Clientとの親和性が高い
    ○ バッチリクエストなど
    ● Apollo Engineでモニタリングが容易
    Why Apollo Server Why

    View full-size slide

  21. 21
    Apollo Server - playground -

    View full-size slide

  22. 22
    Apollo Engine

    View full-size slide

  23. 23
    Apollo Server
    少し解説 #server.ts

    View full-size slide

  24. 24
    Apollo Server
    ● Object TypeやEnum Typeなどのスキーマ定義
    ● 記述方式は通常のGraphQL schema language
    ● 今回のリニューアルでは参照のみ(
    Mutationなし)
    スキーマ定義

    View full-size slide

  25. 25
    Apollo Server
    スキーマ定義(実装)
    ● typeごとに分けてmerge

    View full-size slide

  26. 26
    Apollo Server
    ● 各プロパティごとにresolver内で解決した値を返す
    ● スキーマ定義に記述した型で返す
    resolver

    View full-size slide

  27. 27
    Apollo Server
    resolver(実装)
    ● resolvers/index.tsを
    server.tsでimport
    ● 処理が多いresolverは
    メソッドに切り出し

    View full-size slide

  28. 28
    Apollo Server
    ● 第三引数以降にオプションを設定可能
    ○ contextの受け渡し
    ○ Apollo Engineの設定
    ○ playgroundの有効化
    Apollo Serverの初期化

    View full-size slide

  29. 29
    Apollo Serverの初期化(実装)
    Apollo Server
    ● 各resolversで使用するものは
    contextで受け渡し
    ○ ログインユーザー
    ○ DBコネクション
    ● playgroundはdevelopmentのみ

    View full-size slide

  30. 30
    Apollo Server
    ● ExpressのミドルウェアにApollo Serverを追加
    ○ defaultでは`/graphql`にルーティングが作成される
    ● listenするportを指定
    Expressとの連携

    View full-size slide

  31. 31
    Apollo Server
    ● ユーザー認証のタイミング
    ○ リクエスト時にtokenが渡った場合はRDSに問い合わせ、有効ならユーザー情報を
    ひく
    ■ Apollo Serverをnewする際のcontext引数にユーザー情報を渡す
    ■ 今考えると当然、でもその時はちょっと悩んだ思い出
    ● ディレクトリ設計/ファイル分割単位
    ○ resolver内は重くなりがちな印象
    ■ 各schema定義、各resolver、各modelは分けた方がよさそう
    ■ 情報が少ないので、あるべきは自分たちで考えないといけない
    実装時の個人的お悩みポイント

    View full-size slide

  32. 33
    knex.js
    knex.jsとは
    ● JavaScriptベースのSQLクエリビルダー
    ○ resolver内でのDBアクセス時に使用
    ● メソッドチェーンで直感的にSQLを組むことができる
    ● インターフェースとしてはコールバックや
    Promiseなど
    ● トランザクション処理もサポート
    ● コネクションプーリング
    ● Rails同様のmigration機能
    ○ 今回は使用せず

    View full-size slide

  33. 34
    knex.js
    (例)

    View full-size slide

  34. 35
    knex.js
    (例)
    _人人人人人人人人人人_
    > わかりやすい!!<
     ̄Y^Y^Y^Y^Y^Y^Y^Y ̄

    View full-size slide

  35. 36
    knex.js
    〜 O/Rマッパーに甘やかされた人間が救われた図 〜

    View full-size slide

  36. 37
    TypeScript

    View full-size slide

  37. 38
    TypeScript
    使ってみて
    ● JSのスーパーセットなので導入しやすい
    ● VSCodeの補完が便利(interfaceの定義など)
    ● Flowと違って型定義が必須なのがよい(必殺
    anyという手も)

    View full-size slide

  38. 40
    ● JavaScriptともっと仲良くなりたい

    View full-size slide