$30 off During Our Annual Pro Sale. View Details »

天下一 Dev Server 武道会 / World Dev Server Tournament

Pちゃん
November 22, 2018

天下一 Dev Server 武道会 / World Dev Server Tournament

Pちゃん

November 22, 2018
Tweet

More Decks by Pちゃん

Other Decks in Programming

Transcript

  1. גࣜձࣾσΟʔɾΤψɾΤʔ
    ౻ݪ৻ଠ࿠BLB1$IBO
    ఱԼҰdev server෢ಓձ
    Frontend de KANPAI! #5

    View Slide

  2. ͜Μʹͪ͸

    View Slide

  3. PͪΌΜͰ͢
    @p1ch_jp

    View Slide

  4. ීஈ͸ɺ6*σβΠφʔΛ΍͍ͬͯ·͢ɻ
    MyAnimeListͱ͔ɺϋοΧυʔϧͱ͔

    View Slide

  5. ࣗݾ঺հ͸·͍͍͋΍

    View Slide

  6. ࠓ೥͓ੈ࿩ʹͳͬͨ΋ͷͰ͢Ͷʂ

    View Slide

  7. ࠓ೥ͱ͘ʹ͓ੈ࿩ʹͳͬͨ΋ͷ
    w 4LFUDI
    w 6*ͭ͘Δͷ͸ίϨ͕ϝΠϯ
    w "CTUSBDU
    w ΋͏ʮ࠷৽൛DPQZ@OFXʯΈ͍ͨͳ࣌୅͸ऴΘΓ
    w /PXTI
    w ແྉͰ্ཱ͕ͪͬͯɺ84௨Δͷ͸وॏͩ
    w /VYUKT
    w ࣗ෼͸੩తαΠτΛHFOFSBUFίϚϯυͰͭ͘ΔΈ͍ͨ
    ͳ࢖༻ํ๏͕ଟ͔ͬͨ

    View Slide

  8. ͜ͷதͰϑϩΧϯͰ
    ஻ΕΔͱͨ͠ΒNuxt͔ͳ( ˘ω˘)

    View Slide

  9. ͱࢥͬͨͷͰ͕͢

    View Slide

  10. Nuxt͕௒ศརͳ͜ͱͱ͔
    Έͳ͞Μඦ΋ঝ஌ͩͱࢥ͏͠

    View Slide

  11. 5෼ؒͷLTͰઆ໌ͨ͠ͱ͜ΖͰ
    ʮͦΕ͸ͦ͏ʯͱͳͬͯ͠·͍ͦ͏ͳͷͰ

    View Slide

  12. ࠓճ͸

    View Slide

  13. OVYUHFOFSBUFͨ͋͠ͱʹग़ͯ͘Δ
    EJTUΛԿ͔͠ΒͷϩʔΧϧαʔόʔͰ
    ֬ೝ͢Δͱࢥ͏ͷͰ͕͢

    View Slide

  14. ͦΕΛԿͰ֬ೝ͢Δͷ͕ྑ͍ͷ͔ͱ͍͏
    ௒χονͳ࿩Λ͍ͨ͠ͱࢥ͍·͢ɻ

    View Slide

  15. ͱ͍͏Θ͚ͰվΊ·ͯ͠

    View Slide

  16. ఱԼҰDev Server෢ಓձ

    View Slide

  17. ࢀՃࢿ֨
    w ϩʔΧϧͰ΢Σϒαʔόʔ͕ͨͭ͜ͱ
    w Command Line InterfaceΛ΋͍ͬͯΔ͜ͱ

    View Slide

  18. બखೖ৔

    View Slide

  19. No1.
    python -m SimpleHTTPServer
    ϫϯϥΠφʔαʔόʔքͷॏ௟

    View Slide

  20. No2.
    light-server
    (from npm)

    View Slide

  21. No3.
    budo
    (from npm)

    View Slide

  22. No4.
    serve
    (from npm)

    View Slide

  23. ධՁํ๏
    w ֮͑΍͢͞
    w ୯७ʹίϚϯυΛԿจࣈͰݺ΂Δ͔
    w ৮Γ΍͢͞
    w ΍Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔
    w ͦͷଞ
    w ػೳ໢ཏੑ΍࣮੷ͳͲ
    ࠓճ͸ҎԼͷ࣠ͰධՁ͍ͨ͠ͱࢥ͍·͢ɻ
    ֤఺Ͱɺ߹ܭ఺ຬ఺Ͱ͢ɻ

    View Slide

  24. 1ճઓ֮͑΍͢͞

    View Slide

  25. 1ճઓ͸୯७ʹͦͷίϚϯυΛ
    ԿจࣈͰݺͼग़ͤΔ͔Ͱ͢

    View Slide

  26. 5จࣈҎԼͳΒ3఺
    15จࣈҎԼͳΒ2఺
    20จࣈҎԼͳΒ1఺
    ͦΕҎ্ͳΒ0఺

    View Slide

  27. 1ճઓ֮͑΍͢͞
    w QZUIPON4JNQMF)5514FSWFS
    w 26จࣈ1఺
    w MJHIUTFSWFS
    w 11จࣈ2఺
    w CVEP
    w 4จࣈ3఺
    w TFSWF
    w 5จࣈ3఺

    View Slide

  28. 2ճઓ৮Γ΍͢͞

    View Slide

  29. 2ճઓ͸৮Γ΍͢͞Ͱɺ
    ΍Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔Ͱ͢

    View Slide

  30. ࠓճ͸

    View Slide

  31. ./distΛlocalhost:3000Ͱ
    ϗεςΟϯά͢Δͱ͍͏

    View Slide

  32. ͋Γ͕ͪͳγνϡΤʔγϣϯͰ
    ࢼͯ͠Έ͍ͨͱࢥ͍·͢

    View Slide

  33. No1.python -m SimpleHTTPServer
    w 42จࣈ΋͔͔Δ
    w ͦ΋ͦ΋EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕Ͱ͖
    ͳ͍ͷͰDE͢Δඞཁ͕͋Δ
    w ͔ͳΓ࣮༻తͰ͸ͳ͍ͷͰ0఺
    $ cd dist && python -m SimpleHTTPServer 3000

    View Slide

  34. No2.light-server
    w 28จࣈͰ࣮ߦͰ͖Δ
    w Φϓγϣϯ΋௚ײతͰΘ͔Γ΍͍͢
    w 3఺
    $ light-server -s dist -p 3000

    View Slide

  35. No3.budo
    w 20จࣈͰ࣮ߦͰ͖Δ
    w Φϓγϣϯ΋௚ײతͰΘ͔Γ΍͍͢ ೔ຊਓʹ༏͍͠

    w 3఺
    $ budo -d dist -p 3000

    View Slide

  36. No4.Terve
    w 60จࣈͰ࣮ߦͰ͖Δ
    w EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕ઃఆϑΝΠϧܦ
    ༝Ͱ͔͠σΩͳ͍
    w 2ճ໨͔Β͸serve -l 3000ͷ13จࣈͰ࣮ߦͰ͖Δ
    w ͷͰ1఺͸͋͛ͪΌ͏
    $ echo {\ public\ : \ dist\ } >> serve.json && serve -l 3000

    View Slide

  37. 3ճઓͦͷଞ

    View Slide

  38. ͦͷଞͰ͸ΞϐʔϧͰ͖Δ͜ͱΛ
    όγόγ্͛ͯಠஅͱภݟͰՃ఺͍͖ͯ͠·͢ɻ

    View Slide

  39. No1.python -m SimpleHTTPServer
    w ੈͷதͰҰ൪࢖ΘΕ͍ͯΔϩʔΧϧαʔόʔͰ͢ʂʂ
    w ͦ͏ͩͶ
    w 1఺Ճ఺

    View Slide

  40. No2.light-server
    w http2ʹରԠͰ͖Δ͜ͱΛചΓʹ͍ͯ͠Δʢ͍͢͝Ͷʣ
    w ػೳ໢ཏੑ΋ͳ͔ͳ͔͍͢͝
    w IUUQTHJUIVCDPNUYDIFOMJHIUTFSWFS
    w 2఺Ճ఺

    View Slide

  41. No3.budo
    w GitHub Star 1400௒͑Ͱ͢ʂʂʢͦ͏ͩͶʣ
    w ػೳ໢ཏੑ͕͍͢͝Ͱ͢ʂʂʢ͔ͨ͠ʹ͍͢͝ʣ
    w IUUQTHJUIVCDPNNBUUEFTMCVEP
    w 2఺Ճ఺

    View Slide

  42. No4.Terve
    w GitHub Star 3400௒͑Ͱ͢ʂʂʢ͍͢͝Ͷʣ
    w 1఺Ճ఺

    View Slide

  43. ݁Ռൃද

    View Slide

  44. ճઓ ճઓ ճઓ ߹ܭ
    QZUIPO ఺ ఺ ఺ ఺
    MJHIUTFSWFS ఺ ఺ ఺ ఺
    CVEP ఺ ఺ ఺ ఺
    TFSWF ఺ ఺ ఺ ఺

    View Slide

  45. ͱ͍͏Θ͚Ͱ

    View Slide

  46. dev server

    View Slide

  47. budo

    View Slide

  48. ·ͱΊ
    w ࠓճͷ༏উ͸ɺ৮Γ΍͢͞ɾػೳ໢ཏੑͷ໘͔Βbudoʹ
    ܾఆ
    w http2Λ࢖༻͍ͨ͠ͱ͖͸light-serverΛ࢖͏ͱྑͦ͞͏
    w ΋ͬͱଞʹྑͦ͞͏ͳͷ͋ΔͰʂΈ͍ͨͳͷ͋Ε͹࣍ճҎ߱
    ͷϑϩΧϯͰୈೋճdev server෢ಓձ΍͍ͬͯͩ͘͞

    View Slide

  49. ऴΘΓ

    View Slide