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
400
サーバーレスで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
710
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
45k
Other Decks in Technology
See All in Technology
人工衛星のファームウェアをRustで書く理由
koba789
10
6.3k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
120
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
280
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
180
テストを軸にした生き残り術
kworkdev
PRO
0
190
Language Update: Java
skrb
2
290
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
250
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
180
エラーとアクセシビリティ
schktjm
1
1.2k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
270
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Gamification - CAS2011
davidbonilla
81
5.4k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Invisible Side of Design
smashingmag
301
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Agile that works and the tools we love
rasmusluckow
330
21k
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