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

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

kkznch
January 30, 2019

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/

kkznch

January 30, 2019
Tweet

More Decks by kkznch

Other Decks in Technology

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