Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development
kkznch
January 30, 2019
Technology
3
2.6k
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
Share
More Decks by kkznch
See All by kkznch
黒い画面へようこそ/Hello, black screen
kkznch
0
210
VueRouterとNuxtのルーティング/VueRouter and Nuxt Routing
kkznch
0
210
Vuexで何を管理する方が良い?/What is better to store in Vuex?
kkznch
1
550
Firestoreのルール設定 割と何でも出来てビビる/Firestore rule setting
kkznch
2
480
LaraCSVで手軽にCSVを出力する/Easily generate CSV by LaraCSV
kkznch
0
1.2k
自社サービス チャット機能にFirebaseが導入されてた/Firebase was introduced to the chat function of our service
kkznch
0
870
Laravel Telescopeが便利そうな気がする/Laravel Telescope seems to be convenience
kkznch
1
780
Laravel Novaはなんだかいい感じらしい/Laravel Nova seems to be nice
kkznch
0
470
Laravel5.5的 継続的インテグレーション / Laravel 5.5 Continuous Integration
kkznch
3
2.8k
Other Decks in Technology
See All in Technology
AKIBA.SaaS資料
yasumuusan
0
160
FlexScan HD2452Wの 後継を探して
tring
0
2.7k
230120 ガンダムの事例にみる自動化の対象 Haruka Oh!さん
comucal
PRO
0
120
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
160
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
110
アムロは成長しているのか AIから分析する
miyakemito
1
350
チケットNFTの仕組み
sbtechnight
0
330
Akiba-dot-SaaS-ExtraHop
sakaitakeshi
1
110
Deep dive in Reserved Instance ~脳死推奨量購入からの脱却~
kzkmaeda
0
390
SignalR を使ったアプリケーション開発をより快適に!
nenonaninu
0
430
lt53
98_justdoit
0
110
plotlyで動くグラフを作る
kosshi
0
740
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Practical Orchestrator
shlominoach
178
8.9k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
BBQ
matthewcrist
75
8.1k
The Language of Interfaces
destraynor
149
21k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Transcript
SPA開ൃ未ܦݧ者による Nuxt.jsを使った自社サʔビス開ൃ 嘉侑起 2019/01/30
"HFOEB ࣗݾհɾձࣾհ /VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ /VYUKTΛͬͯײͨ͡ϝϦοτɾσϝϦοτ ͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKT Ћ ·ͱΊ
ࣗݾհɾձࣾհ
ࣗݾհ ◆໊લ Յ ါى(Kakazu Yuki) @kkznch ◆ࣗݾհ ɾ1990ͷԭೄݝੜ·Εԭೄҭͪ ɾ2016ʹԭిάϩʔόϧγεςϜζגࣜձࣾʹೖࣾɺ2018 ʹגࣜձࣾRe:Buildస৬ͯ͠ݱࡏʹࢸΔ
◆झຯ όϨʔϘʔϧɺϐΞϊɺཱྀߦɺΧϑΣ८ΓɺήʔϜ ◆εΩϧ ɾPHPɺGolangɺJavaScriptɺC/C++ɺPythonɺRuby ɾLaravelɺVue.jsɺNuxt.js ◆࠷ۙͷΈ ɾࣸਅࡱΒΕΔͱ͖ʹѱ͍সإʹͳΔ
Copyright Re:Build.inc All Rights Reserved. ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ ໊̑ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
/VYUKTΛಋೖͨࣗࣾ͠αʔϏεʹ͍ͭͯ
։ൃதͷࣗࣾαʔϏε ɾαʔόαΠυ 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৮ͬͨ͜ͱ͋Δϝϯόʔ͕ଟ͍ ٕज़ཁ݅ ։ൃମ੍
ϑϩϯτΤϯυ αʔόαΠυ αʔόߏ DBΞΫηε ϑΝΠϧΞοϓϩʔυ Ajax௨৴
(1)PUSH (2)GitLab CI࣮ߦ Gitlab ECS ϦϙδτϦ σϓϩΠϑϩʔ ECR (3)ίϯςφΛPUSH (4)ίϯςφىಈ
αΠτӾཡ Nuxt.js͜͜ͰϏϧυ
‣ ં֯ͳͷͰྲྀߦΓʹͷͬͯSPAԽ͔ͨͬͨ͠ ‣ ։ൃϝϯόʹVue.jsͰͷ։ൃܦݧΛ࣋ͭਓ͕͍Δ ‣ SPAͷϊϋ͕ແ͍ͨΊɺنʹԊ͏͜ͱͰػೳΛ࣮ ݱͰ͖ΔNuxt.js͕࠷దͩͱߟ͑ͨ Nuxt.jsΛબఆͨ͠ཧ༝
‣ σΟϨΫτϦɾϑΝΠϧߏ ͔Βࣗಈੜ نྫᶃ ϧʔςΟϯάͷࣗಈੜ Build
‣ ը໘͕ϨϯμϦϯά͞ΕΔલʹ ॲཧΛڬΊΔ ‣ ը໘શମ·ͨݸผʹڬΊΔ نྫᶄ ϛυϧΣΞ
‣ ࣗલϥΠϒϦɺ֎෦Ϟδϡʔϧͱ߹Θͤͯ༻͢Δ نྫᶅ ϓϥάΠϯ axiosʹಠࣗॲཧΛՃ͢Δ࣌
ʮ͜͜ʹ͜͏ஔ͚͜͏͍͏͜ͱ͕࣮ݱͰ͖Δʯ
/VYUKTΛͬͯײͨ͡ϝϦοτɾσϝϦοτ
Nuxt.jsΛͬͯΈͯײͨ͡ϝϦοτ
‣ ϑΝΠϧߏ͔ΒϧʔςΟϯάͷࣗಈੜ ‣ ϛυϧΣΞʹΑΔϨϯμϦϯάલޙͷॲཧ ‣ ϓϥάΠϯʹΑΔ֎෦ύοέʔδɺಠࣗϥΠϒϥϦར༻ نͷ͓͔͛ͰΉ࣌ؒΛॖ Ͳ͜ʹԿΛஔ͍ͯͲ͏ॻ͔͕ܾ͘·ͬͯΔͷͰ·ͳ͍
‣ ಠࣗϧʔϧɺΦϨΦϨΞʔΩςΫνϟͷഉআ ‣ શମతʹϑΝΠϧߏίʔυͷॻ͖ํ͕౷Ұ͞ΕΔ - ٕज़Ϩϕϧ͕ͯ͋͘Δఔίʔυͷ࣭ΛอͯΔ νʔϜͰͷ։ൃΛޮԽ Ͳ͜ʹॻ͚͍͍͔͔Βͳ͍ศརͦ ͏ͳίʔυUtilΫϥεʹ·ͱΊΔͱ Αͦ͞͏ˑ
←Α͘ͳ͍
ຊޠͷެࣜυΩϡϝϯτɺॻ੶͕ྑ͍ ʮNuxt.jsϏΪφʔζΨΠυʯ ʮجૅ͔ΒֶͿVue.jsʯ
Nuxt.jsΛͬͯΈͯײͨ͡σϝϦοτ ※࣮ࡍσϝϦοτΛײ͡Δ໘ʹ·ͩૺ۰͍ͯ͠ͳ͍
‣ ൃੜ࣌ͷݪҼಛఆ͕ͦ͠͏ ‣ ผϑϨʔϜϫʔΫͷҠߦ͕ۤ͘͠ͳΓͦ͏ - Nuxt.jsͷίʔυΛಡΈղ͔͘͠ͳ͍ɺͦΕͳΒNuxt.js ΘͣʹVue.jsͰॻ͘ํ͕Α͍...ʁ Nuxt.jsͱ͍͏ϒϥοΫϘοΫε
‣ Ϗϧυʹ͕͔͔࣌ؒΔ ‣ ϏϧυޙͷϑΝΠϧαΠζ͕ංେԽ͢Δ - ϖʔδ๚࣌ͷ࠷ॳͷಡΈࠐΈʹ͕͔͔࣌ؒΔ ϑΝΠϧαΠζ͕ංେԽ͍ͯ͘͠ ※Nuxt.jsʹݶͬͨ͠Ͱͳ͍
‣ ҟͳΔυϝΠϯʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ ҟͳΔϓϩτίϧʹରͯ͠ϦΫΤετૹ৴͢ΔͱౖΒΕΔ ‣ όοΫΤϯυͱΠϯϑϥଆͷઃఆ͕ඞཁͳ߹͋Δ CORSͳͲΠϯϑϥབྷΈͷΤϥʔ͕໘ ※Nuxt.jsʹݶͬͨ͠Ͱͳ͍
ن͔Βड͚ΔԸܙେ͖͍͕ɺ ࠇശ෦Λ৮Δඞཁ͕ग़ͯ͘ΔͱΩπΠ͔
͓·͚ࣗࣾαʔϏεʹ͓͚Δ/VYUKT Ћ
JWTΛͬͨϢʔβͷೝূɺAPIͷ࣮ߦ
‣ ిࢠॺ໊͖ͷURL- safeͳJSONΛͬͨ ೝূํࣜ ‣ ిࢠॺ໊͕͍͍ͭͯΔ ͷͰվ͟ΜΛࢭՄೳ JWTʢJson Web Tokenʣͱ
JSONΣϒτʔΫϯͷ༻Λਪ͢Δ͍͔ͭ͘ͷཧ༝ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔϔομʔͱͯ͑͠Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ JWTΛ͏ϝϦοτ ※Ҿ༻ݩ
https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
1. ΫϥΠΞϯτ͔Βೝূใ(ϩάΠϯIDͱύεϫʔυ)͕ૹ ৴͞ΕΔ 2. αʔόೝূใ͔ΒϢʔβใͱ༗ޮظݶΛؚΉJSON Λൿີ伴Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δ 3. ΫϥΠΞϯτड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ JWTͷೝূϑϩʔ
ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ
ຖճɺToken͕localStrageʹ ͋Δ͔νΣοΫɻ ͳ͚ΕɺϩάΠϯը໘ʹ ϦμΠϨΫτ͢Δ middlewareͰͷϩάΠϯνΣοΫͷྫ
plugin (axios)Ͱͷtokenઃఆྫ ϦΫΤετ࣌ʹtokenΛ Authorizationϔομʔʹઃఆ tokenͷظݶΕͳͲͰ ΤϥʔͰམͪͨ߹ʹదͳ ϖʔδʹϦμΠϨΫτ͢Δ
ը໘Πϝʔδ
ը໘Πϝʔδ
ը໘Πϝʔδ
FirebaseΛͬͨνϟοτػೳ
νϟοτػೳͷ࣮ݱํ๏Λٞ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ͏͔ʁ ɾஅج४ - ࣮қ͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠ੳ͢ΔՄೳੑ͋Γɻ -
࠾༻ͷϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
ٞͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ͘Β͍Ͱ࣮Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮͕ͯͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)ϩϯάϙʔϦϯάͰ
࣮ͨ͠Β͚ͬ͜͏͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷϦʹͳΓͦ͏ɻ
FirebaseͰͷݒ೦ - Firebase্ͷDatabaseͷແྉ͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘ΔͷΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ݅ϑΟʔϧυ̍֊ઌ·Ͱ͔͠ࢦఆͰ͖ͳ͍ɻ - ͦͷଞʹݕࡧ݅ʹ੍ݶ͋Γɻ
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": { ... } }, } αʔόαΠυ
ίϨΫγϣϯجຊతʹҰͭʹ·ͱΊͯɺ෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏྫ FirebaseͷDatabaseྫ
·ͱΊ
‣ SPA։ൃܦݧ͕ͳͯ͘ɺVue.jsΛ৮ͬͨ͜ͱ͕͋ΔͳΒ Nuxt.jsΛ͏͜ͱΛݕ౼͍͍͔ͯ͠͠Εͳ͍ʢSPA ϞʔυʹݶΔʣ ‣ Firebaseʹ͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ