גࣜձࣾσΟʔɾΤψɾΤʔ౻ݪ৻ଠBLB1$IBOఱԼҰdev serverಓձFrontend de KANPAI! #5
View Slide
͜Μʹͪ
PͪΌΜͰ͢@p1ch_jp
ීஈɺ6*σβΠφʔΛ͍ͬͯ·͢ɻMyAnimeListͱ͔ɺϋοΧυʔϧͱ͔
ࣗݾհ·͍͍͋
ࠓ͓ੈʹͳͬͨͷͰ͢Ͷʂ
ࠓͱ͘ʹ͓ੈʹͳͬͨͷw 4LFUDIw 6*ͭ͘ΔͷίϨ͕ϝΠϯw "CTUSBDUw ͏ʮ࠷৽൛DPQZ@OFXʯΈ͍ͨͳ࣌ऴΘΓw /PXTIw ແྉͰ্ཱ͕ͪͬͯɺ84௨Δͷوॏͩw /VYUKTw ࣗ੩తαΠτΛHFOFSBUFίϚϯυͰͭ͘ΔΈ͍ͨͳ༻ํ๏͕ଟ͔ͬͨ
͜ͷதͰϑϩΧϯͰΕΔͱͨ͠ΒNuxt͔ͳ( ˘ω˘)
ͱࢥͬͨͷͰ͕͢
Nuxt͕ศརͳ͜ͱͱ͔Έͳ͞Μඦঝͩͱࢥ͏͠
5ؒͷLTͰઆ໌ͨ͠ͱ͜ΖͰʮͦΕͦ͏ʯͱͳͬͯ͠·͍ͦ͏ͳͷͰ
ࠓճ
OVYUHFOFSBUFͨ͋͠ͱʹग़ͯ͘ΔEJTUΛԿ͔͠ΒͷϩʔΧϧαʔόʔͰ֬ೝ͢Δͱࢥ͏ͷͰ͕͢
ͦΕΛԿͰ֬ೝ͢Δͷ͕ྑ͍ͷ͔ͱ͍͏χονͳΛ͍ͨ͠ͱࢥ͍·͢ɻ
ͱ͍͏Θ͚ͰվΊ·ͯ͠
ఱԼҰDev Serverಓձ
ࢀՃࢿ֨w ϩʔΧϧͰΣϒαʔόʔ͕ͨͭ͜ͱw Command Line InterfaceΛ͍ͬͯΔ͜ͱ
બखೖ
No1.python -m SimpleHTTPServerϫϯϥΠφʔαʔόʔքͷॏ
No2.light-server(from npm)
No3.budo(from npm)
No4.serve(from npm)
ධՁํ๏w ֮͑͢͞w ୯७ʹίϚϯυΛԿจࣈͰݺΔ͔w ৮Γ͢͞w Γ͍ͨ͜ͱΛαοͱͰ͖Δ͔w ͦͷଞw ػೳཏੑ࣮ͳͲࠓճҎԼͷ࣠ͰධՁ͍ͨ͠ͱࢥ͍·͢ɻ֤Ͱɺ߹ܭຬͰ͢ɻ
1ճઓ֮͑͢͞
1ճઓ୯७ʹͦͷίϚϯυΛԿจࣈͰݺͼग़ͤΔ͔Ͱ͢
5จࣈҎԼͳΒ315จࣈҎԼͳΒ220จࣈҎԼͳΒ1ͦΕҎ্ͳΒ0
1ճઓ֮͑͢͞w QZUIPON4JNQMF)5514FSWFSw 26จࣈ1w MJHIUTFSWFSw 11จࣈ2w CVEPw 4จࣈ3w TFSWFw 5จࣈ3
2ճઓ৮Γ͢͞
2ճઓ৮Γ͢͞ͰɺΓ͍ͨ͜ͱΛαοͱͰ͖Δ͔Ͱ͢
./distΛlocalhost:3000ͰϗεςΟϯά͢Δͱ͍͏
͋Γ͕ͪͳγνϡΤʔγϣϯͰࢼͯ͠Έ͍ͨͱࢥ͍·͢
No1.python -m SimpleHTTPServerw 42จࣈ͔͔Δw ͦͦEJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕Ͱ͖ͳ͍ͷͰDE͢Δඞཁ͕͋Δw ͔ͳΓ࣮༻తͰͳ͍ͷͰ0$ cd dist && python -m SimpleHTTPServer 3000
No2.light-serverw 28จࣈͰ࣮ߦͰ͖Δw ΦϓγϣϯײతͰΘ͔Γ͍͢w 3$ light-server -s dist -p 3000
No3.budow 20จࣈͰ࣮ߦͰ͖Δw ΦϓγϣϯײతͰΘ͔Γ͍͢ ຊਓʹ༏͍͠w 3$ budo -d dist -p 3000
No4.Tervew 60จࣈͰ࣮ߦͰ͖Δw EJTUΛϕʔεʹϗεςΟϯάΈ͍ͨͳ͜ͱ͕ઃఆϑΝΠϧܦ༝Ͱ͔͠σΩͳ͍w 2ճ͔Βserve -l 3000ͷ13จࣈͰ࣮ߦͰ͖Δw ͷͰ1͋͛ͪΌ͏$ echo {\ public\ : \ dist\ } >> serve.json && serve -l 3000
3ճઓͦͷଞ
ͦͷଞͰΞϐʔϧͰ͖Δ͜ͱΛόγόγ্͛ͯಠஅͱภݟͰՃ͍͖ͯ͠·͢ɻ
No1.python -m SimpleHTTPServerw ੈͷதͰҰ൪ΘΕ͍ͯΔϩʔΧϧαʔόʔͰ͢ʂʂw ͦ͏ͩͶw 1Ճ
No2.light-serverw http2ʹରԠͰ͖Δ͜ͱΛചΓʹ͍ͯ͠Δʢ͍͢͝Ͷʣw ػೳཏੑͳ͔ͳ͔͍͢͝w IUUQTHJUIVCDPNUYDIFOMJHIUTFSWFSw 2Ճ
No3.budow GitHub Star 1400͑Ͱ͢ʂʂʢͦ͏ͩͶʣw ػೳཏੑ͕͍͢͝Ͱ͢ʂʂʢ͔ͨ͠ʹ͍͢͝ʣw IUUQTHJUIVCDPNNBUUEFTMCVEPw 2Ճ
No4.Tervew GitHub Star 3400͑Ͱ͢ʂʂʢ͍͢͝Ͷʣw 1Ճ
݁Ռൃද
ճઓ ճઓ ճઓ ߹ܭQZUIPO MJHIUTFSWFS CVEP TFSWF
ͱ͍͏Θ͚Ͱ
dev server
budo
·ͱΊw ࠓճͷ༏উɺ৮Γ͢͞ɾػೳཏੑͷ໘͔Βbudoʹܾఆw http2Λ༻͍ͨ͠ͱ͖light-serverΛ͏ͱྑͦ͞͏w ͬͱଞʹྑͦ͞͏ͳͷ͋ΔͰʂΈ͍ͨͳͷ͋Ε࣍ճҎ߱ͷϑϩΧϯͰୈೋճdev serverಓձ͍ͬͯͩ͘͞
ऴΘΓ