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

Transcript

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ͷ͓͔͛Ͱগਓ਺Ͱ΋ૉૣ͘։ൃͰ͖͍ͯΔ • ϨόϨοδ͕ޮ͘ • ϦϦʔεΛ͓ͨͷ͠Έʹ!