PR TIMES x 面白法人カヤック合同勉強会
E2Eςετ͔ΒෛՙࢼݧγφϦΦΛ࡞ͬͯΈͨ@mackee_w a.k.a macopyPR TIMES x ໘ന๏ਓΧϠοΫ߹ಉษڧձ2022-11-11 19:00
View Slide
@macopy• ໘ന๏ਓΧϠοΫ eεϙʔπࣄۀ෦TonamelαʔόαΠυςοΫϦʔυ• Perlେ͖ Go͖• ISUCON11 ༏উ• ISUCON12 ༧બ ग़• ࠷ۙϋϚ͍ͬͯΔϒΩιΠνϡʔόʔ
Tonamelͷ
ߏ
Client(Nuxt)͕GraphQLΛൃߦͯ͠
֤ϚΠΫϩαʔϏε͕GraphQLΛड͚Δ
ൃෛՙࢼݧΛ͍ͨ͠
ͦͷଞ۩ମతͳత
ෛՙࢼݧΛΔͨΊʹάοζΛ࡞ͬͯΒ͏
εςʔδϯάڥͷߏங
ຊ൪DB͔Βͷίϐʔhttps://techblog.kayac.com/automate-initializing-databases-for-staging
k6ಋೖ
thanks! @ebi-yade
ͯ͞ɺͲ͏ͬͯγφϦΦΛॻ͜͏͔
՝: TonamelSPA(ͳϖʔδ͕ଟ͍)
୯७ʹϖʔδΛfetch͢ΔͱNuxtͷΤϯτϦʔϙΠϯτͷHTML͕ฦͬͯ͘Δ͚ͩ
“ٖࣅతʹຊ൪ΞΫηεʹ͍ۙ"
ҙ: ࠷ॳ͔Β͜ΕΛࢦ͞ͳ͍Ͱʂ• ͜Ε is ʮٖࣅతʹຊ൪ΞΫηεʹ͍ۙʙʯ• ·ͣ `/` ͱ͔ΛF5࿈ଧ͢ΔΑ͏ͳ୯७ͳγφϦΦΛ࡞Γ·͠ΐ͏• Ͱͳ͍ͱ͍ͭ·ͰܦͬͯϕϯνϚʔΧʔࣗମͷڍಈ֬ೝ͕Ͱ͖ͳ͍• ͜ͷ࣌Ͱ `/` SPAͰͳ͍ϖʔδͷෛՙࢼݧͬͯΈ͍ͯΔ• ͦͯ͠”ऑ”ݟ͚͍ͭͯΔ…͕͜Ε·ͨผͷ
࡞ઓ1: ۪ʹGraphQLΫΤϦΛॻ͍͍ͯ͘
ײ: େม• ʮ͜Εɺ͔ͯ͠͠ΫϥΠΞϯτଆͷίʔυΛ࠶࣮ͯ͠ͳ͍ʁʁʯ• ΫΤϦ͋Δఔྲྀ༻ग़དྷΔͷͷ(k6JSͳͷͰ)ɺॲཧͱ͔ίϐϖ͕͍͠ͷͰΫϥΠΞϯτͷڍಈΛಡΈͳ͕Βॻ͍͍͔ͯ͘͠ແ͍• ͋ΔఔॲཧΛؙΊΔ(ఘΊΔʁ)ʹͯ͠ɺՃݮ͕͍͠
࡞ઓ2: xk6-browserhttps://k6.io/docs/javascript-api/xk6-browser/
ʮϒϥβΛ͍ͬͺ͍ฒͯΞΫηε͠·͘Ε͍͍͡ΌΜʯ
݁Ռ: εέʔϧ͠ͳ͍, ҆ఆͤͣ• ͦͦChromium͔ͩΒͶ• xk6-browserͷ͍ํ͕ѱ͍ͷ͔ɺ҆ఆ͍ͯ͠ͳ͍ͷ͔ɺΤϥʔ͕ग़·͘Δ
ʔͲ͏ͨ͠ͷ͔
har-to-k6https://github.com/grafana/har-to-k6
ϒϥβͷϩά͔Βk6ͷγφϦΦʹม͢Δ܅• ൃʮϒϥβ͕ॏ͍ͳΒϒϥβͰϖʔδݟͨͱ͖ͷڍಈ͔ΒγφϦΦʹ͢Ε͍͍Μ͡Όͳ͍ʁʯ• .HARϑΝΠϧ͔Βk6γφϦΦ(JavaScript)ม͢Δެࣜπʔϧ
͜ΕͰ՝ײ• ϑϩϯτΤϯυଆͷڍಈʑΊ·͙Δ͘͠มΘͬͯ͠·͏• ෛՙࢼݧͱͯ͠ɺಛఆͷύε(=ػೳ)ʹΞΫηεͨ͠ͱ͖ͷϒϥβ͔ΒͷϦΫΤετͷڍಈΛ࠶ݱ͍ͨ͠• HARΛੜ͢ΔͨΊʹ࠷৽ͷϑϩϯτΤϯυͷڍಈΛ͔͚ͬΔͨΊʹChromeͰϙνϙν͢Δͷ͔ʁ• ਓྗͷਖ਼֬ੑɾਓྗͷखؒ => ໘͔͘͞͞Β͘ΔෛՙࢼݧΕ
.HARΛ࡞ΔͷࣗಈԽ͠·͠ΐ͏
Έ
PlaywrightͰHARΛు͘ίʔυ
݁Ռ: ͍͍ײ͡ͷෛՙΛ͔͚ΒΕͨ
ͦͷଞͷ• HARϕʔεγφϦΦͰଞͷυϝΠϯը૾ʹfetch͠ͳ͍Α͏ʹ͢ΔϑΟϧλ• εςʔδϯάڥͷೝূΛϕϯνϚʔΧʔ͚ͩճආ͢Δํ๏• AuroraͷPerformance Insights͕ศར, ClusterͷҰ࣌ఀࢭศར• OGPͰmeta tagʹେձใΛຒΊࠐΜͰ͍Δ͕ͦΕ͕ॏͯ͘໘ന͍ʢ໘ന͘ͳ͍ʣ• SPA͔ͩΒΤϯτϦʔϙΠϯτ͚ͩݟͯҙຯ͕ͳ͍ͱͳΜͩͬͨͷ͔• ΫΤϦΩϟογϡ͞Μɺࠓ·Ͱ͋Γ͕ͱ͏