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

by samayotta

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ߏ੒ Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ 1. ͋Β͢͡ 2. എܠ 3. ࣮૷ྫͱӡ༻ͯ͠Έͨ݁Ռ 4. ٞ࿦ͱࠓޙͷݟ௨͠ 5. [image citations] 6. [self introduction]

Slide 3

Slide 3 text

͋Β͢͡

Slide 4

Slide 4 text

Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετͷ࣮૷ ҆ఆͨ͠QAʹࣗಈԽͰߩݙ

Slide 5

Slide 5 text

Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ ࢖༻͢Δಓ۩ ͍͔ͭ͘ͷಓ۩Λ૊Έ߹Θͤ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ Our Application Nuxt.jsͰ࡞੒͞Εͨϑϩϯτ & PhoenixͰ࡞੒͞Εͨαʔό

Slide 8

Slide 8 text

Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ …with SSR time-to-contentͷվળ͕ݟࠐ ΊΔɻϏδωεཁ݅ʹΑͬͯ ͸ߟ͍͑ͨબ୒ࢶɻ

Slide 9

Slide 9 text

എܠ

Slide 10

Slide 10 text

Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ E2Eςετ  ࣮૷ͷ໨త ❖ ػցతʹ֬ೝͰ͖Δ෦෼ΛࣗಈԽ͠ɺ  QAͷলྗԽʹߩݙ͢Δ͜ͱ ❖ ͔ͭɺ୯ମςετ΍APIςετʹ͸  ΧόʔͰ͖ͳ͍߲໨͕ଘࡏ͢Δ

Slide 11

Slide 11 text

E2E ςετʹ͍ͭͯ ❖ ιϑτ΢ΣΞςετͷҰछ 1. ࣗಈͰϒϥ΢βΛૢ࡞ 2. ࡞੒ͨ͠γφϦΦΛ࣮ߦ 3. εΫϦʔϯγϣοτ(SS)ࡱӨ౳ 4. ظ଴ͨ͠ඳը݁Ռ͔ௐ΂Δ

Slide 12

Slide 12 text

E2E ςετͷ໾ׂ ❖ νʔϜͰ͸3ͭΛఆٛͨ͠ 1.σβΠϯ่Εͷݕग़ 2.σάϨʔγϣϯͷݕग़ 3.ϖʔδભҠΛอূ

Slide 13

Slide 13 text

E2E ςετͷཹҙ఺ ❖ ֎෦ཁҼʹӨڹΛड͚ಘΔ ❖ ωοτϫʔΫ஗Ԇ౳ ❖ มߋίετ΍΍૿ ❖ ͦΕࣗମʹอकίετ͕  ͔͔Δ ୯ମςετͷ୅ΘΓͰ͸ͳ͘ɺ  ิ׬ͱͯ͠

Slide 14

Slide 14 text

୅දతͳπʔϧ ❖ Puppeteer ❖ Headless Chrome Node.js API ❖ maintenance by Chrome dev team ❖ ཁ఺ ❖ ChromeΛεΫϦϓτ͔Β  ૢΔϥΠϒϥϦ ❖ ࠾༻ཧ༝ ❖ vs puppeteer-core ❖ jest-puppeteerͷଘࡏ ❖ jest ςετ؀ڥ͕͢Ͱʹଘࡏͨͨ͠Ί

Slide 15

Slide 15 text

Appཁ݅1:SSR֓ཁ ❖ WebApp͸Sever-Side- Rendering (SSR)Λ࠾༻ ❖ HTML&propsΛ߹Θͤͯ  ࣄલϨϯμϦϯά͢Δ ❖ JSͰॻ͔Εͨcomponent͕ propsΛࢀর͠ͳ͕Β஗Εͯ ඳը͞ΕΔ ❖ ΞϧΰϦζϜ͸ຊεϥΠυͷ είʔϓ֎

Slide 16

Slide 16 text

Appཁ݅1:SSR֓ཁ ❖ ࠾༻ཧ༝ ❖ time-to-contentͷվળ͕  Ϗδωε্ΫϦςΟΧϧ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖ Node.js ࣮ߦ؀ڥ͕ඞཁ ΞΫηεͯ͠Կ͔͕දࣔ ͞ΕΔ·Ͱͷ࣌ؒ

Slide 17

Slide 17 text

Appཁ݅2:SMSೝূ ❖ ॴ༩ͷཁ݅ͱͯ͠ɺSMSೝূΛ ೝূʹ༻͍Δ ❖ Puppeteer͸ਖ਼نͷํ๏Ͱ SMSೝূΛಥഁͰ͖ͳ͍ ❖ E2Eςετ͔ΒΈ੍ͨ໿ ❖ SMSೝূΛϞοΫͨ͠  ઐ༻ͷαʔόΛཱͯΔඞཁ

Slide 18

Slide 18 text

ཁ݅ͷ੔ཧ 1. CI/CDͰఆظ࣮ߦ͢Δ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3. (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ  ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ

Slide 19

Slide 19 text

࣮૷ྫ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ΞϓϦέʔγϣϯ෦෼ ❖ Nuxt.js + Phoenix + Nginx ❖ Nuxt.js - Nginxؒ͸Docker ωοτϫʔΫͰܨ͕͍ͬͯΔ ❖ Phoenixʹ͸E2Eςετ༻ͷ ؀ڥઃఆΛ௥Ճ ❖ SMSೝূ͸ϞοΫ͞Ε͍ͯΔ

Slide 22

Slide 22 text

ΞϓϦέʔγϣϯ෦෼ ❖ ޻෉ͨ͠ϙΠϯτ ❖ Nuxt.js͸Nodeίϯςφʹ ❖ Phoenixͷplugͱͯ͠  SMSೝূػೳΛϞοΫ  ՝୊̍ΛղܾͰ͖ͨʂ ՝୊̎ΛղܾͰ͖ͨʂ

Slide 23

Slide 23 text

Docker-Compose on CircleCI ❖ Docker-Compose ❖ Nuxt.js ίϯςφ ❖ Nginx ίϯςφ ❖ Puppeteer ίϯςφ ❖ cronͰఆظ࣮ߦ $ docker-compose up

Slide 24

Slide 24 text

Docker-Compose on CircleCI ❖ Nuxt.js ίϯςφ ❖ Node+ Appຊମ ❖ Nginx ίϯςφ ❖ ຊ൪Ͱ͸S3-CloudFrontͷϝσΟΞ αʔό ❖ Puppeteer ίϯςφ ❖ Node + Puppeteer + Chrome ❖ γφϦΦεΫϦϓτ΍ਖ਼ղσʔ λɺ࣮ࡍʹࡱӨͨ͠SSͳͲͷσʔ λΛؚΉςετ࣮ߦओମ

Slide 25

Slide 25 text

Docker-Compose on CircleCI ❖ ϩʔΧϧͰ΋ಉ͡ίϚϯυ    Ͱςετ࣮ߦͰ͖Δ $ docker-compose up

Slide 26

Slide 26 text

ςετͷ࣮ߦͱ௨஌ ❖ Puppeteer͕ςετΛ࣮ߦ ❖ S3͔Βਖ਼ղը૾Λऔಘ͠ɺ ίϯςφʹؚΊͯϏϧυ ❖ ࡞੒ͨ͠SS͸ArtifactԽ ❖ ϒϥ΢β͔Β͙͢ݟΒΕΔ! ❖ ݁Ռ͸URL͖ͭͰ  Slackʹ௨஌ ໰୊ͷૣظಛఆʹ໾ཱͭʂ

Slide 27

Slide 27 text

1. Slackʹຖே࣮ߦ݁Ռ͕௨஌͞ΕΔ 2. ࣦഊ͍ͯͨ͠ΒɺArtifactͱͯ͠อଘͨ͠SSΛࢀরɻ  ࣦഊͨ͠ཧ༝Λಛఆ͢Δɻ 3. ίʔυΛमਖ਼͢Δɻ 4. ϩʔΧϧ͔Β$docker-compose up 5. ਖ਼͘͠ੜ੒ͨ͠ը૾ΛS3ʹϓογϡ ӡ༻ϑϩʔ CIͰ  ఆظ࣮ߦ ! 2step!

Slide 28

Slide 28 text

ཁ݅࠶ܝ 1. CI/CDͰఆظ࣮ߦ͍ͨ͠ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3. (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ  ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ ཁ݅Λຬͨͤͨʂ

Slide 29

Slide 29 text

2ϲ݄΄Ͳӡ༻ͨ݁͠Ռ ❖ ઃఆͨ͠໨ඪ͸࣮ݱͰ͖͍ͯͦ͏ ❖ σβΠϯ่Ε๷ࢭ ❖ σάϨʔγϣϯ๷ࢭ ❖ ϖʔδભҠͷอূ ❖ ෭࣍తͳ͋Γ͕ͨΈ΋͍͘Β͔͋Δ ❖ ୯ମςετ΍APIςετͷψέ͕ݟ͔ͭΔ͜ͱ΋

Slide 30

Slide 30 text

ٞ࿦ͱࠓޙͷݟ௨͠

Slide 31

Slide 31 text

ٞ࿦ ❖ ͜Ε͸ਖ਼͍͠end-to-endςετͱݺ΂Δͷ͔ʁ ❖ end-to-endͱ͸͍͑ͳ͍  ͳͥͳΒαʔόଆΛݫີʹอূͰ͖͍ͯͳ͍͔Β 1. DBɺΠϯϑϥͷੑ࣭͕ຊ൪ͱ͸ҟͳΔ 2. SMSೝূ෦͕ϞοΫ͞Ε͍ͯΔ ❖ SMSೝূΛճආͭͭ͠αʔόίʔυશମΛͦͷ··࢒͢͜ͱ ͕Ͱ͖Ε͹end-to-endͱݺ΂Δ͔ʁ 1΋ಉ༷ʹඞਢ͔ʁ օ͞Μͷྑ͍ΞΠσΞ͓଴͍ͪͯ͠·͢mm

Slide 32

Slide 32 text

ࠓޙͷ՝୊ ❖ E2Eςετͷอकੑ޲্ ❖ E2Eςετ͸෗Γ΍͍͢ ❖ ߋ৽πʔϧΛ੔උͯ͠෗Γʹ͘͘ ❖ ୯ମςετɺAPIςετͷΧόϨοδ޲্ ❖ E2Eςετʹґଘͤͣɺόϥϯεͷྑ͍ςετମ੍Λ

Slide 33

Slide 33 text

༨ஊ(࣮૷ͨ͠ײ૝) ❖ ࣮૷࣌ɺCORS͕Τϥʔ͕ͪ͠Ͱਏ͍ ❖ Chrome devtool, curlͷ༻๏ʹৄ͘͠ͳΔ ❖ ϑϩϯτɺαʔόɺΠϯϑϥΛԣஅ͢ΔλεΫ ❖ શͯͷΤϯδχΞ͕શͯͷίʔυʹ੹೚Λ΋ͭ  @ΨΠυϥΠϯ ❖ DockerͱCircleCIʹ਌͠ΈΛ࣋ͯΔΑ͏ʹͳͬͨ

Slide 34

Slide 34 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 35

Slide 35 text

freepik contributions: https://jp.freepik.com/free-vector/ﬂat-robot-character-with-different-poses-collection_1510587.htm#page=2&query=robot&position=1  https://www.freepik.com/free-vector/businessman-holding-thumb-ﬁnger-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

Slide 36

Slide 36 text

ଠా Ұߦ ❖ Software Engineer1೥໨ ❖ ϑϩϯτΤϯυ ❖ ػցֶश ❖ ུྺ ❖ 2019.4 גࣜձࣾϛΫγΟ ❖ 2019.3 ژ౎େֶେֶӃ   ৘ใֶݚڀՊ ஌ೳ৘ใֶઐ߈ ଔ ❖ ࿈བྷઌ ❖ @samayotta ❖ [email protected]