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
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
110
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
1.7k
qron: Cloud Native Cron Alternativeの今
aereal
2
1.6k
自動作曲入門 / 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
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
Other Decks in Programming
See All in Programming
関数型プログラミングへの第一歩: 純粋関数を知る
74k3z4k1
0
120
SPLから始める「データ構造」入門
o0h
PRO
6
800
自分好みの TS バンドラを Rust で作れる!Deno の内部ライブラリの活用 – Denoで変わるランタイムの景色 実践事例 Lunch LT
pizzacat83
4
530
インプロセスQAとテスト自動化の両輪で進める食べログの開発生産性と品質改善の3年間
hagevvashi
1
290
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
5
2.3k
我々はなぜテストを書くのか / Why we write test codes
takaking22
6
690
Amazon Bedrockで行うモデル評価入門 / Introduction to Model Evaluation in Amazon Bedrock
rkaga
2
580
イベント駆動アーキテクチャ導入の手引きと共通の落とし穴 / Guide to Implementing Event-Driven Architecture and Common Pitfalls
nrslib
11
3.9k
日付と闘う-和暦は難しい / vs Dates - Japanese Chronology is Difficult
wkwkhautbois
0
220
JJUG CCC 2024 Spring自動アップグレードを夢見て、Amazon Q Developer使ってみた
toricky6
2
190
Get started with Compose Multiplatform!
ogi2ogi
0
1k
iOS 開発で便利なツールたち
mitsuharu
0
140
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
31
4.2k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.2k
Fireside Chat
paigeccino
24
2.7k
A Tale of Four Properties
chriscoyier
154
22k
Adopting Sorbet at Scale
ufuk
69
8.7k
Clear Off the Table
cherdarchuk
87
320k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
661
120k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Thoughts on Productivity
jonyablonski
62
4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
23
1.5k
Music & Morning Musume
bryan
42
5.8k
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ͷ͓͔͛ͰগਓͰૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!