検索のMicroservices化 with Apollo Server

by roolrool

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 改めまして、

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 before after トップ

Slide 6

Slide 6 text

6 before after スペース検索一覧

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 スペース検索のMicroservices化

Slide 10

Slide 10 text

10 リニューアル概要

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 検索用DBの作成

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 GraphQL API

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 Apollo Server

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 Apollo Server - playground -

Slide 22

Slide 22 text

22 Apollo Engine

Slide 23

Slide 23 text

23 Apollo Server 少し解説 #server.ts

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

32 knex.js

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 knex.js （例）

Slide 35

Slide 35 text

35 knex.js （例）＿人人人人人人人人人人＿＞　わかりやすい！！＜￣Y^Y^Y^Y^Y^Y^Y^Y￣

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 TypeScript

Slide 38

Slide 38 text

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