SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development

【Nuxt.js/Vue.js】スタートアップ企業導入事例
登壇枠で使用

参考URL
https://re-build.connpass.com/event/111146/

Transcript

1. SPA開ൃ未ܦݧ者による
   Nuxt.jsを使った自社サʔビス開ൃ
   嘉਺侑起
   2019/01/30
   

   View Slide

2. "HFOEB
   ࣗݾ঺հɾձࣾ঺հ
   /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ
   /VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ
   ͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKTЋ
   ·ͱΊ
   

   View Slide

3. ࣗݾ঺հɾձࣾ঺հ
   

   View Slide

4. ࣗݾ঺հ
   ◆໊લ
   Յ਺ ါى(Kakazu Yuki) @kkznch
   ◆ࣗݾ঺հ
   ɾ1990೥ͷԭೄݝੜ·Εԭೄҭͪ
   ɾ2016೥ʹԭిάϩʔόϧγεςϜζגࣜձࣾʹೖࣾɺ2018
   ೥ʹגࣜձࣾRe:Build΁స৬ͯ͠ݱࡏʹࢸΔ
   ◆झຯ
   όϨʔϘʔϧɺϐΞϊɺཱྀߦɺΧϑΣ८ΓɺήʔϜ
   ◆εΩϧ
   ɾPHPɺGolangɺJavaScriptɺC/C++ɺPythonɺRuby
   ɾLaravelɺVue.jsɺNuxt.js
   ◆࠷ۙͷ೰Έ
   ɾࣸਅࡱΒΕΔͱ͖ʹ΍΍ѱ͍সإʹͳΔ
   

   View Slide

5. Copyright Re:Build.inc All Rights Reserved.
   ձࣾ঺հ
   ◆ձ໊ࣾ
   גࣜձࣾRe:Build
   ◆ॅॴ
   ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕
   ◆ࣄۀ಺༰
   ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ
   ɾडୗ։ൃ
   ◆ࣾһ
   ໊̑
   ◆ΤϯδχΞͷಇ͖ํ
   ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
   

   View Slide

6. /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ
   

   View Slide

7. ։ൃதͷࣗࣾαʔϏε
   ɾαʔόαΠυ
   PHP(Laravel5.5)
   ɾϑϩϯτΤϯυ
   JavaScript(jQuery, Vue.js, Nuxt.js)
   ɾΠϯϑϥ
   AWS(ECS, ECR, S3,RDS(mariadb))
   ɾ։ൃ؀ڥ
   php7, nginx, mariadb, laradock(docker), webpack
   ɾͦͷଞ
   GitLab, GitLabCI(ࣗಈσϓϩΠͳͲ), Slack, PhpStorm
   ɾSPAͷWebΞϓϦܦݧऀ Ұਓ
   ɾαʔόαΠυ͸ಘҙͳਓ͕ଟ͍
   ɾVue.js͸৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍
   ٕज़ཁ݅ ։ൃମ੍
   

   View Slide

8. ϑϩϯτΤϯυ
   αʔόαΠυ
   αʔόߏ੒
   DBΞΫηε
   ϑΝΠϧΞοϓϩʔυ
   Ajax௨৴
   

   View Slide

9. (1)PUSH
   (2)GitLab CI࣮ߦ
   Gitlab
   ECS
   ϦϙδτϦ
   σϓϩΠϑϩʔ
   ECR
   (3)ίϯςφΛPUSH (4)ίϯςφىಈ
   αΠτӾཡ
   Nuxt.js͸͜͜ͰϏϧυ
   

   View Slide

10. ‣ ં֯ͳͷͰྲྀߦΓʹͷͬͯSPAԽ͔ͨͬͨ͠
    ‣ ։ൃϝϯόʹVue.jsͰͷ։ൃܦݧΛ࣋ͭਓ͕͍Δ
    ‣ SPAͷϊ΢ϋ΢͕ແ͍ͨΊɺن໿ʹԊ͏͜ͱͰػೳΛ࣮
    ݱͰ͖ΔNuxt.js͕࠷దͩͱߟ͑ͨ
    Nuxt.jsΛબఆͨ͠ཧ༝
    

    View Slide

11. ‣ σΟϨΫτϦɾϑΝΠϧߏ੒
    ͔Βࣗಈੜ੒
    ن໿ྫᶃ ϧʔςΟϯάͷࣗಈੜ੒
    Build
    

    View Slide

12. ‣ ը໘͕ϨϯμϦϯά͞ΕΔલʹ
    ॲཧΛڬΊΔ
    ‣ ը໘શମ·ͨ͸ݸผʹڬΊΔ
    ن໿ྫᶄ ϛυϧ΢ΣΞ
    

    View Slide

13. ‣ ࣗલϥΠϒϦɺ֎෦Ϟδϡʔϧͱ߹Θͤͯ࢖༻͢Δ
    ن໿ྫᶅ ϓϥάΠϯ
    axiosʹಠࣗॲཧΛ௥Ճ͢Δ࣌
    

    View Slide

14. ʮ͜͜ʹ͜͏ஔ͚͹͜͏͍͏͜ͱ͕࣮ݱͰ͖Δʯ
    

    View Slide

15. /VYUKTΛ࢖ͬͯײͨ͡ϝϦοτɾσϝϦοτ
    

    View Slide

16. Nuxt.jsΛ࢖ͬͯΈͯײͨ͡ϝϦοτ
    

    View Slide

17. ‣ ϑΝΠϧߏ੒͔ΒϧʔςΟϯάͷࣗಈੜ੒
    ‣ ϛυϧ΢ΣΞʹΑΔϨϯμϦϯάલޙͷॲཧ
    ‣ ϓϥάΠϯʹΑΔ֎෦ύοέʔδɺಠࣗϥΠϒϥϦར༻
    ن໿ͷ͓͔͛Ͱ೰Ή࣌ؒΛ୹ॖ
    Ͳ͜ʹԿΛஔ͍ͯͲ͏ॻ͔͕ܾ͘·ͬͯΔͷͰ೰·ͳ͍
    

    View Slide

18. ‣ ಠࣗϧʔϧɺΦϨΦϨΞʔΩςΫνϟͷഉআ
    ‣ શମతʹϑΝΠϧߏ੒΍ίʔυͷॻ͖ํ͕౷Ұ͞ΕΔ
    - ٕज़Ϩϕϧ͕௿ͯ͘΋͋Δఔ౓͸ίʔυͷ඼࣭ΛอͯΔ
    νʔϜͰͷ։ൃΛޮ཰Խ
    Ͳ͜ʹॻ͚͹͍͍͔෼͔Βͳ͍ศརͦ
    ͏ͳίʔυ͸UtilΫϥεʹ·ͱΊΔͱ
    Αͦ͞͏ˑ ←Α͘ͳ͍
    

    View Slide

19. ೔ຊޠͷެࣜυΩϡϝϯτɺॻ੶͕ྑ͍
    ʮNuxt.jsϏΪφʔζΨΠυʯ ʮجૅ͔ΒֶͿVue.jsʯ
    

    View Slide

20. Nuxt.jsΛ࢖ͬͯΈͯײͨ͡σϝϦοτ
    ※࣮ࡍ͸σϝϦοτΛײ͡Δ৔໘ʹ·ͩૺ۰͍ͯ͠ͳ͍
    

    View Slide

21. ‣ ໰୊ൃੜ࣌ͷݪҼಛఆ͕೉ͦ͠͏
    ‣ ผϑϨʔϜϫʔΫ΁ͷҠߦ͕ۤ͘͠ͳΓͦ͏
    - Nuxt.jsͷίʔυΛಡΈղ͔͘͠ͳ͍ɺͦΕͳΒNuxt.js࢖
    ΘͣʹVue.jsͰॻ͘ํ͕Α͍...ʁ
    Nuxt.jsͱ͍͏ϒϥοΫϘοΫε
    

    View Slide

22. ‣ Ϗϧυʹ͕͔͔࣌ؒΔ
    ‣ ϏϧυޙͷϑΝΠϧαΠζ͕ංେԽ͢Δ
    - ϖʔδ๚໰࣌ͷ࠷ॳͷಡΈࠐΈʹ͕͔͔࣌ؒΔ
    ϑΝΠϧαΠζ͕ංେԽ͍ͯ͘͠
    ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍
    

    View Slide

23. ‣ ҟͳΔυϝΠϯʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ
    ‣ ҟͳΔϓϩτίϧʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ
    ‣ όοΫΤϯυͱΠϯϑϥଆͷઃఆ͕ඞཁͳ৔߹΋͋Δ
    CORSͳͲΠϯϑϥབྷΈͷΤϥʔ͕໘౗
    ※Nuxt.jsʹݶͬͨ࿩͠Ͱ͸ͳ͍
    

    View Slide

24. ن໿͔Βड͚ΔԸܙ͸େ͖͍͕ɺ
    ࠇശ෦෼Λ৮Δඞཁ͕ग़ͯ͘ΔͱΩπΠ͔΋
    

    View Slide

25. ͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKTЋ
    

    View Slide

26. JWTΛ࢖ͬͨϢʔβͷೝূɺAPIͷ࣮ߦ
    

    View Slide

27. ‣ ిࢠॺ໊෇͖ͷURL-
    safeͳJSONΛ࢖ͬͨ
    ೝূํࣜ
    ‣ ిࢠॺ໊͕͍͍ͭͯΔ
    ͷͰվ͟ΜΛ๷ࢭՄೳ
    JWTʢJson Web Tokenʣͱ͸
    

    View Slide

28. JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ
    ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ
    ɾਫฏͷεέʔϧ͕༰қ
    ɾσόοάͱ؅ཧ͕؆୯
    ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍
    ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ
    ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ
    ɾJWT͕ಠཱܕͰ͋Δ͜ͱ
    JWTΛ࢖͏ϝϦοτ
    ※Ҿ༻ݩ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
    

    View Slide

29. 1. ΫϥΠΞϯτ͔Βೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)͕ૹ
    ৴͞ΕΔ
    2. αʔό͸ೝূ৘ใ͔ΒϢʔβ৘ใͱ༗ޮظݶΛؚΉJSON
    Λൿີ伴Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δ
    3. ΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠
    ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏
    JWTͷೝূϑϩʔ
    

    View Slide

30. ϑϩϯτΤϯυ
    ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ
    APIϦΫΤετ
    αʔόαΠυ
    Vuex
    Token͕ฦ٫͞ΕΔ
    Component
    Action
    Mutations
    State
    Plugin
    /login
    Routing
    Middleware
    Dispatch
    Render
    Commit
    Mutate
    eyJ0eXAiOiJKV1QiLCJhbGci
    OiJIUzI1NiJ9.eyJpc3MiOiJod
    HRwOlwvXC9sb2NhbGhvc3
    RcL2FwaVwvdjFcL2xvZ2luIiw
    iaWF0IjoxNTQxMzk3NDAyLC
    JleHAiOjE1NDE0MDEwMDIs
    Im5iZiI6MTU0MTM5NzQwMi
    wianRpIjoiSGx1eUVXRU5Jc
    TdWRHZ6ZyIsInN1YiI6MSwi
    cHJ2IjoiMWFiMTVlMTVhNG
    NiODBjOWY3MTJkZTQ3OD
    ViMmIyMDk4ZGFlMjhjMyJ9.
    Qkbo7Mf4kMlTbWT-
    r4L6GhSUUlTUE7p7OHPdob
    FEXiI
    Tokenͷྫ
    HTML
    CSS
    JS
    TokenΛड͚औͬ
    ͯɺlocalStorage
    ʹઃఆ
    ຖճɺToken͕
    localStrageʹ͋
    Δ͔νΣοΫɻ
    ͳ͚Ε͹ɺϩά
    Πϯը໘ʹϦμ
    ΠϨΫτ
    ຖճɺlocalStorage
    Λ֬ೝ͠ɺtokenΛ
    Authorizationϔο
    μʔʹઃఆ
    localStrage
    token
    tokenΛऔಘ
    αʔόαΠυଆͰ
    ϩάΠϯॲཧΛ࣮ߦ
    tokenΛൃߦɻ
    ϒϥ΢β͔ΒΞΫηε͠ɺ
    ϢʔβIDͱύεϫʔυΛೖྗ
    tokenΛઃఆ
    

    View Slide

31. ຖճɺToken͕localStrageʹ
    ͋Δ͔νΣοΫɻ
    ͳ͚Ε͹ɺϩάΠϯը໘ʹ
    ϦμΠϨΫτ͢Δ
    middlewareͰͷϩάΠϯνΣοΫͷྫ
    

    View Slide

32. plugin (axios)Ͱͷtokenઃఆྫ
    ϦΫΤετ࣌ʹtokenΛ
    Authorizationϔομʔʹઃఆ
    tokenͷظݶ੾ΕͳͲͰ
    ΤϥʔͰམͪͨ৔߹ʹద੾ͳ
    ϖʔδʹϦμΠϨΫτ͢Δ
    

    View Slide

33. ը໘Πϝʔδ
    

    View Slide

34. ը໘Πϝʔδ
    

    View Slide

35. ը໘Πϝʔδ
    

    View Slide

36. FirebaseΛ࢖ͬͨνϟοτػೳ
    

    View Slide

37. νϟοτػೳͷ࣮ݱํ๏Λٞ࿦
    WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ࢖͏͔ʁ
    ɾ൑அج४
    - ࣮૷೉қ౓͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ
    - ϝϯςφϯείετ͕௿͍ɻ
    - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠෼ੳ͢ΔՄೳੑ͋Γɻ
    - ࠾༻ͷ΢ϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
    

    View Slide

38. ٞ࿦ͷ݁Ռ
    Firebaseʹܾఆʂʂ
    ɾબఆཧ༝
    - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ൒೔͘Β͍Ͱ࣮૷Ͱ͖ͨɻ
    - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮ͯ૷͕ͨ͠ɺ
    όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ
    - LaravelEcho(Websocket)΍ϩϯάϙʔϦϯάͰ
    ࣮૷ͨ͠Β͚ͬ͜͏޻਺͕͔͔Γͦ͏ͩͬͨɻ
    - ࠾༻ͷ΢ϦʹͳΓͦ͏ɻ
    

    View Slide

39. FirebaseͰͷݒ೦఺
    - Firebase্ͷDatabaseͷແྉ࿮͕1GB͔͠ͳ͍ҝɺ
    ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘Δͷ͸ΩπΠɻ
    - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ
    - ݕࡧ৚݅ϑΟʔϧυ͸̍֊૚ઌ·Ͱ͔͠ࢦఆͰ͖ͳ͍ɻ
    - ͦͷଞʹ΋ݕࡧ৚݅ʹ੍ݶ͋Γɻ
    

    View Slide

40. FirebaseΛ࢖ͬͨνϟοτػೳͷશମߏ੒(૝ఆ)
    ϩάΠϯ
    Token͕ฦ٫͞ΕΔ
    /message
    αʔόαΠυଆͰ
    ϩάΠϯॲཧΛ࣮ߦ
    tokenΛൃߦɻ
    νϟοτΛߦ͏
    ϑϩϯτΤϯυ
    /login
    ϒϥ΢β͔ΒΞΫηε͠ɺ
    ϢʔβIDͱύεϫʔυΛೖྗ
    ϦΞϧλΠϜͰϝοηʔδͷ΍ΓͱΓ
    ఆظతʹDBʹϝοηʔδσʔ
    λΛॻ͖ࠐΈʹ͍͘
    eyJ0eXAiOiJKV1QiLCJhbGci
    OiJIUzI1NiJ9.eyJpc3MiOiJod
    HRwOlwvXC9sb2NhbGhvc3
    RcL2FwaVwvdjFcL2xvZ2luIiw
    iaWF0IjoxNTQxMzk3NDAyLC
    JleHAiOjE1NDE0MDEwMDIs
    Im5iZiI6MTU0MTM5NzQwMi
    wianRpIjoiSGx1eUVXRU5Jc
    TdWRHZ6ZyIsInN1YiI6MSwi
    cHJ2IjoiMWFiMTVlMTVhNG
    NiODBjOWY3MTJkZTQ3OD
    ViMmIyMDk4ZGFlMjhjMyJ9.
    Qkbo7Mf4kMlTbWT-
    r4L6GhSUUlTUE7p7OHPdob
    FEXiI
    Tokenͷྫ
    {
    "users": {
    "user_01": {
    "user_id": 23,
    "company_id": 43
    "rooms": ["room01", "room02"]
    },
    },
    "rooms": {
    "room01": {
    "last_message": "͜Μʹͪ͸ʂ",
    "created_at": datetime
    },
    "room02": { ... }
    },
    }
    αʔόαΠυ
    

    View Slide

41. ίϨΫγϣϯ͸جຊతʹ͸Ұͭʹ·ͱΊͯɺ಺෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ
    ίϨΫγϣϯͷJSONߏ଄ྫ
    FirebaseͷDatabaseྫ
    

    View Slide

42. ·ͱΊ
    

    View Slide

43. ‣ SPA։ൃܦݧ͕ͳͯ͘΋ɺVue.jsΛ৮ͬͨ͜ͱ͕͋ΔͳΒ
    Nuxt.jsΛ࢖͏͜ͱΛݕ౼ͯ͠΋͍͍͔΋͠Εͳ͍ʢSPA
    ϞʔυʹݶΔʣ
    ‣ Firebaseʹ͸͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ
    ·ͱΊ
    

    View Slide