Nuxt.js SSRにおけるE2Eテストの実装

Nuxt.js SSRにおけるE2Eテストの実装
第1回Scramble tech
https://scramble.connpass.com/event/157710/
Nuxt.js SSRにおけるE2Eテストの実装 太田一行 資料

Transcript

1. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ Scramble Tech#1 גࣜձࣾ ϛΫγΟ ଠా Ұߦ

2. ߏ੒ Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ 1. ͋Β͢͡ 2. എܠ 3. ࣮૷ྫͱӡ༻ͯ͠Έͨ݁Ռ 4. ٞ࿦ͱࠓޙͷݟ௨͠ 5. [image citations] 6. [self introduction]
3. ͋Β͢͡
4. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετͷ࣮૷ ҆ఆͨ͠QAʹࣗಈԽͰߩݙ
5. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ ࢖༻͢Δಓ۩ ͍͔ͭ͘ͷಓ۩Λ૊Έ߹Θͤ
7. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ Our Application Nuxt.jsͰ࡞੒͞Εͨϑϩϯτ & PhoenixͰ࡞੒͞Εͨαʔό
8. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ …with SSR time-to-contentͷվળ͕ݟࠐ ΊΔɻϏδωεཁ݅ʹΑͬͯ ͸ߟ͍͑ͨબ୒ࢶɻ
9. എܠ
10. Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετ
 ࣮૷ͷ໨త ❖ ػցతʹ֬ೝͰ͖Δ෦෼ΛࣗಈԽ͠ɺ
 QAͷলྗԽʹߩݙ͢Δ͜ͱ ❖ ͔ͭɺ୯ମςετ΍APIςετʹ͸
 ΧόʔͰ͖ͳ͍߲໨͕ଘࡏ͢Δ
11. E2E ςετʹ͍ͭͯ ❖ ιϑτ΢ΣΞςετͷҰछ 1. ࣗಈͰϒϥ΢βΛૢ࡞ 2. ࡞੒ͨ͠γφϦΦΛ࣮ߦ 3. εΫϦʔϯγϣοτ(SS)ࡱӨ౳ 4. ظ଴ͨ͠ඳը݁Ռ͔ௐ΂Δ
12. E2E ςετͷ໾ׂ ❖ νʔϜͰ͸3ͭΛఆٛͨ͠ 1.σβΠϯ่Εͷݕग़ 2.σάϨʔγϣϯͷݕग़ 3.ϖʔδભҠΛอূ
13. E2E ςετͷཹҙ఺ ❖ ֎෦ཁҼʹӨڹΛड͚ಘΔ ❖ ωοτϫʔΫ஗Ԇ౳ ❖ มߋίετ΍΍૿ ❖ ͦΕࣗମʹอकίετ͕
 ͔͔Δ ୯ମςετͷ୅ΘΓͰ͸ͳ͘ɺ
 ิ׬ͱͯ͠
14. ୅දతͳπʔϧ ❖ Puppeteer ❖ Headless Chrome Node.js API ❖ maintenance by Chrome dev team ❖ ཁ఺ ❖ ChromeΛεΫϦϓτ͔Β
 ૢΔϥΠϒϥϦ ❖ ࠾༻ཧ༝ ❖ vs puppeteer-core ❖ jest-puppeteerͷଘࡏ ❖ jest ςετ؀ڥ͕͢Ͱʹଘࡏͨͨ͠Ί
15. Appཁ݅1:SSR֓ཁ ❖ WebApp͸Sever-Side- Rendering (SSR)Λ࠾༻ ❖ HTML&propsΛ߹Θͤͯ
 ࣄલϨϯμϦϯά͢Δ ❖ JSͰॻ͔Εͨcomponent͕ propsΛࢀর͠ͳ͕Β஗Εͯ ඳը͞ΕΔ ❖ ΞϧΰϦζϜ͸ຊεϥΠυͷ είʔϓ֎
16. Appཁ݅1:SSR֓ཁ ❖ ࠾༻ཧ༝ ❖ time-to-contentͷվળ͕
 Ϗδωε্ΫϦςΟΧϧ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖ Node.js ࣮ߦ؀ڥ͕ඞཁ ΞΫηεͯ͠Կ͔͕දࣔ ͞ΕΔ·Ͱͷ࣌ؒ
17. Appཁ݅2:SMSೝূ ❖ ॴ༩ͷཁ݅ͱͯ͠ɺSMSೝূΛ ೝূʹ༻͍Δ ❖ Puppeteer͸ਖ਼نͷํ๏Ͱ SMSೝূΛಥഁͰ͖ͳ͍ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖ SMSೝূΛϞοΫͨ͠
 ઐ༻ͷαʔόΛཱͯΔඞཁ
18. ཁ݅ͷ੔ཧ 1. CI/CDͰఆظ࣮ߦ͢Δ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3. (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ
19. ࣮૷ྫ
21. ΞϓϦέʔγϣϯ෦෼ ❖ Nuxt.js + Phoenix + Nginx ❖ Nuxt.js - Nginxؒ͸Docker ωοτϫʔΫͰܨ͕͍ͬͯΔ ❖ Phoenixʹ͸E2Eςετ༻ͷ ؀ڥઃఆΛ௥Ճ ❖ SMSೝূ͸ϞοΫ͞Ε͍ͯΔ
22. ΞϓϦέʔγϣϯ෦෼ ❖ ޻෉ͨ͠ϙΠϯτ ❖ Nuxt.js͸Nodeίϯςφʹ ❖ Phoenixͷplugͱͯ͠
 SMSೝূػೳΛϞοΫ
 ՝୊̍ΛղܾͰ͖ͨʂ ՝୊̎ΛղܾͰ͖ͨʂ
23. Docker-Compose on CircleCI ❖ Docker-Compose ❖ Nuxt.js ίϯςφ ❖ Nginx ίϯςφ ❖ Puppeteer ίϯςφ ❖ cronͰఆظ࣮ߦ $ docker-compose up
24. Docker-Compose on CircleCI ❖ Nuxt.js ίϯςφ ❖ Node+ Appຊମ ❖ Nginx ίϯςφ ❖ ຊ൪Ͱ͸S3-CloudFrontͷϝσΟΞ αʔό ❖ Puppeteer ίϯςφ ❖ Node + Puppeteer + Chrome ❖ γφϦΦεΫϦϓτ΍ਖ਼ղσʔ λɺ࣮ࡍʹࡱӨͨ͠SSͳͲͷσʔ λΛؚΉςετ࣮ߦओମ
25. Docker-Compose on CircleCI ❖ ϩʔΧϧͰ΋ಉ͡ίϚϯυ
 
 Ͱςετ࣮ߦͰ͖Δ $ docker-compose up
26. ςετͷ࣮ߦͱ௨஌ ❖ Puppeteer͕ςετΛ࣮ߦ ❖ S3͔Βਖ਼ղը૾Λऔಘ͠ɺ ίϯςφʹؚΊͯϏϧυ ❖ ࡞੒ͨ͠SS͸ArtifactԽ ❖ ϒϥ΢β͔Β͙͢ݟΒΕΔ! ❖ ݁Ռ͸URL͖ͭͰ
 Slackʹ௨஌ ໰୊ͷૣظಛఆʹ໾ཱͭʂ
27. 1. Slackʹຖே࣮ߦ݁Ռ͕௨஌͞ΕΔ 2. ࣦഊ͍ͯͨ͠ΒɺArtifactͱͯ͠อଘͨ͠SSΛࢀরɻ
 ࣦഊͨ͠ཧ༝Λಛఆ͢Δɻ 3. ίʔυΛमਖ਼͢Δɻ 4. ϩʔΧϧ͔Β$docker-compose up 5. ਖ਼͘͠ੜ੒ͨ͠ը૾ΛS3ʹϓογϡ ӡ༻ϑϩʔ CIͰ
 ఆظ࣮ߦ ! 2step!
28. ཁ݅࠶ܝ 1. CI/CDͰఆظ࣮ߦ͍ͨ͠ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3. (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ ཁ݅Λຬͨͤͨʂ
29. 2ϲ݄΄Ͳӡ༻ͨ݁͠Ռ ❖ ઃఆͨ͠໨ඪ͸࣮ݱͰ͖͍ͯͦ͏ ❖ σβΠϯ่Ε๷ࢭ ❖ σάϨʔγϣϯ๷ࢭ ❖ ϖʔδભҠͷอূ ❖ ෭࣍తͳ͋Γ͕ͨΈ΋͍͘Β͔͋Δ ❖ ୯ମςετ΍APIςετͷψέ͕ݟ͔ͭΔ͜ͱ΋
30. ٞ࿦ͱࠓޙͷݟ௨͠
31. ٞ࿦ ❖ ͜Ε͸ਖ਼͍͠end-to-endςετͱݺ΂Δͷ͔ʁ ❖ end-to-endͱ͸͍͑ͳ͍
 ͳͥͳΒαʔόଆΛݫີʹอূͰ͖͍ͯͳ͍͔Β 1. DBɺΠϯϑϥͷੑ࣭͕ຊ൪ͱ͸ҟͳΔ 2. SMSೝূ෦͕ϞοΫ͞Ε͍ͯΔ ❖ SMSೝূΛճආͭͭ͠αʔόίʔυશମΛͦͷ··࢒͢͜ͱ ͕Ͱ͖Ε͹end-to-endͱݺ΂Δ͔ʁ 1΋ಉ༷ʹඞਢ͔ʁ օ͞Μͷྑ͍ΞΠσΞ͓଴͍ͪͯ͠·͢mm
32. ࠓޙͷ՝୊ ❖ E2Eςετͷอकੑ޲্ ❖ E2Eςετ͸෗Γ΍͍͢ ❖ ߋ৽πʔϧΛ੔උͯ͠෗Γʹ͘͘ ❖ ୯ମςετɺAPIςετͷΧόϨοδ޲্ ❖ E2Eςετʹґଘͤͣɺόϥϯεͷྑ͍ςετମ੍Λ
33. ༨ஊ(࣮૷ͨ͠ײ૝) ❖ ࣮૷࣌ɺCORS͕Τϥʔ͕ͪ͠Ͱਏ͍ ❖ Chrome devtool, curlͷ༻๏ʹৄ͘͠ͳΔ ❖ ϑϩϯτɺαʔόɺΠϯϑϥΛԣஅ͢ΔλεΫ ❖ શͯͷΤϯδχΞ͕શͯͷίʔυʹ੹೚Λ΋ͭ
 @ΨΠυϥΠϯ ❖ DockerͱCircleCIʹ਌͠ΈΛ࣋ͯΔΑ͏ʹͳͬͨ
34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
35. freepik contributions: https://jp.freepik.com/free-vector/flat-robot-character-with-different-poses-collection_1510587.htm#page=2&query=robot&position=1
 https://www.freepik.com/free-vector/businessman-holding-thumb-finger-stopwatch_1311422.htm#page=1&query=quickly&position=1 https://www.freepik.com/free-vector/maintenance-concept-illustration_5421740.htm#page=1&query=maintenance&position=0 https://jp.freepik.com/free-vector/bundle-of-engineering-set-icons_5984951.htm#query=computer%20tools&position=16 https://jp.freepik.com/free-vector/the-browser-window-with-the-donate-button_4015769.htm#page=1&query=browser&position=7 https://jp.freepik.com/free-photo/work-desk-coffee-documents-and-laptop_1189547.htm#page=1&query=%E6%9B%B8%E9%A1%9E&position=13
 Google2ஈ֊ೝূϓϩηε - Google https://www.google.com/landing/2step/?hl=ja phoenix - seeklogo https://seeklogo.com/vector-logo/273793/phoenix image citation
36. ଠా Ұߦ ❖ Software Engineer1೥໨ ❖ ϑϩϯτΤϯυ ❖ ػցֶश ❖ ུྺ ❖ 2019.4 גࣜձࣾϛΫγΟ ❖ 2019.3 ژ౎େֶେֶӃ 
 ৘ใֶݚڀՊ ஌ೳ৘ใֶઐ߈ ଔ ❖ ࿈བྷઌ ❖ @samayotta ❖ samayotta@gmail.com