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

by aereal

Slide 1

Slide 1 text

͸ͯͳϒϩά λά ͷٕज़બ୒ Hatena Engineer Seminar #12 id:aereal

Slide 2

Slide 2 text

• id:aereal • GitHub: @aereal • ϒϩά౷߹νʔϜ  ςοΫϦʔυ • https://this.aereal.org/

Slide 3

Slide 3 text

https://this.aereal.org/

Slide 4

Slide 4 text

https://this.aereal.org/

Slide 5

Slide 5 text

ϒϩάαʔϏεͷ  HTTPSԽΛࢧ͑ͨ  AWSͰ࡞ΔϐλΰϥεΠον https://speakerdeck.com/aereal/the-construction-of- large-scale-tls-certiﬁcates-management-system-with-aws

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

࿩͢͜ͱ • ͸ͯͳϒϩά λάͷ։ൃʹ͍ͭͯ • ͸ͯͳϒϩά λάͷߏ੒ • ֤ʑͷٕज़બ୒ʹ͍ͭͯ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

։ൃʹ͍ͭͯ • αʔϏεͷಛ௃ • ։ൃମ੍ • ͜Ε·Ͱͷ։ൃͷৼΓฦΓ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

։ൃମ੍ • ΤϯδχΞɾσβΠφʔɾσΟϨΫλʔʹΑΔ  খن໛ͳνʔϜ • ΈΜͳԿ͔͠ΒSM, POͳͲͷϩʔϧΛෳ਺͍࣋ͬͯΔ • σβΠφʔ͸ίʔσΟϯά΋͢Δ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

͸ͯͳϒϩάͷ։ൃΛৼΓฦͬͯ  ࣍ʹ׆͔ͤΔ͜ͱ͸ͳ͍͔

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

͜͜·Ͱͷ·ͱΊ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

͸ͯͳϒϩά λάͷ ߏ੒

Slide 26

Slide 26 text

front GraphQL API ϒϥ΢β DB ॳճGET SSRͷͨΊʹ  σʔλΛfetch CSRҎ߱  ௚઀fetch ͸ͯͳϒϩά ͸ͯͳϒοΫϚʔΫ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

·ͱΊ

Slide 40

Slide 40 text

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