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
210
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
560
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
320
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
BFFにかける期待
shimpeiws
3
2.2k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.4k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
660
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
43k
Other Decks in Technology
See All in Technology
新卒1年目がプロジェクトを進めるときにコケたポイント
ryunakayama
1
100
OCI Data Science Service 製品概要
oracle4engineer
PRO
0
110
テストだけで品質は上がらない?! エセ自己組織化した品質組織からの脱却 / JaSST'24 Tokyo
visional_engineering_and_design
9
2.9k
マイクロサービスを横断したGoのコードレビュー
yuyu_hf
PRO
1
120
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
150
5分で理解するWebAssemblyのWebの外の話 PHPはマイコンの夢を見るか?
usuyuki
3
200
進化する事業とデータ構造 ~Cloudbaseの場合~
tockn
2
230
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
書を捨てよ、現場へ出よう
nwiizo
11
8.7k
[AWS Expert Online for JAWS-UG]AWS SAW を使ったトラブルシューティング効率化のススメ
furuton
0
170
Node-AI のリッチな WEB フロントエンドを支える技術
nenonaninu
2
970
君はApplication Composerというサービスを知っているか
tsukuboshi
1
510
Featured
See All Featured
The Mythical Team-Month
searls
214
42k
Building an army of robots
kneath
300
41k
A Tale of Four Properties
chriscoyier
150
22k
Product Roadmaps are Hard
iamctodd
43
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
How to name files
jennybc
62
91k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
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