$30 off During Our Annual Pro Sale. View Details »

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

aereal
June 26, 2019

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

@ Hatena Engineer Seminar #12

aereal

June 26, 2019
Tweet

More Decks by aereal

Other Decks in Programming

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