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
Cookpad summer internship 2019 - API
Search
Ken Wagatsuma
August 21, 2019
Programming
0
10k
Cookpad summer internship 2019 - API
A lecture slide for
https://internship.cookpad.com/2019/summer/
(Day 3 ).
Ken Wagatsuma
August 21, 2019
Tweet
Share
More Decks by Ken Wagatsuma
See All by Ken Wagatsuma
Pregel Graph Compute Engines - Supersteps Exampls
kenju
1
200
Kafka on Kubernetes with Strimzi
kenju
1
140
AWS DynamoDB Accelerator (DAX) 101
kenju
3
6.9k
Moden browser introduction
kenju
1
360
Introduction to Design Patterns
kenju
0
66
GraphQL Asia 2019 "Re-architecture of a decade-old app with BFF/GraphQL"
kenju
0
8.8k
Introduction to TypeScript
kenju
0
680
Introduction to Programmatic Ad
kenju
0
220
社内管理システムのための技術選定
kenju
0
740
Other Decks in Programming
See All in Programming
Contemporary Test Cases
maaretp
0
140
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
React への依存を最小にするフロントエンド設計
takonda
1
230
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
940
subpath importsで始めるモック生活
10tera
0
320
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
cmp.Or に感動した
otakakot
3
200
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Building Applications with DynamoDB
mza
90
6.1k
The Language of Interfaces
destraynor
154
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
A better future with KSS
kneath
238
17k
Scaling GitHub
holman
458
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Building an army of robots
kneath
302
43k
Transcript
Cookpad Internship 2019 10 Day Tech: API Kenju Wagatsuma KOBA789
Yoshiaki Yamada
今日は API です • 講師 ◦ @kenju_wagatsuma • TA ◦
@KOBA789 ◦ @ymd
講師: @kenju_wagatsuma • 我妻 謙樹(Kenju Wagatsuma) • メディアプロダクト開発部マーケティングサービス開発グ ループ •
広告配信サーバー・入稿システム・リアルタイムログ基盤等 広告にまつわるシステムの保守運用
広告関連システム概要 Operation Team Data Warehouse Ad Creative Optimization Ad Campaign
Ordering Service Ad Delivery Service Targeting Service Delivery Metadata Mobile Client Ad Creatives log
Linux OS Docker, Terraform, Jenkins DevOps Nginx, Fluentd, ELB Infra
Ruby Rails TypeScript React.js GraphQL Apollo Ruby Rails Go AWS ElastiCache AWS DynamoDB Service Mesh Envoy Python AWS APIGateway AWS Lambda Tableau Application SQL AWS Redshift AWS Athena Ruby Python AWS Kinesis AWS DynamoDB AWS Lambda Batch Layer Streaming Layer Ad creative admin service Ad delivery service Logging Machine Learning 広告関連システム選定技術一覧
TA: @KOBA789 • 平成7年8月9日生まれで789 • ビッグデータをいい感じにする仕事(それ以外もやる) • データベース・トランザクション・分散システム • 代表作:
Prism(分散ログストレージ) • よく書く: Java, Rust, TypeScript
TA: @ymd • 山田 良明 • 研究開発部エンジニア • LambdaとDynamoDBを使ってスマートスピーカー 向けサービスを開発しています
Timeline • 1000-1130 講義パート A(基礎編) • 1130-1300 Handson • 1300-1400
ランチ • 1300-1400 講義パート B(応用編) • 1400-1830 Exercise ※ 休憩は各位適宜取得してください
tl;dr • Backend-For Frontend(以下:BFF) を Node.js / GraphQL / TypeScript
を使って開発します • 現場の実際の開発にかなり近い開発体験を経験することが できます
NOTE • ハンズオン編は zoom で画面共有します ◦ WiFi 接続速度によって柔軟に対応しましょう • 後日インフラの日に触れる技術要素は
Blackbox で行きま すので心配しないでください ◦ e.x. hako, SAM, DynamoDB, facebook/dataloader, etc.
講義パート A(基礎編)
講義パート A(基礎編)でやること • 基礎技術詳解をします ◦ BFF ◦ GraphQL
Keywords • Microservices • レガシーと新システムの両立 • Ruby/Rails だけでない、幅広い技術選定 • Serverless
BFF
BFF at Cookpad https://techlife.cookpad.com/entry/2019-orcha-bff
What’s BFF? • Pattern: Backends For Frontends by Sam Newman,
the author of “Building Microservices” • Definition: “Single-purpose Edge Services for UIs and external parties” https://samnewman.io/patterns/architectural/bff/
One of “API-Gateway” Patterns https://microservices.io/patterns/apigateway.html BFF は API-Gateway Patterns と呼ばれる設計パ
ターンの一種。 ※ RESTful API / GraphQL は実装の詳細である。 GraphQL だけが BFF では ない点に注意。
Legacy New BFR Backend for Resource Frontend Resource Resource Legacy
Usecase New Usecase
Legacy New RESTful API, GraphQL Schema BFR Backend for Resource
BFF Backend for Frontend Frontend Resource Resource Legacy Usecase New Usecase
GraphQL
About GraphQL • API のためのクエリ言語の仕様 • Facebook で 2012 年から開発され、2015
年に OSS 化、そ の後 GraphQL Foundation が設立されるなどコミュニティも 拡大 • JavaScript や Ruby を始めとした実装多数
BFF x GraphQL 以下の Backend Resources を Client に対 して隠蔽する設計パターン
• RDBMS/NoSQL などの Datasource • 新規システム • 既存システム • 3rd-Party API https://www.howtographql.com/basics/3-big-picture/
schema.graphql • 型とクエリ操作を定義した宣言ファイル • 手動で書く場合、DSL から自動生成する場合(e.g. graphql-ruby)、型定義から自動生成する場合(e.g. graphql-codegen)などのパターンが有る
Query • データを取得するための操作を定義 • 欲しいデータの、欲しいフィールドを宣言的に書く ▪ 利点 • Over-fetching /
Under-fetching を防ぐ • クライアント開発において欲しいデータを宣言的 に書けることで保守性が向上
Mutation • データの作成・削除・更新など副作用をもたらす操作を定義 • RESTful API で言うところの POST/DELETE/PUT/PATCH に相当することが多い
Introspection • GraphQL server に対して、どのような型システムやクエリ操 作を提供しているかを問い合わせるための、GraphQL の仕 様 • デバッグや
docs 生成、ツール作成時等に多様 • スキーマ、型、フィールド情報などが取得できる
具体例 実際の API を利用して具体例を見せます • schema.graphql • GraphQL Playground •
Query Example
Handson
Handson でやること • アプリのシステム概要を紹介します • ハンズオン演習内容を発表します
pantry Koresuki (Likes) BFF (GraphQL) Schema pantry AWS API Gateway
Mobile Client AuthoCenter AWS Lambda AWS DynamoDB voyager user backend
System Architecture
クライアント側仕様 • シンプルな mini Cookpad を実装します ◦ レシピ一覧 ◦ レシピ詳細
◦ いいね一覧
クライアント側仕様 • Cookpad 本体アプリも利用している同等の Backend Service を利用します ◦ “pantry” と呼ばれる
• 「いいね」機能はフルスクラッチで実装します ◦ AWS サービス群を利用した Serverless 構成
List Detail Likes
pantry Koresuki (Likes) BFF (GraphQL) Schema pantry AWS API Gateway
Mobile Client AuthoCenter AWS Lambda AWS DynamoDB voyager user backend BFF & Koresuki を 実装します
前提条件 以下の新システムを開発する • BFF Application ◦ pantry & Koresuki へのリクエスト
• Koresuki Application ◦ 「いいね」機能の実装
制約条件 以下の既存システムは実装を加えることができない • pantry ◦ pantry が提供する API を使うしか無い •
AuthoCenter ◦ 認証フローを拡張することはできない
“Simple” !== “Easy” • Likes の状態はどうやって保存する? • pantry と Koresuki
の結果をどう JOIN する? • GraphQL のキャッシュが必要になったらどうしたらよい? • 認証 (Authorization) に失敗したときは何を表示する? • pantry が死んだ時の retry 戦略はどうする? • Koresuki はどうスケールさせる? • NoSQL におけるインデックスはどう貼る? • 非機能要件をどこまで実装できる? • ID Token の検証が Bottleneck になった時、どこを改善する? • etc.
関連システムの解説
Systems • Pantry • AuthoCenter • AWS API Gateway •
AWS Lambda • AWS DynamoDB
Pantry • Cookpad レシピサービスのリソースを HTTP で操作するた めの API Server •
May 2013~ から開発スタートされた Rails app • レシピ一覧、レシピ詳細、カテゴリ一覧、殿堂入りレシピ、検 索、人気順、... etc.
Pantry • 実際の Cookpad で利用されている「本物」です • Summer Internship 用に、インフラ定義だけ変えた Staging
版を deploy しています
AuthCenter • OAuth2 認可を行うための Web application • RFC 6749 (The
OAuth 2.0 Authorization Framework) に 則った基本に加え、固有の拡張がいくつか存在する • アクセストークンの発行, アクセストークンの検証
AuthoCenter(通称:大嘘センター) • @KOBA789 謹製, Rust 製 • Summer Internship 用に作られた
AuthCenter を模した Web application • 任意の user_id を渡すと ID Token が発行される
ID Token • JSON Web Token (JWT) を署名したもの ◦ RFC7519
• 署名方法 ◦ JSON Web Signature (JWS) RFC7515 ◦ JSON Web Key (JWK) RFC7517
ID Token header body signature . . Base64 Encode された
JSON Web Token (JWT) { “iss”: “https://….”, “sub”: “16672509”, .... } ※ JWS で JWT を署名した形式
AWS API Gateway • HTTP な RESTful API のためのマネージドサービス •
Canary Release や認証機能等 API 開発には欠かせない機 能提供の他、CloudWatch と連携した Logging/Monitoring/Alerting などが有用
AWS Lambda • サーバー環境のセットアップなしに、任意のプログラムを実 行できるマネージドサービス • ビジネスロジックの開発に集中することができる • Java/Go/PowerShell/Node.js/C#/Python/Ruby の言語を
Native でサポート
AWS DynamoDB • Amazon で高可用性・拡張性を兼ね備 えた分散 KVS として開発された Dynamo の商用版
• ショッピングカート機能のバックエンド などに利用
Handson
Handson • 以下の内容に沿って解説していきます ◦ ghe.ckpd.co/pages/tech/2019-summer-internship/api
講義パート B: 応用編
講義パート B: 応用編でやること • ハンズオン応用編の内容を紹介します • ハンズオン応用編を進めるにあたって必要な技術を解説し ます
Keywords • More GraphQL Specification • Error Handling w/ GraphQL
• Relay Cursor Connection • Kill N+1
More GraphQL Specification https://ghe.ckpd.co/pages/tech/2019-summer-internship/bff/graphql_tips • Null / Non-Null •
Interface • Union • Scalar • Enum • Directive
Error Handling w/ GraphQL • HTTP Status = 200 OK
のまま、“errors” にエラーの Stack traces を含める ◦ https://graphql.github.io/graphql-spec/June2018/#sec-Errors • あくまで Best Practices(apollo-server や graphql-ruby など 多くのツールが従っている)
Error Handling w/ GraphQL • 理由 ◦ 例)pantry へのリクエストがエラーになったからって、他 の
Backend Resources からのレスポンスなど全ての フィールドが エラーになると、GraphQL を BFF としてら 使う旨味が半減 ◦ 返せるものは返す
例) 前提条件 • “name” field が Non-Null • id=1002 のデータは、”name”
field が Null 結果 • id=1001, 1003 の結果は返却され る • “errors” field に id=1002 のデー タが取得できない理由を格納。ど う処理するかはクライアント次第
Relay Cursor Connection • https://facebook.github.io/relay/graphql/connections.htm • Pagination に関する Practice の一つ
• GraphQL Framework の一つであり、Facebook が主だって 開発している Relay で実装されている • Connection/Edge/Node/PageInfo
Example) • edges ◦ edge (node + cursor) の配列
• cursor ◦ カーソル。一連の Edges にアクセス する際の現在位置を表現 ◦ String に serialize 可能な型 • node ◦ Pagination で返却したいデータ • pageInfo ◦ hasNextPage & endCursor ◦ hasPreviousPage & startCursor
graphql/dataloader • Caching ◦ 同じ Request Parameters のレスポンス結果は、リクエス トごとにキャッシュして再利用 •
Batching ◦ Promise (JavaScript の標準 API)を利用して resolver を遅延評価、同じリクエストは一括処理(batch)する
実践パート B: Exercise
総括
総括 • 総括 by TA • 総括 by 講師
Thank you!