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

@ Hatena Engineer Seminar #12

Transcript

1. ͸ͯͳϒϩά λά
   
   ͷٕज़બ୒
   Hatena Engineer Seminar #12
   id:aereal
   

   View Slide

2. • id:aereal
   • GitHub: @aereal
   • ϒϩά౷߹νʔϜ

   ςοΫϦʔυ
   • https://this.aereal.org/
   

   View Slide

3. https://this.aereal.org/
   

   View Slide

4. https://this.aereal.org/
   

   View Slide

5. ϒϩάαʔϏεͷ

   HTTPSԽΛࢧ͑ͨ

   AWSͰ࡞ΔϐλΰϥεΠον
   https://speakerdeck.com/aereal/the-construction-of-
   large-scale-tls-certificates-management-system-with-aws
   

   View Slide

6. speakerdeck.com/papix/hatena-engineer-seminar-number-10?slide=52
   

   View Slide

7. ࿩͢͜ͱ
   • ͸ͯͳϒϩά λάͷ։ൃʹ͍ͭͯ
   • ͸ͯͳϒϩά λάͷߏ੒
   • ֤ʑͷٕज़બ୒ʹ͍ͭͯ
   

   View Slide

8. ࿩͞ͳ͍͜ͱ
   • σʔλҠߦ
   • ͜Ε͚ͩͰ͍Ζ͍Ζ࿩ͤΔͷͰػձ͕͋Ε͹
   • ϓϩδΣΫτ؅ཧ
   • Πϯϑϥߏ੒؅ཧ
   • Service Mesh
   • ֎෦APIݺͼग़͕͠ଟ͍ͷͰݕ౼ͨ͠
   • ϦϦʔεલͷݕূஈ֊ͳͷͰࣽ٧·ͬͨΒ͓࿩͠͠·͢
   

   View Slide

9. ։ൃʹ͍ͭͯ
   • αʔϏεͷಛ௃
   • ։ൃମ੍
   • ͜Ε·Ͱͷ։ൃͷৼΓฦΓ
   

   View Slide

10. ͸ͯͳϒϩά λάͷಛ௃
    • Ϣʔβ͕ίϯςϯπΛฤू͢
    Δ
    • ༧ଌ͕೉͍͠ΞΫηεͷมಈ
    • ݕࡧΤϯδϯʹΠϯσοΫε
    ͯ͠΋Β͍͍ͨ
    • ద੾ͳΩϟογϡઓུ
    • ߴ͍εέʔϥϏϦςΟ
    • αʔόαΠυͰstaticʹHTML
    Λฦ͢ඞཁ͕͋Δ
    

    View Slide

11. ։ൃମ੍
    • ΤϯδχΞɾσβΠφʔɾσΟϨΫλʔʹΑΔ

    খن໛ͳνʔϜ
    • ΈΜͳԿ͔͠ΒSM, POͳͲͷϩʔϧΛෳ਺͍࣋ͬͯΔ
    • σβΠφʔ͸ίʔσΟϯά΋͢Δ
    

    View Slide

12. ࿀ʹ࢓ࣄʹେ๩͠
    • (ΤϯδχΞʹݶΒͣ) ΍Δ͜ͱ͕ଟ͍!
    • ਓ͕ؒ΍Δ͜ͱΛݮΒ͍ͨ͠
    • ࣗಈԽɺίʔυੜ੒ɺ௕͍΋ͷʹר͔ΕΔ, etc.
    • ਓ͕গͳ͚Ε͹ίϛϡχέʔγϣϯίετ͸Լ͕Δ
    • →νϟϨϯδϯάͳ͜ͱΛ͢Δྑ͍ػձ
    • →·ͣաڈΛৼΓฦΖ͏
    

    View Slide

13. ͸ͯͳϒϩάͷ։ൃΛৼΓฦͬͯ

    ࣍ʹ׆͔ͤΔ͜ͱ͸ͳ͍͔
    

    View Slide

14. ͸ͯͳϒϩάͰͷࠔΓ͝ͱ
    • ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ
    • ΫϥΠΞϯταΠυͱαʔόαΠυͷAPIϓϩτίϧ
    

    View Slide

15. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ
    • αʔόαΠυͷςϯϓϨʔτ
    • ΫϥΠΞϯταΠυ
    • DOMΛ௚઀৮Δ
    • React
    

    View Slide

16. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ
    • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ
    • Eng.ʮαʔόαΠυͰ΍͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ
    • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ෇͚͍ͨͰ͢ʯ
    • Eng.ʮ͜͜͸jQueryͰ΍͍ͬͯΔͷͰ΍͓͖ͬͯ·͢Ͷʯ
    • Des.ʮ͜͜ͷςΩετͲ͏΍ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ
    • Eng.ʮReactͰ΍͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
    

    View Slide

17. ϓϨθϯςʔγϣϯ૚ͷ෼ࢄ
    • Des.ʮ͜͜ͷςΩετΛήετͷ͚࣌ͩม͍͑ͨͰ͢ʯ
    • Eng.ʮαʔόαΠυͰ΍͍ͬͯΔͷͰม͓͖͑ͯ·͢Ͷʯ
    • Des.ʮ͜ͷmarginม͍͑ͨͷͰΫϥεΛ෇͚͍ͨͰ͢ʯ
    • Eng.ʮ͜͜͸jQueryͰ΍͍ͬͯΔͷͰ΍͓͖ͬͯ·͢Ͷʯ
    • Des.ʮ͜͜ͷςΩετͲ͏΍ͬͯग़͍ͯ͠ΔΜͰ͔͢?ʯ
    • Eng.ʮReactͰ΍͍ͬͯͯɺJSͷίʔυ͕͜͜ʹ͋Γ·͢ʯ
    
    

    View Slide

18. ϓϨθϯςʔγϣϯ૚ͷ౷Ұ
    • ΫϥΠΞϯταΠυ΋αʔόαΠυ΋Reactʹ
    • ϨΠϠ΋ू໿
    • SSR (= Server-side Rendering) ͍ͨ͠ (ޙड़) ͷͰ޷౎߹
    

    View Slide

19. API
    • αʔόαΠυͱΫϥΠΞϯταΠυΛAPIͰܨ͙ΞʔΩς
    Ϋνϟ͸ྲྀߦ͍ͬͯΔ
    • ͍ΖΜͳπʔϧ͕ग़ճ͍ͬͯΔ
    • gRPC, GraphQL, Swagger, etc.
    • ௕͍΋ͷʹר͔ΕΑ͏ → GraphQL (ޙड़)
    

    View Slide

20. Server-side Rendering
    • ݕࡧΤϯδϯΫϩʔϥͳͲʹΠϯσοΫεͯ͠΄͍͠
    • ݴ༿΁ڵຯΛ࣋ͬͨਓΛ͸ͯͳϒϩάɾ͸ͯͳϒοΫ
    ϚʔΫΛհͯ͠ܨ͍͛ͨͱ͍͏ϛογϣϯ
    • ύϑΥʔϚϯε΁ͷد༩
    • scriptingΛڬ·ͳ͍ͷ͕ͳΜ͔ͩΜͩ଎͍
    • ΠϯλϥΫςΟϒͳཁૉ͕গͳ͍ͱ͍͏ࣄ৘΋͋Δ
    

    View Slide

21. Q. ·ͩSSR͍Δ?
    • Q. Googlebot͕࢖༻͢ΔChromium͕࠷৽ʹͳ͚ͬͨͲ?
    • The new evergreen Googlebot
    • A. Googlebot͚ͩߟ͑ΔͳΒඞਢͰ͸ͳ͘ͳͬͨ
    • A. ͔͠͠ଞʹ΋Ϋϩʔϥ͸͍Δ
    • Twitter, Facebook, Bing, etc.
    

    View Slide

22. ͜͜·Ͱͷ·ͱΊ
    

    View Slide

23. ͸ͯͳϒϩά λάͷಛ௃
    • Ϣʔβ͕ίϯςϯπΛฤू͢
    Δ
    • ༧ଌ͕೉͍͠ΞΫηεͷมಈ
    • ݕࡧΤϯδϯʹΠϯσοΫε
    ͯ͠΋Β͍͍ͨ
    • ద੾ͳΩϟογϡઓུ
    • ߴ͍εέʔϥϏϦςΟ
    • αʔόαΠυͰstaticʹHTML
    Λฦ͢ඞཁ͕͋Δ
    ࠶
    ܝ
    

    View Slide

24. ·ͱΊ
    • ϓϨθϯςʔγϣϯ૚͸Reactʹू໿
    • αʔόͱΫϥΠΞϯτ͸APIͰ݁߹͢Δ
    • ͦͷͨΊͷΤίγεςϜʹ;ΜͩΜʹ৐͔ͬΔ
    • SSR͢Δ
    

    View Slide

25. ͸ͯͳϒϩά λάͷ
    ߏ੒
    

    View Slide

26. front
    GraphQL API
    ϒϥ΢β
    DB
    ॳճGET
    SSRͷͨΊʹ

    σʔλΛfetch
    CSRҎ߱

    ௚઀fetch
    ͸ͯͳϒϩά
    ͸ͯͳϒοΫϚʔΫ
    

    View Slide

27. ߏ੒
    • front͸GraphQL API͔ΒσʔλΛऔ͖ͬͯͯSSR͢Δ
    • ϒϥ΢β͸front΁ΞΫηε͠HTMLΛฦͯ͠΋Β͏
    • Πϯϑϥ͸͢΂ͯAWS
    • ALB, ECS, RDS (Aurora)
    

    View Slide

28. GraphQL
    • ΫϥΠΞϯτɾαʔόڞʹΤίγεςϜ͕ॆ࣮͍ͯ͠Δ
    • TypeScript, Goͷίʔυੜ੒
    • (։ൃணख౰࣌͸grpc-web͸unstableͩͬͨ)
    • ͸ͯͳϒϩά λάͰ͸αʔόαΠυΛGo w/gqlgenͰ࣮૷
    • ΫϥΠΞϯτϥΠϒϥϦ͸ApolloΛ࠾༻
    

    View Slide

29. gqlgen
    • gqlgen͸Schema͔Βresolverͷ਽ܗΛੜ੒ͯ͘͠ΕΔ
    • ಉ͡Α͏ͳίʔυΛίϐϖ͢Δ஍ࠈ͕ͳ͍
    • interface{} ͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞
    • refs. MTC2018 ΧϯϑΝϨϯεLPͷཪ࿩ ʙGraphQLฤʙ
    

    View Slide

30. Apollo
    • apollographql.com
    • ϥΠϒϥϦͱSaaS͔ΒͳΔ
    • ͸ͯͳϒϩά λάͰ͸apollo-client, react-apollo, apollo-
    toolingΛར༻
    

    View Slide

31. apollo-tooling
    • apollo client:codegenͰεΩʔϚͱquery/fragment
    ΛύʔεɺTypeScriptͷܕఆٛΛੜ੒͢Δ
    • ͪ͜Β΋any͕΄ͱΜͲग़ͯ͜ͳ͍type-safe͞ͳͷͰ҆৺
    ײ͕͋Δ
    • APIʹ͓͚Δtype-safeͷ҆৺ײ͸ΫϥΠΞϯτɾαʔό
    ྆ํ͕ݎ࿚Ͱͳ͍ͱ࣮ݱ͞Εͳ͍ͷͰଚ͍
    

    View Slide

32. apollo-client
    • apollo-client͸Fetch APIΛGraphQL޲͚ʹྑ͍ײ͡ʹแΜ
    Ͱ͘ΕΔ
    • linkͱ͍͏ϛυϧ΢ΣΞΛ૊Έ߹Θͤͯɺೝূϔομͷ௥
    Ճ΍ΤϥʔϋϯυϦϯάΛϓϥΨϒϧʹ࡞ΕΔ
    www.apollographql.com/docs/link/overview/
    

    View Slide

33. react-apollo
    • query/mutationΛൃߦͨ݁͠ՌΛ౉͢Higher-order
    Component
    • TypeScriptͩͱܕม਺Λ౉ͯ͠anyΛճආͰ͖Δ
    • queryͱvariablesͷܕΛࢦఆͰ͖Δ
    

    View Slide

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={ALL_PEOPLE_QUERY}>
    {({ loading, error, data }) => { ... }}
    
    www.apollographql.com/docs/react/recipes/static-typing/
    

    View Slide

35. GraphQLͷԸܙ
    ΤϯδχΞ
    σβΠφʔ
    ϞοΫresolverΛ࣮૷
    ίʔσΟϯά։࢝
    resolverຊ࣮૷
    

    View Slide

36. GraphQLͷԸܙ
    • GraphQLͱApolloͷ͓͔͛Ͱѹ౗తʹলྗ
    • ͜Ε·Ͱͱҧ͏͜ͱ: ந৅ʹґଘͰ͖Δ
    • ґଘੑٯసͷݪଇ dependency inversion principle
    • ܕݕ͕ࠪແ͍৔߹: ۩৅ (ͷܕ) Ͱ΍ΓͱΓ͢Δ = յΕ΍
    ͍͢
    • ۩৅ͷܕ is ಈ͍͍ͯΔίʔυͷฦΓ஋
    

    View Slide

37. SSR
    • ReactͰSSR͢ΔͳΒNext.js͕༗ྗͰ͸ͳ͍͔
    • ͦ΋ͦ΋Next.jsͱ͸Կͳͷ͔
    • ΫϥΠΞϯτͱαʔόؒͰͳΔ΂͘ίʔυΛڞ௨ԽͰ
    ͖ΔΑ͏ͳworkaroundू
    • ศརWebpackઃఆू
    • ศརExpressϛυϧ΢ΣΞू
    

    View Slide

38. ΋͠΋λΠϜϚγϯ͕͋Ε͹
    • Google App Engine/SE΍FirebaseΛબΜ͔ͩ΋͠Εͳ͍
    • ϑϧϚωʔδυαʔϏεͷॆ࣮౓͸GCPͷํ͕ߴ͍ͱࢥ͏
    

    View Slide

39. ·ͱΊ
    

    View Slide

40. ·ͱΊ
    • GraphQLͷ͓͔͛Ͱগਓ਺Ͱ΋ૉૣ͘։ൃͰ͖͍ͯΔ
    • ϨόϨοδ͕ޮ͘
    • ϦϦʔεΛ͓ͨͷ͠Έʹ!
    

    View Slide