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
720
共通Reactコンポーネントを作ろう!!!
shimpeiws
4
2.3k
WantedlyにReact + Reduxを導入した話
shimpeiws
17
45k
Other Decks in Technology
See All in Technology
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
880
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
260
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
S3アクセス制御の設計ポイント
tommy0124
3
210
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Music & Morning Musume
bryan
46
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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