Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更した...
Search
gree_tech
PRO
September 18, 2020
Technology
0
300
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
GREE Tech Conference 2020 で発表された資料です。
https://techcon.gree.jp/2020/session/Session-2
gree_tech
PRO
September 18, 2020
Tweet
Share
More Decks by gree_tech
See All by gree_tech
REALITY株式会社における開発生産性向上の取り組み: 失敗と成功から学んだこと
gree_tech
PRO
2
190
『ヘブンバーンズレッド』におけるフィールドギミックの裏側
gree_tech
PRO
2
150
セキュリティインシデント対応の体制・運用の試行錯誤 / greetechcon2024-session-a1
gree_tech
PRO
1
140
『アナザーエデン 時空を超える猫』国内海外同時運営実現への道のり ~別々で開発されたアプリを安定して同時リリースするまでの取り組み~
gree_tech
PRO
1
120
『アサルトリリィ Last Bullet』におけるクラウドストリーミング技術を用いたブラウザゲーム化の紹介
gree_tech
PRO
1
150
UnityによるPCアプリの新しい選択肢。「PC版 Google Play Games」への対応について
gree_tech
PRO
1
240
実機ビルドのエラーによる検証ブロッカーを0に!『ヘブンバーンズレッド』のスモークテスト自動化の取り組み
gree_tech
PRO
1
180
"ゲームQA業界の技術向上を目指す! 会社を超えた研究会の取り組み"
gree_tech
PRO
1
230
Jamstack でリニューアルするグリーグループのメディア
gree_tech
PRO
2
390
Other Decks in Technology
See All in Technology
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
コンテナセキュリティのためのLandlock入門
nullpo_head
2
320
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110
OpenShift Virtualizationのネットワーク構成を真剣に考えてみた/OpenShift Virtualization's Network Configuration
tnk4on
0
130
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
150
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
Qiita埋め込み用スライド
naoki_0531
0
860
Featured
See All Featured
Fireside Chat
paigeccino
34
3.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Speed Design
sergeychernyshev
25
670
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
The Cost Of JavaScript in 2023
addyosmani
45
7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Code Reviewing Like a Champion
maltzj
520
39k
Transcript
NuxtJS + REST APIで 運用中サービスをNuxtJS + GraphQL に変更したことによる光と影 アウモ株式会社 エンジニアチームマネージャー
村田翔
自己紹介 2 • 名前 • 村田 翔 • 担当 •
サーバーサイド兼フロントエンドエンジニア • メインはRuby on Rails • aumo歴 • 3年弱(サーバーサイドでは最古参) • 旅行好きなのもあって、aumoに長らく在籍
3 ⓘ Start presenting to display the poll results on
this slide. aumoはご存知ですか?
• おでかけ領域をメインに、旅行やグルメ情報をお届けするメディア • アプリ • Webサービス aumoはご存知ですか? 4 記事サイト 比較サイト
<- 今回NuxtJS + GraphQLに変更した対象
5 記事 × SNS iOS Android
6 記事 × ユーザー生成コンテンツ
7 記事 × ユーザー生成コンテンツ × ホテル × 宿泊プラン横断検索
8 記事 × ユーザー生成コンテンツ × グルメ
9 記事 × ユーザー生成コンテンツ × レジャー・ショッピング
1.なぜREST APIからGraphQLに変更したのか 2.GraphQL化して見えたこと • 光 • エンドポイント • 仕様変更 •
影 • N+1 • エラーハンドリンク • ログ解析 今日お伝えすること 10
1.なぜREST APIからGraphQLに変更したのか 2.GraphQL化して見えたこと • 光 • エンドポイント • 仕様変更 •
影 • N+1 • エラーハンドリンク • ログ解析 今日お伝えすること 11
12 ⓘ Start presenting to display the poll results on
this slide. GraphQL使っていますか?
• バックエンド • Ruby on Rails • REST API •
GraphQL • graphql • graphql-batch • graphiql-rails • フロントエンド • NuxtJS • ログ監視 • Papertrail • Sentry 構成 13
構成 14 Amazon EC2 Amazon EC2 ELB サブドメインで 3サイトを同一インスタンスに搭載 フロントエンド
バックエンド
構成 15 Amazon EC2 Amazon EC2 ELB サブドメインで3サイト搭載 • middlewareでFQDN毎にパスチェック
• 各トップページはFQDNを元にコンポーネント出しわけ • 各詳細ページはNuxtJSのディレクトリ規約に沿って設置 フロントエンドでのサイト分割
• エンドポイントを極力増やしたくない • 工数削減 16
初期から3サイト作成 という要件なのかというと... 17
初期要件 18 • ホテルの比較サイトを作りましょう • 単一サイトなので既存の記事サイト同様にバックエンドはREST API でいいか
• グルメのサイトも作りましょう • バックエンドはAPIのエンドポイント増やして対応すればいいか 要件追加 19
要件追加 20 • レジャー・ショッピングのサイトも作りましょう • さらに別ジャンルで展開する可能性出てくるなこれ🤔 • APIのエンドポイントを都度増やしていくのは何だかなぁ
要件追加 21 • 各サイトを巡回されるような動線になる要素欲しいですね • 各サイト用に用意しているAPIエンドポイントそれぞれ修正いるな • API多いと作業煩雑だし、また類似の要件追加くるだろなこれ 🤔
そこで... 22
• クエリ言語 • エンドポイント単一 • 必要な情報だけ取得できる • クエリで指定したフィールドのみ返却される • Facebook社が2012年から開発
• 採用している組織はFacebook、GitHub、PayPalなど数百を越す GraphQLとは 23
各サイトで必要な情報を共通のエンドポイントで 網羅できるのは、実装が楽になりそうな予感! ※新しい技術を取り入れたい欲有あり 24
実際にREST API -> GraphQL化してみた 25
1.なぜREST APIからGraphQLに変更したのか 2.GraphQL化して見えたこと • 光 • エンドポイント • 仕様変更 •
影 • N+1 • エラーハンドリンク • ログ解析 今日お伝えすること 26
エンドポイント 27 [GET] /api/v1/hotels [GET] /api/v1/hotels/{hotel_id} [GET] /api/v1/hotels/search [GET] /api/v1/gourmets
[GET] /api/v1/gourmets/{gourmet_id} ・ ・ ・ ルーティング追加して、 コントローラー追加して、 ビュー追加して・・・ • サイト追加毎に増えていくエンドポイント...
• エンドポイント単一 エンドポイント 28 [GET] /api/v1/hotels [GET] /api/v1/hotels/{hotel_id} [GET] /api/v1/hotels/search
[GET] /api/v1/gourmets [GET] /api/v1/gourmets/{gourmet_id} ・ ・ ・ ルーティング追加して、 コントローラー追加して、 ビュー追加して・・・ [POST] /graphql スキーマとフィールド更新のみ ×
• 各サイトの詳細ページに周辺施設情報の要素追加したい 画面仕様変更への対応 仕様変更 29
• REST APIの場合 • バックエンド • 対象エンドポイントのレスポンスに要素追加 or エンドポイント追加 •
フロントエンド • 新規要素表示 • エンドポイント追加の場合は新たに呼び出し追加 各サイトの詳細ページに周辺施設情報の要素追加したい 仕様変更 30
• GraphQLの場合 • バックエンド • スキーマとフィールド更新 • フロントエンド • 新規要素表示
• クエリに新規で追加する要素を追記 各サイトの詳細ページに周辺施設情報の要素追加したい 仕様変更 31
追加の場合はあまり工数的にかわらなそう🤔 各サイトの詳細ページに周辺施設情報の要素追加したい 仕様変更 32
• REST APIの場合 • バックエンド • 対象のエンドポイントのレスポンスから削除 or エンドポイント追加 •
フロントエンド • 要素削除 各サイトの詳細ページに周辺施設情報の要素削除したい 仕様変更 33
各サイトの詳細ページに周辺施設情報の要素削除したい 仕様変更 34 • GraphQLの場合 • バックエンド • そのまま •
フロントエンド • 要素削除
各サイトの詳細ページに周辺施設情報の要素削除したい 仕様変更 35 • 要素削除の場合はフロントエンドの修正だけでいける • バックエンドは対象の要素をクエリで指定されない限り、その要素を 取得する処理は走らないため無駄が出ない
1.なぜREST APIからGraphQLに変更したのか 2.GraphQL化して見えたこと • 光 • エンドポイント • 仕様変更 •
影 • N+1 • エラーハンドリンク • ログ解析 今日お伝えすること 36
• スキーマ毎にクエリが走る associationが適切なタイミングでeager loadされていない N+1 37
• loadの該当fieldを要求されたときだけeager loadが走り、事 後でWHERE INされる graphql-batchを導入 N+1 38
• フロントエンドでレスポンスステータスによるエラーハンドリ ングができない GraphQLは常にレスポンスステータス200を返却する エラーハンドリング 39 ×
• catchの中でerror関数を呼ぶ レスポンスステータスによるエラーハンドリングは行わない エラーハンドリング 40
• エンポイントが単一なため全て request_uri: /graphql • レスポンス速度の調査などで問題箇所の洗い出しが困難 リクエストパス毎の解析ができない ログ解析 41
• リクエストボディ毎に分けることで呼び出し箇所の分類できる • レスポンス速度などに問題がある箇所の特定できる リクエストボディまでログに出力する ログ解析 42
まとめ 43
• エンドポイントを極力増やしたくない ◦ 同じ情報を複数サービスで使い回す場合に有効 • 工数削減 ◦ 画面要件が頻繁に変わるサービスでは効果高い 44 ୡ
ୡ
45