はてなブログ タグの技術選択 / The technical details of Hatena Blog Tag

@ Hatena Engineer Seminar #12

1. ͸ͯͳϒϩά λά ͷٕज़બ୒ Hatena Engineer Seminar #12 id:aereal
2. • id:aereal • GitHub: @aereal • ϒϩά౷߹νʔϜ
 ςοΫϦʔυ • https://this.aereal.org/
3. https://this.aereal.org/
4. https://this.aereal.org/
5. ϒϩάαʔϏεͷ
 HTTPSԽΛࢧ͑ͨ
 AWSͰ࡞ΔϐλΰϥεΠον https://speakerdeck.com/aereal/the-construction-of- large-scale-tls-certificates-management-system-with-aws
6. speakerdeck.com/papix/hatena-engineer-seminar-number-10?slide=52
7. ࿩͢͜ͱ • ͸ͯͳϒϩά λάͷ։ൃʹ͍ͭͯ • ͸ͯͳϒϩά λάͷߏ੒ • ֤ʑͷٕज़બ୒ʹ͍ͭͯ
8. ࿩͞ͳ͍͜ͱ • σʔλҠߦ • ͜Ε͚ͩͰ͍Ζ͍Ζ࿩ͤΔͷͰػձ͕͋Ε͹ • ϓϩδΣΫτ؅ཧ • Πϯϑϥߏ੒؅ཧ • Service Mesh • ֎෦APIݺͼग़͕͠ଟ͍ͷͰݕ౼ͨ͠ • ϦϦʔεલͷݕূஈ֊ͳͷͰࣽ٧·ͬͨΒ͓࿩͠͠·͢
9. ։ൃʹ͍ͭͯ • αʔϏεͷಛ௃ • ։ൃମ੍ • ͜Ε·Ͱͷ։ൃͷৼΓฦΓ
10. ͸ͯͳϒϩά λάͷಛ௃ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕೉͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠΋Β͍͍ͨ • ద੾ͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ
11. ։ൃମ੍ • ΤϯδχΞɾσβΠφʔɾσΟϨΫλʔʹΑΔ
 খن໛ͳνʔϜ • ΈΜͳԿ͔͠ΒSM, POͳͲͷϩʔϧΛෳ਺͍࣋ͬͯΔ • σβΠφʔ͸ίʔσΟϯά΋͢Δ
12. ࿀ʹ࢓ࣄʹେ๩͠ • (ΤϯδχΞʹݶΒͣ) ΍Δ͜ͱ͕ଟ͍! • ਓ͕ؒ΍Δ͜ͱΛݮΒ͍ͨ͠ • ࣗಈԽɺίʔυੜ੒ɺ௕͍΋ͷʹר͔ΕΔ, etc. • ਓ͕গͳ͚Ε͹ίϛϡχέʔγϣϯίετ͸Լ͕Δ • →νϟϨϯδϯάͳ͜ͱΛ͢Δྑ͍ػձ • →·ͣաڈΛৼΓฦΖ͏
13. ͸ͯͳϒϩάͷ։ൃΛৼΓฦͬͯ
 ࣍ʹ׆͔ͤΔ͜ͱ͸ͳ͍͔
14. ͸ͯͳϒϩάͰͷࠔΓ͝ͱ • ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ • ΫϥΠΞϯταΠυͱαʔόαΠυͷAPIϓϩτίϧ
15. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ • αʔόαΠυͷςϯϓϨʔτ • ΫϥΠΞϯταΠυ • DOMΛ௚઀৮Δ • React
16. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ • Eng.ʮαʔόαΠυͰ΍͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ෇͚͍ͨͰ͢ʯ • Eng.ʮ͜͜͸jQueryͰ΍͍ͬͯΔͷͰ΍͓͖ͬͯ·͢Ͷʯ • Des.ʮ͜͜ͷςΩετͲ͏΍ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ • Eng.ʮReactͰ΍͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
17. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ • Eng.ʮαʔόαΠυͰ΍͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ෇͚͍ͨͰ͢ʯ • Eng.ʮ͜͜͸jQueryͰ΍͍ͬͯΔͷͰ΍͓͖ͬͯ·͢Ͷʯ • Des.ʮ͜͜ͷςΩετͲ͏΍ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ • Eng.ʮReactͰ΍͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
18. ϓϨθϯςʔγϣϯ૚ͷ౷Ұ • ΫϥΠΞϯταΠυ΋αʔόαΠυ΋Reactʹ • ϨΠϠ΋ू໿ • SSR (= Server-side Rendering) ͍ͨ͠ (ޙड़) ͷͰ޷౎߹
19. API • αʔόαΠυͱΫϥΠΞϯταΠυΛAPIͰܨ͙ΞʔΩς Ϋνϟ͸ྲྀߦ͍ͬͯΔ • ͍ΖΜͳπʔϧ͕ग़ճ͍ͬͯΔ • gRPC, GraphQL, Swagger, etc. • ௕͍΋ͷʹר͔ΕΑ͏ → GraphQL (ޙड़)
20. Server-side Rendering • ݕࡧΤϯδϯΫϩʔϥͳͲʹΠϯσοΫεͯ͠΄͍͠ • ݴ༿΁ڵຯΛ࣋ͬͨਓΛ͸ͯͳϒϩάɾ͸ͯͳϒοΫ ϚʔΫΛհͯ͠ܨ͍͛ͨͱ͍͏ϛογϣϯ • ύϑΥʔϚϯε΁ͷد༩ • scriptingΛڬ·ͳ͍ͷ͕ͳΜ͔ͩΜͩ଎͍ • ΠϯλϥΫςΟϒͳཁૉ͕গͳ͍ͱ͍͏ࣄ৘΋͋Δ
21. Q. ·ͩSSR͍Δ? • Q. Googlebot͕࢖༻͢ΔChromium͕࠷৽ʹͳ͚ͬͨͲ? • The new evergreen Googlebot • A. Googlebot͚ͩߟ͑ΔͳΒඞਢͰ͸ͳ͘ͳͬͨ • A. ͔͠͠ଞʹ΋Ϋϩʔϥ͸͍Δ • Twitter, Facebook, Bing, etc.
22. ͜͜·Ͱͷ·ͱΊ
23. ͸ͯͳϒϩά λάͷಛ௃ • Ϣʔβ͕ίϯςϯπΛฤू͢ Δ • ༧ଌ͕೉͍͠ΞΫηεͷมಈ • ݕࡧΤϯδϯʹΠϯσοΫε ͯ͠΋Β͍͍ͨ • ద੾ͳΩϟογϡઓུ • ߴ͍εέʔϥϏϦςΟ • αʔόαΠυͰstaticʹHTML Λฦ͢ඞཁ͕͋Δ ࠶ ܝ
24. ·ͱΊ • ϓϨθϯςʔγϣϯ૚͸Reactʹू໿ • αʔόͱΫϥΠΞϯτ͸APIͰ݁߹͢Δ • ͦͷͨΊͷΤίγεςϜʹ;ΜͩΜʹ৐͔ͬΔ • SSR͢Δ
25. ͸ͯͳϒϩά λάͷ ߏ੒
26. front GraphQL API ϒϥ΢β DB ॳճGET SSRͷͨΊʹ
 σʔλΛfetch CSRҎ߱
 ௚઀fetch ͸ͯͳϒϩά ͸ͯͳϒοΫϚʔΫ
27. ߏ੒ • front͸GraphQL API͔ΒσʔλΛऔ͖ͬͯͯSSR͢Δ • ϒϥ΢β͸front΁ΞΫηε͠HTMLΛฦͯ͠΋Β͏ • Πϯϑϥ͸͢΂ͯAWS • ALB, ECS, RDS (Aurora)
28. GraphQL • ΫϥΠΞϯτɾαʔόڞʹΤίγεςϜ͕ॆ࣮͍ͯ͠Δ • TypeScript, Goͷίʔυੜ੒ • (։ൃணख౰࣌͸grpc-web͸unstableͩͬͨ) • ͸ͯͳϒϩά λάͰ͸αʔόαΠυΛGo w/gqlgenͰ࣮૷ • ΫϥΠΞϯτϥΠϒϥϦ͸ApolloΛ࠾༻
29. gqlgen • gqlgen͸Schema͔Βresolverͷ਽ܗΛੜ੒ͯ͘͠ΕΔ • ಉ͡Α͏ͳίʔυΛίϐϖ͢Δ஍ࠈ͕ͳ͍ • interface{} ͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞ • refs. MTC2018 ΧϯϑΝϨϯεLPͷཪ࿩ ʙGraphQLฤʙ
30. Apollo • apollographql.com • ϥΠϒϥϦͱSaaS͔ΒͳΔ • ͸ͯͳϒϩά λάͰ͸apollo-client, react-apollo, apollo- toolingΛར༻
31. apollo-tooling • apollo client:codegenͰεΩʔϚͱquery/fragment ΛύʔεɺTypeScriptͷܕఆٛΛੜ੒͢Δ • ͪ͜Β΋any͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞ͳͷͰ҆৺ ײ͕͋Δ • APIʹ͓͚Δtype-safeͷ҆৺ײ͸ΫϥΠΞϯτɾαʔό ྆ํ͕ݎ࿚Ͱͳ͍ͱ࣮ݱ͞Εͳ͍ͷͰଚ͍
32. apollo-client • apollo-client͸Fetch APIΛGraphQL޲͚ʹྑ͍ײ͡ʹแΜ Ͱ͘ΕΔ • linkͱ͍͏ϛυϧ΢ΣΞΛ૊Έ߹Θͤͯɺೝূϔομͷ௥ Ճ΍ΤϥʔϋϯυϦϯάΛϓϥΨϒϧʹ࡞ΕΔ www.apollographql.com/docs/link/overview/
33. react-apollo • query/mutationΛൃߦͨ݁͠ՌΛ౉͢Higher-order Component • TypeScriptͩͱܕม਺Λ౉ͯ͠anyΛճආͰ͖Δ • queryͱvariablesͷܕΛࢦఆͰ͖Δ
34. 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/
35. GraphQLͷԸܙ ΤϯδχΞ σβΠφʔ ϞοΫresolverΛ࣮૷ ίʔσΟϯά։࢝ resolverຊ࣮૷
36. GraphQLͷԸܙ • GraphQLͱApolloͷ͓͔͛Ͱѹ౗తʹলྗ • ͜Ε·Ͱͱҧ͏͜ͱ: ந৅ʹґଘͰ͖Δ • ґଘੑٯసͷݪଇ dependency inversion principle • ܕݕ͕ࠪແ͍৔߹: ۩৅ (ͷܕ) Ͱ΍ΓͱΓ͢Δ = յΕ΍ ͍͢ • ۩৅ͷܕ is ಈ͍͍ͯΔίʔυͷฦΓ஋
37. SSR • ReactͰSSR͢ΔͳΒNext.js͕༗ྗͰ͸ͳ͍͔ • ͦ΋ͦ΋Next.jsͱ͸Կͳͷ͔ • ΫϥΠΞϯτͱαʔόؒͰͳΔ΂͘ίʔυΛڞ௨ԽͰ ͖ΔΑ͏ͳworkaroundू • ศརWebpackઃఆू • ศརExpressϛυϧ΢ΣΞू
38. ΋͠΋λΠϜϚγϯ͕͋Ε͹ • Google App Engine/SE΍FirebaseΛબΜ͔ͩ΋͠Εͳ͍ • ϑϧϚωʔδυαʔϏεͷॆ࣮౓͸GCPͷํ͕ߴ͍ͱࢥ͏
39. ·ͱΊ
40. ·ͱΊ • GraphQLͷ͓͔͛Ͱগਓ਺Ͱ΋ૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!