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
410
サーバーレスでAPIを提供する際のアプリケーション"以外"の話 / Talk about Serverless Other than Application
shimpeiws
0
720
🏄♂️ Scrum Development beyond the sea 🏄♂️
shimpeiws
3
420
もう一度JSON Schemaの話をしよう ~ Form / Validation / View ~
shimpeiws
2
3.1k
BFFにかける期待
shimpeiws
3
2.5k
サーバサイドレンダリング、してますか?
shimpeiws
11
6.6k
Wantedlyでの React + Reduxの導入 & 展開
shimpeiws
4
720
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
45k
Other Decks in Technology
See All in Technology
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
250
o11yで育てる、強い内製開発組織
_awache
3
120
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
KMP の Swift export
kokihirokawa
0
330
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
How to achieve interoperable digital identity across Asian countries
fujie
0
110
社内お問い合わせBotの仕組みと学び
nish01
0
210
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
340
Azure Well-Architected Framework入門
tomokusaba
1
290
20250929_QaaS_vol20
mura_shin
0
110
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
KATA
mclloyd
32
15k
BBQ
matthewcrist
89
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
GraphQLとの向き合い方2022年版
quramy
49
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Music & Morning Musume
bryan
46
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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