検索のMicroservices化 with Apollo Server

Transcript

1. スペース検索のMicroservices化 with Apollo Server 2018.12.6 Ryosuke Yamamoto
2. 2 自己紹介 Ryosuke Yamamoto ( @roolrool ) よちよちWebバックエンドエンジニアです。 男子シンクロのインストラクター、 Webディレクターを経て2017 年1月にスペースマーケットにジョイン。 直近では新規事業やリニューアル PJを担当。 開発比率：Webバックエンド 9:1 Webフロント
3. 3 改めまして、
4. 4 先日サイトリニューアルしました！
5. 5 before after トップ
6. 6 before after スペース検索一覧
7. 7 ではバックエンドは何がどう変わったのというお話。
8. 8 アジェンダ • リニューアル概要 • 検索用DBの作成 • GraphQL APIの実装 ◦ Apollo Server ◦ knex.js ◦ TypeScript • まとめ
9. 9 スペース検索のMicroservices化
10. 10 リニューアル概要
11. 11 旧全体図 スマートフォンアプリ REST/GraphQL Webフロント/サーバー クライアント API DB RDS for MySQL
12. 12 リニューアル後全体図 スマートフォンアプリ REST/GraphQL Webフロント/サーバー クライアント API DB RDS for MySQL GraphQL Amazon Aurora
13. 13 何をしたか • 検索用のキャッシュテーブルをRDS for MySQLからAmazon Auroraへ移行 • REST APIからGraphQL APIへ移行 • Ruby on RailsからNode/Express/Apollo Serverへ移行 ポイント
14. 14 検索用DBの作成
15. 15 検索用DBの作成 • 検索結果に必要なデータだけを持つテーブルを作成 ◦ スペース、空き情報、お気に入りなど • 新規検索機能に答えられる設計 ◦ 正確な空き時間検索など • 発行クエリ数やjoinを最小限に抑えられる設計 • スケーラブルなシステム ◦ Amazon Auroraを採用 ▪ AutoScale・Reader Endpointによる読み込みの負荷分散 方針
16. 16 GraphQL API
17. 17 GraphQL API • GraphQL Server：Apollo Server • HTTP Server：Express • クエリビルダー：knex.js • 言語：TypeScript 技術スタック
18. 18 Apollo Server
19. 19 Apollo Server • Apollo Client ◦ React.jsやVue.jsなどのframeworkで使用するGraphQL Client ◦ 弊社の各クライアントサイドでも使用 • Apollo Server ◦ ExpressにアドオンするGraphQL Server ◦ 今回初使用 • Apollo Engine ◦ Apollo Serverのモニタリング、パフォーマンス計測 ApolloプロジェクトのOSS
20. 20 Apollo Server • ユニバーサルJSの流れ • 公式ドキュメントが充実 • APIドキュメントを自動生成 ◦ GraphiQL的なもの • playgroundが便利 • Apollo Clientとの親和性が高い ◦ バッチリクエストなど • Apollo Engineでモニタリングが容易 Why Apollo Server Why
21. 21 Apollo Server - playground -
22. 22 Apollo Engine
23. 23 Apollo Server 少し解説 #server.ts
24. 24 Apollo Server • Object TypeやEnum Typeなどのスキーマ定義 • 記述方式は通常のGraphQL schema language • 今回のリニューアルでは参照のみ（ Mutationなし） スキーマ定義
25. 25 Apollo Server スキーマ定義（実装） • typeごとに分けてmerge
26. 26 Apollo Server • 各プロパティごとにresolver内で解決した値を返す • スキーマ定義に記述した型で返す resolver
27. 27 Apollo Server resolver（実装） • resolvers/index.tsを server.tsでimport • 処理が多いresolverは メソッドに切り出し
28. 28 Apollo Server • 第三引数以降にオプションを設定可能 ◦ contextの受け渡し ◦ Apollo Engineの設定 ◦ playgroundの有効化 Apollo Serverの初期化
29. 29 Apollo Serverの初期化（実装） Apollo Server • 各resolversで使用するものは contextで受け渡し ◦ ログインユーザー ◦ DBコネクション • playgroundはdevelopmentのみ
30. 30 Apollo Server • ExpressのミドルウェアにApollo Serverを追加 ◦ defaultでは`/graphql`にルーティングが作成される • listenするportを指定 Expressとの連携
31. 31 Apollo Server • ユーザー認証のタイミング ◦ リクエスト時にtokenが渡った場合はRDSに問い合わせ、有効ならユーザー情報を ひく ▪ Apollo Serverをnewする際のcontext引数にユーザー情報を渡す ▪ 今考えると当然、でもその時はちょっと悩んだ思い出 • ディレクトリ設計/ファイル分割単位 ◦ resolver内は重くなりがちな印象 ▪ 各schema定義、各resolver、各modelは分けた方がよさそう ▪ 情報が少ないので、あるべきは自分たちで考えないといけない 実装時の個人的お悩みポイント
32. 32 knex.js
33. 33 knex.js knex.jsとは • JavaScriptベースのSQLクエリビルダー ◦ resolver内でのDBアクセス時に使用 • メソッドチェーンで直感的にSQLを組むことができる • インターフェースとしてはコールバックや Promiseなど • トランザクション処理もサポート • コネクションプーリング • Rails同様のmigration機能 ◦ 今回は使用せず
34. 34 knex.js （例）
35. 35 knex.js （例） ＿人人人人人人人人人人＿ ＞　わかりやすい！！＜ ￣Y^Y^Y^Y^Y^Y^Y^Y￣
36. 36 knex.js 〜 O/Rマッパーに甘やかされた人間が救われた図 〜
37. 37 TypeScript
38. 38 TypeScript 使ってみて • JSのスーパーセットなので導入しやすい • VSCodeの補完が便利（interfaceの定義など） • Flowと違って型定義が必須なのがよい（必殺 anyという手も）
39. 39 まとめ
40. 40 • JavaScriptともっと仲良くなりたい