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
2022技育祭_映写資料②
Search
techtekt
November 18, 2022
Technology
0
640
2022技育祭_映写資料②
techtekt
November 18, 2022
Tweet
Share
More Decks by techtekt
See All by techtekt
Power BI 活用推進の歩み
techtekt
0
30
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
0
660
スクラム研修
techtekt
0
2.9k
データベース研修
techtekt
7
4.1k
良いコードとは 研修
techtekt
2
3k
Git研修1
techtekt
0
3k
React & Next.js研修
techtekt
0
2.9k
Security基礎研修
techtekt
1
2.9k
QAエンジニア組織立ち上げはじめの一歩
techtekt
0
660
Other Decks in Technology
See All in Technology
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
アプリがつくるNOT A HOTELブランド
hokuts
0
450
【SORACOM UG】SIM Deep Dive セキュアエレメント編
soracom
PRO
0
200
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
640
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
130
2024-04-06 AMeDAS to Lagoon SORACOM UG 2024-04-06
anysonica
0
120
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
DevOpsDays History and my DevOps story
kawaguti
PRO
2
720
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
0
140
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
130
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.1k
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
0
130
Featured
See All Featured
A better future with KSS
kneath
230
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
103
6.6k
Code Review Best Practice
trishagee
54
15k
How STYLIGHT went responsive
nonsquared
92
4.8k
Unsuck your backbone
ammeep
662
57k
Building Applications with DynamoDB
mza
88
5.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Transcript
None
経験言語:Python、PHP、React、Vue(どれも少しずつ) 趣味:ゲーム(鉄拳、Apex)、アニメ、音楽(BUMP、椎 名林檎、ボカロ…etc) 好きな食べ物:ラーメン二郎、麺類、ハンバーガー Name : 佐藤ゆ(エンジニア)
技術調査(Poc)
? PoC(Proof of Concept:概念実証)とは
PoCとは? • 新たなアイデアやコンセプトの実現可能性やそれによって 得られる効果などについて検証すること • これによって事前に検討したアイデア/コンセプトの実現 可能性を見極め、期待した効果が得られると判断できれば 実プロジェクトを進めていくという形が一般的です。
BFFとは?
? フロントエンドのための バックエンドサーバー
BFFとは? • 従来のモノリシックなサービスからマイクロサービス化 ◦ 複数のAPIを叩く必要が出てくる
BFFとは? • 取得したデータの加工をフロントエンドで行う必要有り ◦ フロントエンドで表示する内容は往々にして変わるた め、加工処理はフロントエンドがいいかも・・・ ◦ APIで取得してきたデータの一部は不要なため削ぎ落 としたり・・・(インピーダンスミスマッチ) •
フロントエンドの肥大化 • そもそもフロントエンドはUI/UXに専念するべき
BFFとは? BFFを用意することでAPI集約、インピーダンスミス マッチの解消、責務・関心の分離、パフォーマンス の向上が見込めるってコト!?
BFFとは? デメリット • 開発・保守の工数増 • 通信量増 • マイクロサービスのどれかがダウンした際の運用などを考 える必要やBFFが停止した場合など、様々な観点から検 証・対策が必要
(通信量の対策としてはキャッシュ化などが挙げられる)
ユースケース
2. SSR(Server Side Rendering) 4. File Upload 5. Web Socket
3. Session Management 1. API Gateway
• APIの結果を一つに集約する(API Aggregation) • APIで取得したデータをフロントエンドに適したデータに加 工する(API Translate) • 余計なリクエストが増大しないようAPIのレスポンスをキャ ッシュ化(API
Cache) ◦ Chache-aside pattern ◦ Broker pattern • GraphQLとの相性が良い API Gateway
• GraphQLとの相性が良い API Gateway
Server Side Rendering • CSR(Client Server Rendering)と違い、サーバーでレンダ リングを行う ◦ CSRと比較するとSEO観点で有利だったり、ローディング時間が短いと
いったメリットがある • みなさんお馴染みのNext.js、Nuxt.jsで簡単に実装可 ◦ Next.jsはデフォルトでSSRの設定になっています ◦ たまにhydration周りでエラーになったり・・・ • SSG(Static Site Generation)もあるが、こちらは静的サイ トに向いている SSR
• 主にユーザーの情報など、頻繁にアクセスされるであろうデ ータを保存する ◦ Redisやmemcachedなどが多く使われるらしい • 仮にBFFで管理をしない場合 ◦ クライアント側でLocal StorageやCookieなどで管理する必要がある
▪ セキュリティ的によくないよね ◦ バックエンド側で処理を重複して実装する必要がある ▪ なんか面倒くさそう Session Management
• 多くの場合はファイルアップロード機能を実装するとチャンク 化してファイルを少しずつ送信することが多い ◦ Pythonのrequestsとか、PHP(Laravel)のlaravel-chunk-uploadとか ◦ チャンク化したデータを順番通りにバックエンドに送信するのは大変そう File Upload ファイル格納の処理を
BFFが担うことで シンプルに実装可能!
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket
Web Socket ① ② ③ ③’
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket(改めて)
BFFまとめ
まとめ • BFFには5つのユースケースがある • BFFにメリットがたくさんあるが、デメリットも勿論あるため、 要件によって採用するしないを決める必要がある • (個人的には)責務の分散、API集約によるメリットが大きいの で、新規プロジェクトでは検討して良さそう
? GraphQLとは
GraphQLとは? ※https://graphql.org/
GraphQLとは? ※https://graphql.org/
GraphQLとは? • Facebookが開発したよ ◦ REST APIを使用していたらクラッシュが頻発したため、 より効率的にデータを取得するためGraphQLが開発された ◦ Facebook、Netflix、GitHub、Twitterも使用してるみたい •
query言語で柔軟なデータ取得が可能 ◦ 複雑な関係のデータでも取得しやすい(自分比) • エンドポイントが単一 ◦ ユーザー情報は/users/ 、商品情報は/products/ ◦ GraphQLだと /graphql/でユーザーも商品も取れちゃう • スキーマの構造がグラフモデル ◦ 詳しくはデータモデルに関して調べてみてください
GraphQLとは? • RESTとGraphQLを比較してみる REST API https://docs.github.com/ja/rest/guides/getting-started-with-the-rest-api GraphQL API https://docs.github.com/ja/graphql/overview/explorer 尚、ユーザーID・ユーザー名・アバターURLのみがほしいとする
GraphQLとは? REST API • これって・・・ 過剰にデータ取得しすぎってコト!? 探せば他に良いエンドポイントありそう。 って思ったけど探すのめんどい
GraphQLとは? GraphQL API • 取得したいデータのみ抽出できた
SQL GraphQL SELECT query INSERT/UPDATE/ DELETE mutation - subscription GraphQLとは?
Pub Subのような仕組みのリアルタイム通信 特定の情報を監視するようなイメージです
GraphQLとは? GraphQL API デモ
REST API • 複数のエンドポイント • 取得するデータが決まっている ◦ 過剰な取得 ◦ 過少な取得
• 欲しいデータによっては複数回リ クエストを投げ、取得したデータ を加工して・・・といった手間が かかる GraphQL • 単一のエンドポイント • 取得したいデータをピンポ イントで抽出できる ◦ スキーマで定義したデータだけ だからなんでも取得できるとは 思わないこと • BFFとの親和性高そう GraphQLとは?
GraphQLまとめ
GraphQLまとめ • GraphQL良さそうだけどN+1問題とか性能が少し気になる • BFFにするならGraphQLあり • 今後はGraphQLが採用されることも増えていくのではないか
技術調査まとめ
技術調査まとめ • 技術を導入した際のメリデメを考える • 導入障壁はないか • 導入コストや開発後の運用保守(メンテナンス)まで検討する といったことを調査を行った上で検討する
おわり