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 Hatena Blog Tag
Search
aereal
June 26, 2019
Programming
3
190k
はてなブログ タグの技術選択 / 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
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
1.5k
qron: Cloud Native Cron Alternativeの今
aereal
2
1.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
390k
AWSではてなブログの常時HTTPS配信をバーンとやる話 / The Epic of migration from HTTP to HTTPS on Hatena Blog with AWS
aereal
14
17k
ScalaとPerlでMicroservices in production / Building microservices with Perl and Scala in production
aereal
0
5.2k
Scalaで自動作曲の練習 / A study of automatic composition in Scala
aereal
1
390k
Goで実装する軽量マークアップ言語パーサー / Gohn: parser written in Go
aereal
3
3.5k
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
230
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
エンターテイメント業界で利用されるAWS
demuyan
0
210
Anthropic Cookbook のおすすめレシピ
schroneko
6
500
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
130
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
330
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
750
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Ruby Function Composition
bkuhlmann
1
330
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
470
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Featured
See All Featured
Building an army of robots
kneath
300
41k
The Cult of Friendly URLs
andyhume
74
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Debugging Ruby Performance
tmm1
70
11k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
A designer walks into a library…
pauljervisheath
199
23k
How STYLIGHT went responsive
nonsquared
92
4.8k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Web development in the modern age
philhawksworth
202
10k
GitHub's CSS Performance
jonrohan
1023
450k
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ͷ͓͔͛ͰগਓͰૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!