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
はてなブログ タグの技術選択 / The technical details of Haten...
Search
aereal
June 26, 2019
Programming
3
200k
はてなブログ タグの技術選択 / The technical details of Hatena Blog Tag
@ Hatena Engineer Seminar #12
aereal
June 26, 2019
Tweet
Share
More Decks by aereal
See All by aereal
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
4.2k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
250
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
3.6k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.5k
自動作曲入門 / introduction to programatic music composition
aereal
1
530k
はてなブログ タグとCDK / The epic of AWS CDK and Hatena Blog Tag
aereal
3
200k
ブログサービスのHTTPS化を支えたAWSで作るピタゴラスイッチ / The construction of large scale TLS certificates management system with AWS
aereal
3
400k
AWSではてなブログの常時HTTPS配信をバーンとやる話 / The Epic of migration from HTTP to HTTPS on Hatena Blog with AWS
aereal
14
18k
ScalaとPerlでMicroservices in production / Building microservices with Perl and Scala in production
aereal
0
5.4k
Other Decks in Programming
See All in Programming
API for docs
soutaro
2
1.3k
PHP で学ぶ OAuth 入門
azuki
1
190
AI時代の開発者評価について
ayumuu
0
150
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
140
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
910
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
210
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.4k
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
330
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
650
Making TCPSocket.new "Happy"!
coe401_
1
1.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
YesSQL, Process and Tooling at Scale
rocio
172
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Documentation Writing (for coders)
carmenintech
69
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
ͯͳϒϩά λά ͷٕज़બ Hatena Engineer Seminar #12 id:aereal
• id:aereal • GitHub: @aereal • ϒϩά౷߹νʔϜ ςοΫϦʔυ • https://this.aereal.org/
https://this.aereal.org/
https://this.aereal.org/
ϒϩάαʔϏεͷ HTTPSԽΛࢧ͑ͨ AWSͰ࡞ΔϐλΰϥεΠον https://speakerdeck.com/aereal/the-construction-of- large-scale-tls-certificates-management-system-with-aws
speakerdeck.com/papix/hatena-engineer-seminar-number-10?slide=52
͢͜ͱ • ͯͳϒϩά λάͷ։ൃʹ͍ͭͯ • ͯͳϒϩά λάͷߏ • ֤ʑͷٕज़બʹ͍ͭͯ
͞ͳ͍͜ͱ • σʔλҠߦ • ͜Ε͚ͩͰ͍Ζ͍ΖͤΔͷͰػձ͕͋Ε • ϓϩδΣΫτཧ • Πϯϑϥߏཧ •
Service Mesh • ֎෦APIݺͼग़͕͠ଟ͍ͷͰݕ౼ͨ͠ • ϦϦʔεલͷݕূஈ֊ͳͷͰࣽ٧·ͬͨΒ͓͠͠·͢
։ൃʹ͍ͭͯ • αʔϏεͷಛ • ։ൃମ੍ • ͜Ε·Ͱͷ։ൃͷৼΓฦΓ
ͯͳϒϩά λάͷಛ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠Β͍͍ͨ
• దͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ
։ൃମ੍ • ΤϯδχΞɾσβΠφʔɾσΟϨΫλʔʹΑΔ খنͳνʔϜ • ΈΜͳԿ͔͠ΒSM, POͳͲͷϩʔϧΛෳ͍࣋ͬͯΔ • σβΠφʔίʔσΟϯά͢Δ
࿀ʹࣄʹେ͠ • (ΤϯδχΞʹݶΒͣ) Δ͜ͱ͕ଟ͍! • ਓ͕ؒΔ͜ͱΛݮΒ͍ͨ͠ • ࣗಈԽɺίʔυੜɺ͍ͷʹר͔ΕΔ, etc. •
ਓ͕গͳ͚ΕίϛϡχέʔγϣϯίετԼ͕Δ • →νϟϨϯδϯάͳ͜ͱΛ͢Δྑ͍ػձ • →·ͣաڈΛৼΓฦΖ͏
ͯͳϒϩάͷ։ൃΛৼΓฦͬͯ ࣍ʹ׆͔ͤΔ͜ͱͳ͍͔
ͯͳϒϩάͰͷࠔΓ͝ͱ • ϓϨθϯςʔγϣϯͷࢄ • ΫϥΠΞϯταΠυͱαʔόαΠυͷAPIϓϩτίϧ
ϓϨθϯςʔγϣϯͷࢄ • αʔόαΠυͷςϯϓϨʔτ • ΫϥΠΞϯταΠυ • DOMΛ৮Δ • React
ϓϨθϯςʔγϣϯͷࢄ • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ • Eng.ʮαʔόαΠυͰ͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ͚͍ͨͰ͢ʯ • Eng.ʮ͜͜jQueryͰ͍ͬͯΔͷͰ͓͖ͬͯ·͢Ͷʯ •
Des.ʮ͜͜ͷςΩετͲ͏ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ • Eng.ʮReactͰ͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
ϓϨθϯςʔγϣϯͷࢄ • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ • Eng.ʮαʔόαΠυͰ͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ͚͍ͨͰ͢ʯ • Eng.ʮ͜͜jQueryͰ͍ͬͯΔͷͰ͓͖ͬͯ·͢Ͷʯ •
Des.ʮ͜͜ͷςΩετͲ͏ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ • Eng.ʮReactͰ͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
ϓϨθϯςʔγϣϯͷ౷Ұ • ΫϥΠΞϯταΠυαʔόαΠυReactʹ • ϨΠϠू • SSR (= Server-side Rendering)
͍ͨ͠ (ޙड़) ͷͰ߹
API • αʔόαΠυͱΫϥΠΞϯταΠυΛAPIͰܨ͙ΞʔΩς Ϋνϟྲྀߦ͍ͬͯΔ • ͍ΖΜͳπʔϧ͕ग़ճ͍ͬͯΔ • gRPC, GraphQL, Swagger,
etc. • ͍ͷʹר͔ΕΑ͏ → GraphQL (ޙड़)
Server-side Rendering • ݕࡧΤϯδϯΫϩʔϥͳͲʹΠϯσοΫεͯ͠΄͍͠ • ݴ༿ڵຯΛ࣋ͬͨਓΛͯͳϒϩάɾͯͳϒοΫ ϚʔΫΛհͯ͠ܨ͍͛ͨͱ͍͏ϛογϣϯ • ύϑΥʔϚϯεͷد༩ •
scriptingΛڬ·ͳ͍ͷ͕ͳΜ͔ͩΜ͍ͩ • ΠϯλϥΫςΟϒͳཁૉ͕গͳ͍ͱ͍͏ࣄ͋Δ
Q. ·ͩSSR͍Δ? • Q. Googlebot͕༻͢ΔChromium͕࠷৽ʹͳ͚ͬͨͲ? • The new evergreen Googlebot
• A. Googlebot͚ͩߟ͑ΔͳΒඞਢͰͳ͘ͳͬͨ • A. ͔͠͠ଞʹΫϩʔϥ͍Δ • Twitter, Facebook, Bing, etc.
͜͜·Ͱͷ·ͱΊ
ͯͳϒϩά λάͷಛ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠Β͍͍ͨ
• దͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ ࠶ ܝ
·ͱΊ • ϓϨθϯςʔγϣϯReactʹू • αʔόͱΫϥΠΞϯτAPIͰ݁߹͢Δ • ͦͷͨΊͷΤίγεςϜʹ;ΜͩΜʹ͔ͬΔ • SSR͢Δ
ͯͳϒϩά λάͷ ߏ
front GraphQL API ϒϥβ DB ॳճGET SSRͷͨΊʹ σʔλΛfetch CSRҎ߱ fetch
ͯͳϒϩά ͯͳϒοΫϚʔΫ
ߏ • frontGraphQL API͔ΒσʔλΛऔ͖ͬͯͯSSR͢Δ • ϒϥβfrontΞΫηε͠HTMLΛฦͯ͠Β͏ • Πϯϑϥͯ͢AWS • ALB,
ECS, RDS (Aurora)
GraphQL • ΫϥΠΞϯτɾαʔόڞʹΤίγεςϜ͕ॆ࣮͍ͯ͠Δ • TypeScript, Goͷίʔυੜ • (։ൃணख࣌grpc-webunstableͩͬͨ) • ͯͳϒϩά
λάͰαʔόαΠυΛGo w/gqlgenͰ࣮ • ΫϥΠΞϯτϥΠϒϥϦApolloΛ࠾༻
gqlgen • gqlgenSchema͔ΒresolverͷܗΛੜͯ͘͠ΕΔ • ಉ͡Α͏ͳίʔυΛίϐϖ͢Δࠈ͕ͳ͍ • interface{} ͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞ • refs.
MTC2018 ΧϯϑΝϨϯεLPͷཪ ʙGraphQLฤʙ
Apollo • apollographql.com • ϥΠϒϥϦͱSaaS͔ΒͳΔ • ͯͳϒϩά λάͰapollo-client, react-apollo, apollo-
toolingΛར༻
apollo-tooling • apollo client:codegenͰεΩʔϚͱquery/fragment ΛύʔεɺTypeScriptͷܕఆٛΛੜ͢Δ • ͪ͜Βany͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞ͳͷͰ҆৺ ײ͕͋Δ • APIʹ͓͚Δtype-safeͷ҆৺ײΫϥΠΞϯτɾαʔό
྆ํ͕ݎ࿚Ͱͳ͍ͱ࣮ݱ͞Εͳ͍ͷͰଚ͍
apollo-client • apollo-clientFetch APIΛGraphQL͚ʹྑ͍ײ͡ʹแΜ Ͱ͘ΕΔ • linkͱ͍͏ϛυϧΣΞΛΈ߹Θͤͯɺೝূϔομͷ ՃΤϥʔϋϯυϦϯάΛϓϥΨϒϧʹ࡞ΕΔ www.apollographql.com/docs/link/overview/
react-apollo • query/mutationΛൃߦͨ݁͠ՌΛ͢Higher-order Component • TypeScriptͩͱܕมΛͯ͠anyΛճආͰ͖Δ • queryͱvariablesͷܕΛࢦఆͰ͖Δ
const ALL_PEOPLE_QUERY = gql` query All_People_Query { allPeople { people
{ id name } } } `; interface Data { allPeople: { people: Array<{ id: string; name: string }>; }; }; interface Variables { first: number; }; const AllPeopleComponent = <Query<Data, Variables> query={ALL_PEOPLE_QUERY}> {({ loading, error, data }) => { ... }} </Query> www.apollographql.com/docs/react/recipes/static-typing/
GraphQLͷԸܙ ΤϯδχΞ σβΠφʔ ϞοΫresolverΛ࣮ ίʔσΟϯά։࢝ resolverຊ࣮
GraphQLͷԸܙ • GraphQLͱApolloͷ͓͔͛Ͱѹతʹলྗ • ͜Ε·Ͱͱҧ͏͜ͱ: நʹґଘͰ͖Δ • ґଘੑٯసͷݪଇ dependency inversion
principle • ܕݕ͕ࠪແ͍߹: ۩ (ͷܕ) ͰΓͱΓ͢Δ = յΕ ͍͢ • ۩ͷܕ is ಈ͍͍ͯΔίʔυͷฦΓ
SSR • ReactͰSSR͢ΔͳΒNext.js͕༗ྗͰͳ͍͔ • ͦͦNext.jsͱԿͳͷ͔ • ΫϥΠΞϯτͱαʔόؒͰͳΔ͘ίʔυΛڞ௨ԽͰ ͖ΔΑ͏ͳworkaroundू • ศརWebpackઃఆू
• ศརExpressϛυϧΣΞू
͠λΠϜϚγϯ͕͋Ε • Google App Engine/SEFirebaseΛબΜ͔ͩ͠Εͳ͍ • ϑϧϚωʔδυαʔϏεͷॆ࣮GCPͷํ͕ߴ͍ͱࢥ͏
·ͱΊ
·ͱΊ • GraphQLͷ͓͔͛ͰগਓͰૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!