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
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
170
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
2k
qron: Cloud Native Cron Alternativeの今
aereal
2
1.8k
自動作曲入門 / 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.3k
Scalaで自動作曲の練習 / A study of automatic composition in Scala
aereal
1
390k
Other Decks in Programming
See All in Programming
開発を加速する共有Swift Package実践
elmetal
PRO
0
370
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
全力の跳躍を捉える計測アプリを作る
ogijun2018
1
1.3k
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
140
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
5
1.3k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
230
Why Prism?
kddnewton
4
1.6k
LangChainの現在とv0.3にむけて
os1ma
4
790
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.6k
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
520
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
380
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
250
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Practical Orchestrator
shlominoach
185
10k
Building Applications with DynamoDB
mza
89
6k
A better future with KSS
kneath
235
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Automating Front-end Workflow
addyosmani
1365
200k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Designing Experiences People Love
moore
138
23k
Infographics Made Easy
chrislema
239
18k
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ͷ͓͔͛ͰগਓͰૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!