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

51e415f1cbb2ad80955b8a70aef3d410?s=47 samayotta
December 18, 2019

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

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

51e415f1cbb2ad80955b8a70aef3d410?s=128

samayotta

December 18, 2019
Tweet

Transcript

  1. 2.

    ߏ੒ Nuxt.js SSRʹ͓͚ΔE2Eςετͷ࣮૷ 1. ͋Β͢͡ 2. എܠ 3. ࣮૷ྫͱӡ༻ͯ͠Έͨ݁Ռ 4.

    ٞ࿦ͱࠓޙͷݟ௨͠ 5. [image citations] 6. [self introduction]
  2. 6.
  3. 9.
  4. 14.

    ୅දతͳπʔϧ ❖ Puppeteer ❖ Headless Chrome Node.js API ❖ maintenance

    by Chrome dev team ❖ ཁ఺ ❖ ChromeΛεΫϦϓτ͔Β
 ૢΔϥΠϒϥϦ ❖ ࠾༻ཧ༝ ❖ vs puppeteer-core ❖ jest-puppeteerͷଘࡏ ❖ jest ςετ؀ڥ͕͢Ͱʹଘࡏͨͨ͠Ί
  5. 18.

    ཁ݅ͷ੔ཧ 1. CI/CDͰఆظ࣮ߦ͢Δ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3.

    (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ
  6. 19.
  7. 20.
  8. 21.

    ΞϓϦέʔγϣϯ෦෼ ❖ Nuxt.js + Phoenix + Nginx ❖ Nuxt.js -

    Nginxؒ͸Docker ωοτϫʔΫͰܨ͕͍ͬͯΔ ❖ Phoenixʹ͸E2Eςετ༻ͷ ؀ڥઃఆΛ௥Ճ ❖ SMSೝূ͸ϞοΫ͞Ε͍ͯΔ
  9. 23.

    Docker-Compose on CircleCI ❖ Docker-Compose ❖ Nuxt.js ίϯςφ ❖ Nginx

    ίϯςφ ❖ Puppeteer ίϯςφ ❖ cronͰఆظ࣮ߦ $ docker-compose up
  10. 24.

    Docker-Compose on CircleCI ❖ Nuxt.js ίϯςφ ❖ Node+ Appຊମ ❖

    Nginx ίϯςφ ❖ ຊ൪Ͱ͸S3-CloudFrontͷϝσΟΞ αʔό ❖ Puppeteer ίϯςφ ❖ Node + Puppeteer + Chrome ❖ γφϦΦεΫϦϓτ΍ਖ਼ղσʔ λɺ࣮ࡍʹࡱӨͨ͠SSͳͲͷσʔ λΛؚΉςετ࣮ߦओମ
  11. 28.

    ཁ݅࠶ܝ 1. CI/CDͰఆظ࣮ߦ͍ͨ͠ 2. Ϗδωεཁ݅΁ͷదԠ ❖ SSRΛ࣮ߦͰ͖Δ؀ڥ ❖ ઐ༻ͷαʔό 3.

    (Ͱ͖Ε͹)ςετࣦഊ࣌ʹ
 ରԠ͠΍͍͢ ❖ ໰୊ՕॴΛ͙͢ಛఆ ❖ ਖ਼͍͠SSΛ͙͢σϓϩΠ ཁ݅Λຬͨͤͨʂ
  12. 31.

    ٞ࿦ ❖ ͜Ε͸ਖ਼͍͠end-to-endςετͱݺ΂Δͷ͔ʁ ❖ end-to-endͱ͸͍͑ͳ͍
 ͳͥͳΒαʔόଆΛݫີʹอূͰ͖͍ͯͳ͍͔Β 1. DBɺΠϯϑϥͷੑ࣭͕ຊ൪ͱ͸ҟͳΔ 2. SMSೝূ෦͕ϞοΫ͞Ε͍ͯΔ

    ❖ SMSೝূΛճආͭͭ͠αʔόίʔυશମΛͦͷ··࢒͢͜ͱ ͕Ͱ͖Ε͹end-to-endͱݺ΂Δ͔ʁ 1΋ಉ༷ʹඞਢ͔ʁ օ͞Μͷྑ͍ΞΠσΞ͓଴͍ͪͯ͠·͢mm
  13. 33.

    ༨ஊ(࣮૷ͨ͠ײ૝) ❖ ࣮૷࣌ɺCORS͕Τϥʔ͕ͪ͠Ͱਏ͍ ❖ Chrome devtool, curlͷ༻๏ʹৄ͘͠ͳΔ ❖ ϑϩϯτɺαʔόɺΠϯϑϥΛԣஅ͢ΔλεΫ ❖

    શͯͷΤϯδχΞ͕શͯͷίʔυʹ੹೚Λ΋ͭ
 @ΨΠυϥΠϯ ❖ DockerͱCircleCIʹ਌͠ΈΛ࣋ͯΔΑ͏ʹͳͬͨ
  14. 36.

    ଠా Ұߦ ❖ Software Engineer1೥໨ ❖ ϑϩϯτΤϯυ ❖ ػցֶश ❖

    ུྺ ❖ 2019.4 גࣜձࣾϛΫγΟ ❖ 2019.3 ژ౎େֶେֶӃ 
 ৘ใֶݚڀՊ ஌ೳ৘ใֶઐ߈ ଔ ❖ ࿈བྷઌ ❖ @samayotta ❖ samayotta@gmail.com