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
Webサービスの初期開発とマイクロサービス・BFF
Search
Shimpei Takamatsu
March 30, 2017
Technology
20
13k
Webサービスの初期開発とマイクロサービス・BFF
Webサービスの初期開発とマイクロサービス・BFF
Microservices Meetup vol.5 (API Gateway & BFF)
2017/3/30 @FiNC
Shimpei Takamatsu
March 30, 2017
Tweet
Share
More Decks by Shimpei Takamatsu
See All by Shimpei Takamatsu
自己紹介LT - 20230825
shimpeiws
0
240
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
600
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
360
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
BFFにかける期待
shimpeiws
3
2.3k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.5k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
670
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.1k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
44k
Other Decks in Technology
See All in Technology
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
MySQLのロックの種類とその競合
yoku0825
6
1.6k
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
The Cult of Friendly URLs
andyhume
75
5.9k
We Have a Design System, Now What?
morganepeng
46
7k
How GitHub (no longer) Works
holman
305
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Producing Creativity
orderedlist
PRO
340
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Invisible Side of Design
smashingmag
294
50k
Transcript
WebαʔϏεͷॳظ։ൃͱϚΠΫϩαʔϏεɾBFF Microservices Meetup vol.5 2017/3/30 Akatsuki Inc.ɹߴদ ਅฏ
▪ ߴদ ਅฏ (@shimpeiws) ▪ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦
ɹɾRailsͱJavaScriptΛʑ͘Β͍ॻ͍͍ͯΔ ▪ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾੈքதͷਓʑʹϥΠϒʢੜͷɺϦΞϧͳɺϫΫϫΫ͢Δʣ ɾΤΫεϖϦΤϯ εʢମݧʣΛఏڙ͢ΔࣄۀͰ͢ɻ ࢲ୭
࣍ 1. ཁ݅ͱΞʔΩςΫνϟ 3. BFFͷϓϩτλΠϓ࣮ 2. ॳظ։ൃͰͷબͱूதͱෛ࠴
1. ཁ݅ͱΞʔΩςΫνϟ
৽ن։ൃதͷαʔϏεͷ
▪ ػೳཁ݅ ɹɾWeb͔Βελʔτ͢Δ ɹɾޙ͔ΒωΠςΟϒΞϓϦ͕ग़ΔՄೳੑߴ͍ ɹɾtoC෦εϚʔτϑΥϯϢʔβ͕ଟͱ༧͞ΕΔ ɹɾϢʔβΠϯλϥΫγϣϯ͕ଟ͍UI ɹɾSEOʹڧ͍ૣͯ͘ߏԽ͞ΕͨϚʔΫΞοϓ ɹɾݕࡧ͔Βͷྲྀೖͷൺॏ͕େ͖͍ ɹɾظతͳӡ༻ʹͳΔݟࠐΈ
ɹɾߴ͍อकੑͱ(কདྷతͳ)εέʔϥϏϦςΟ͕ඞཁ ཁ݅ͱΞʔΩςΫνϟ
▪ ΞʔΩςΫνϟ ɹɾWebϑϩϯτΤϯυ ɹɾSingle Page Applicationͱͯ͠ߏங ɹɾReact + Redux
ɹɾIsomorphic JavaScript ͷߏͰɺαʔόαΠυϨϯμϦϯά ɹɾαʔόαΠυ ɹɾRails ɹɾMySQL ɹɾΠϯϑϥ ɹɾ Google Cloud Platform (Google Container Engine) ɹɾ KubernetesͰίϯςφӡ༻ ཁ݅ͱΞʔΩςΫνϟ
▪ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ ཁ݅ͱΞʔΩςΫνϟ ReactͰSSR ಉҰιʔεͰΫϥΠΞϯτͰಈ࡞ ॳճΞΫηεHTTP
▪ WebɺServerͷ2αʔϏεͰՔಇ͍ͯ͠Δ ཁ݅ͱΞʔΩςΫνϟ ௨৴͕ඞཁͳλΠϛϯάͰ XHR SPAͱͯ͠ಈ࡞
2. ։ൃॳظͰͷબͱूதͱ՝
▪ ͜͜·Ͱͷ։ൃͷνʔϜɾ։ൃ༰ɾϋΠϥΠτ ։ൃॳظͰͷબͱूதͱ՝ 2016/9~2016/11 (্ཱͪ͛ظ) 2016/12~2017/3 (։ൃॳظ) 2017/4~ (։ൃதظ)
νʔϜ - 1νʔϜ - αʔό + Web 4໊ - 1νʔϜ - αʔό + Web 5໊ - ϛογϣϯຖʹ4νʔϜ ʹׂ - ϢʔβܥɺαʔϏεج ൫ܥɺΠϯϑϥܥ… ։ൃ༰ - ։ൃϑϩʔඋ - QAɾProductionڥߏங - جຊػೳΛҰ௨Γ - ΞΠςϜλΠϓͷՃ - ޱίϛͷ࣮ - શจݕࡧ(Elasticsearch) - όάɾෛ࠴Λएׯฦࡁ - άϩʔεϋοΫࢪࡦ - αʔϏεͷج൫ͱͳΔ ػೳͷ։ൃ - ΠϯϑϥɾϛυϧΣ ΞɾσϓϩΠͷඋ ϋΠϥΠτ - ΞʔΩςΫνϟɾઃܭ ࢦܾఆ - ։ൃϘϦϡʔϜ͖͑ Εͣࠞཚ - ΞʔΩςΫνϟʹେ͖ ͘खೖΕ͍ͯͳ͍ - εΫϥϜ։ൃͷӡ༻Λ ख୳Γ - νʔϜͷׂ - ϚΠΫϩαʔϏεԽͷ ਪਐ - தظతͳӡ༻ͷ։࢝
։ൃॳظͰͷબͱूதͱ՝ ▪ ͜͜·Ͱͷ։ൃͷྔ (ςετίʔυআ͘) ݁ߏͳεϐʔυͰ։ൃΛਐΊͯདྷͨ 15,000ߦ(Ϟσϧ 100ऑ) 60,000ߦ 25,000ߦ
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظʹΞʔΩςΫνϟɾઃܭ্ߟ͍͑ͨ͜ͱ https://twitter.com/joker1007/status/831371523818614789
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબͱूத ɹɾશ໘తʹSingle Page Application +
SSRͷߏʹ͢Δ ɹɾWhy ɹɾෳࡶͳϢʔβΠϯλϥΫγϣϯΛ࣮ݱ͍ͨ͠ ɹɾΠχγϟϧϏϡʔͷදࣔΛૣ͍ͨ͘͠ ɹɾWhat ɹɾSingle Page Application + SSRͷ࣮ݱ ɹɾHow ɹɾReact + Redux (on Isomorphic Javascript) ͷ࠾༻
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબͱूத ɹɾશ໘తʹSingle Page Application +
SSRͷߏʹ͢Δ ɹɾPros ɹɾμΠφϛοΫͳWebϑϩϯτΤϯυΛ࡞Γ͍͢ ɹɾSPAͷߏͰҰຊԽͰ͖Δ(ϧʔςΟϯάɺStateཧ…) ɹɾCons ɹɾ։ൃ͕͔͔Δ (ྫ͑Rails(ERBͳͲ) + jQueryʹൺͯ) ɹɾNode.jsͷϑϩϯταʔό͕Ұ૿͑ɺσϓϩΠɾཧ͕ෳࡶԽͨ͠
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾWhy ɹɾνʔϜ։ൃ͕ͩɺυϝΠϯઃܭʹ͔͚Δ࣌ؒΛेʹͱΕͳ͍ ɹɾը໘ʹͬͨΓͦͬͨAPIͰอकੑΛԼ͛ͨ͘ͳ͍
ɹɾWhat ɹɾ͔ͳΓࡉ͔ͳཻͰͷϦιʔεࢦઃܭͰ౷Ұ͢Δ ɹɾ(جຊతʹ)RESTful API ɹɾHow ɹɾ1Ϟσϧ = 1APIʹͳΔ͜ͱ͕ଟ͍ɺॏཁͳ(େ͖͍)ͷ͚ͩϦιʔε୯ҐΛઃܭ ɹɾॳظͷϨϏϡʔͰνʔϜͷҙࣝ౷ҰΛ͍ͯͬͨ͠
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબͱूத ɹɾAPIઃܭͷ୯७Խ ɹɾPros ɹɾը໘ʹͬͨΓͦͬͨAPIආ͚ΒΕͨ ɹɾઃܭɾָ࣮͕Ͱόάগͳ͔ͬͨ
ɹɾCons ɹɾΫϥΠΞϯταΠυͷ࣮ʹෛՙ͕Αͬͨ ɹ => ͜ͷ͋ͱͷ ”՝” ʹͮͮ͘
։ൃॳظͰͷબͱूதͱ՝ ▪ ্ཱͪ͛ظ ~ ։ൃॳظͷબͱूதͷ݁Ռͬͨ՝ ɹɾΫϥΠΞϯταΠυͷϦΫΤετɾϋϯυϦϯά͕ෳࡶԽ͢Δ 6ฒྻ ྻ ྻ
※͋Δৄࡉը໘ͷ࣮Πϝʔδ
ΞʔΩςΫνϟ্ͷղܾ༨ͷ͍ͬͯ͜Δ ͦ͏ɺBFFͳΒͶ!!!
։ൃॳظͰͷબͱूதͱ՝ ▪ BFF(Backend For Frontend) ɹɾݩSound CloudͷPhil Calçado͕ఏএ ɹɾΫϥΠΞϯτͷछผຖʹதؒϨΠϠΛ࡞Δ
“Pattern: Backends For Frontends” Sam Newman http://samnewman.io/patterns/architectural/bff/
▪ BFFಋೖޙͷΞʔΩςΫνϟ ɹɾ2017தʹ͜Μͳײ͡ʹͳΔ??? ։ൃॳظͰͷબͱूதͱ՝
։ൃॳظͰͷબͱूதͱ՝ ▪ ݁ہ։ൃॳظͰԿΛબͯ͠ɺࠓޙʹԿΛͨ͠ͷ͔? ɹɾ։ൃॳظ ɹɾ্ཱͪ͛ظʹ ”ΦʔέετϨʔγϣϯΛ࡞Δ͔?” ͳͲͷग़͍ͯͨ ɹɾ͕ɺܾΊ͖Εͳ͔ͬͨ &
࣮͢Δ༨ྗ͕ͳ͔ͬͨ ɹɾࠓޙͷΞʔΩςΫνϟɾ։ൃʹͲΜͳҙຯ͕͋ͬͨͷ͔??? ɹɾޙ͔Βߟ͑ΒΕΔ༨Λ͔ͨͬͨ͠ ɹɾϨΠϠʔΛ1ຕ͢ߟ͑ํ͜͏͍͏߹ʹ߹͕ྑ͍ ɹɾAPI GatewayɾBFFAPIʹؔͯ͠ͷ “ϨΠϠʔΛ͢” ΞʔΩςΫνϟ ɹɾͦͷͨΊʹόοΫΤϯυͱϑϩϯτΤϯυ͕ີ݁߹͍ͯ͠Δͷ߹͕ѱ͍
ཁ͢Δʹ APIؔ࿈ͷΞʔΩςΫνϟܾఆΛϖϯσΟϯάͨ͠(Ͱ͖ͨ)
3. BFFͷϓϩτλΠϓ࣮
#''ͷϓϩτλΠϓ࣮ ▪ BFFʹٻΊΒΕΔཁ݅ (Why) ɹɾΫϥΠΞϯτ͔Βݟͯ ɹɾը໘දࣔʹඞཁͳσʔλΛ·ͱΊͯऔಘ͍ͨ͠ ɹɾͰɺϨεϙϯε͕͘ͳΔͷNG ɹɾઃܭɾΞʔΩςΫνϟͷ؍͔Β ɹɾήʔτΣΠͱͯ͠όοΫΤϯυͷલʹஔ͔ΕΔ
ɹɾ͍ͱશମͷϨεϙϯεѱԽΛট͘ ɹɾεέʔϥϏϦςΟ͕ཁٻ͞ΕΔ ɹɾϑϩϯτΤϯυͱີ݁߹͢ΔͷͰߋ৽සߴ͘ͳΔ ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞ͕ؾܰʹมߋͰ͖Δඞཁ͕͋Δ ɹɾϚΠΫϩαʔϏε๊͕͑ΔࢄγεςϜͷ͠͞વ͋Δ ɹɾࢄτϨʔεஅɾम෮ͷγεςϜԽߟ͍͑ͯ͘ඞཁੑ
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷઃܭ (WhatɾHow) ɹɾWhat ɹɾཁAPIΫϥΠΞϯτΛ࡞Δ ɹɾHow ɹɾݴޠɾϑϨʔϜϫʔΫͷબఆ ɹɾεέʔϥϏϦςΟɾʹؔͯ͠༏Ґੑ͕͋Δ͜ͱ
ɹɾϑϩϯτΤϯυΛ৮ΔΤϯδχΞֶश͕༻ҙͰ͋Δ͜ͱ ɹɾࣗͨͪͷνʔϜͩͱબࢶ Go or Elixir͔…
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [1: ༷ͱERਤ] ɹɾ͜Μͳ༷Λఆͯ͠ΈΔ ɹɾҰཡʹͱʹ͍ͭͨίϝϯτΛදࣔ͢Δ ɹɾʹΧςΰϦ͕ઃఆ͞Ε͍ͯΔ ɹɾձһઐ༻αʔϏεͳͷͰϩάΠϯࡁΈϢʔβͷΈӾཡՄೳ
ɹɾAPIͷશͯͷΤϯυϙΠϯτʹϢʔβೝূ͕͋ΔɺೝূJWTͰߦ͏
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [2: ߏਤ] ɹɾBEFORE ɹɾAFTER WebΫϥΠΞϯτ ೝূ(JWT)
API(itemɾcategoryɾcomment) WebΫϥΠΞϯτ ೝূ(JWT) API(itemɾcategoryɾcomment) BFF labstack/echoͰαʔό࡞
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [3: BEFORE] ※Web Client(JS)ͷίʔυ ϝΠϯͷऔಘॲཧ -
itemͱcategory - comment itemͱcategoryऔಘॲཧ ฒྻͰऔಘ commentऔಘॲཧ itemͷcountΛฒྻͰऔಘ
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [3: BEFORE] ※Web Client(JS)ͷίʔυ APIΫϥΠΞϯτͷऔಘ ϔομʹJWTτʔΫϯ͕ೖΔ
JWTτʔΫϯͷऔಘ /user_token ͷPOST
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [4: AFTER] ※ BFF(Go)ͷίʔυ labstack/echo ͰαʔόΛཱ͍ͯͯΔ
ϝΠϯͷऔಘॲཧ - JWTͷτʔΫϯऔಘ - itemͱcategory - comment
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [4: AFTER] ※ BFF(Go)ͷίʔυ JWTτʔΫϯͷऔಘ /user_token
ͷPOST GETϦΫΤετͷϥο ύʔ JWTτʔΫϯΛϔομʔ ʹηοτ͍ͯ͠Δ
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [4: AFTER] ※ BFF(Go)ͷίʔυ ItemͷAPIϦΫΤετ෦ Ϩεϙϯεͱಉ͡StructΛ࡞͍ͬͯΔ
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [4: AFTER] ※ BFF(Go)ͷίʔυ ࠷ऴతʹϨεϙϯεΛฦ͢෦ ϨεϙϯεͷܗͷStructΛtoJSON͢Δ
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [4: AFTER] ※Web Client(JS)ͷίʔυ BFFͷΤϯυϙΠϯτΛίʔϧ API1ຊ͚ͩ!!!
#''ͷϓϩτλΠϓ࣮ ▪ BFFͷϓϩτλΠϓ࣮ [5: Ͳ͏͔?] ɹɾϑϩϯτΤϯυ͔ΒBFFʹAPIϦΫΤετͷϋϯυϦϯά͕Ҡͬͨ ɹɾϑϩϯτΤϯυ͔ΒݟΔͱը໘ʹରԠ͢ΔAPIΛ1ຊ͛Δ͚ͩͰྑ͍ ɹɾBFFͷ࣮୯७͚ͩͲͪΐͬͱࡶ ɹɾνʔϜͷϝϯόʔʹ”ΊΜͲ͍͘͞”ͱݴΘΕͦ͏…
ɹɾϚοϐϯά෦generatorΛ༻ҙ͢ΔͳΓɺඞཁͦ͏
#''ͷϓϩτλΠϓ࣮ ▪ ࠓճͷαϯϓϧίʔυ ɹɾWebΫϥΠΞϯτ: shimpeiws/simple-web-client ɹɾBFF(Go): shimpeiws/simple-go-api ɹɾRails API:
shimpeiws/simple-rails-api
·ͱΊ ▪ ·ͱΊ ɹɾ։ൃͷ͜Ε·Ͱ ɹɾ։ൃεϐʔυΛ্͛ͯॳظ։ൃΛΓ͖ͬͯͨ ɹɾΞʔΩςΫνϟ͕ܾΊ͖ΕͣɺAPIؔ࿈ͷઃܭΛ୯७Խ͢͠Δ͜ͱʹͨ͠ ɹɾ݁ՌɺϑϩϯτΤϯυʹॏ͕͞دͬͨ ɹɾ։ൃͷ͜Ε͔Β ɹɾBFFΛಋೖ͍͖͍ͯͨ͠
ɹɾϑϩϯτΤϯυͷϋϯυϦϯάෳࡶԽͷճආ ɹɾϚΠΫϩαʔϏεԽ͔ΒϑϩϯτΤϯυΛकΔ ɹɾޙ͔Βߟ͑Δ༨ͷ͋ΔΞʔΩςΫνϟɾઃܭɺେࣄ
8FBSFIJSJOH