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
3.7k
How to send distibuted traces to Datadog using build own OpenTelemetry-Lambda distribution
aereal
3
230
好きな技術《コト》で、 生きていく技術 / life with what you like
aereal
5
3.2k
qron: Cloud Native Cron Alternativeの今
aereal
2
2.3k
自動作曲入門 / 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
Grafana Cloudとソラカメ
devoc
0
170
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
540
Domain-Driven Transformation
hschwentner
2
1.9k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
110
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
130
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
320
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Scaling GitHub
holman
459
140k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Rails Girls Zürich Keynote
gr2m
94
13k
Bash Introduction
62gerente
611
210k
Writing Fast Ruby
sferik
628
61k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Facilitating Awesome Meetings
lara
51
6.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
4 Signs Your Business is Dying
shpigford
182
22k
Why Our Code Smells
bkeepers
PRO
336
57k
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ͷ͓͔͛ͰগਓͰૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!