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.5k
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
190
VueRouterとNuxtのルーティング/VueRouter and Nuxt Routing
kkznch
0
190
Vuexで何を管理する方が良い?/What is better to store in Vuex?
kkznch
1
520
Firestoreのルール設定 割と何でも出来てビビる/Firestore rule setting
kkznch
2
420
LaraCSVで手軽にCSVを出力する/Easily generate CSV by LaraCSV
kkznch
0
1.1k
自社サービス チャット機能にFirebaseが導入されてた/Firebase was introduced to the chat function of our service
kkznch
0
810
Laravel Telescopeが便利そうな気がする/Laravel Telescope seems to be convenience
kkznch
1
700
Laravel Novaはなんだかいい感じらしい/Laravel Nova seems to be nice
kkznch
0
440
Laravel5.5的 継続的インテグレーション / Laravel 5.5 Continuous Integration
kkznch
3
2.7k
Other Decks in Technology
See All in Technology
プロダクトマネージャーの役割と育成、評価
middleokada
16
11k
IBM Cloud Festa Online 2022 Summer
1ftseabass
PRO
0
200
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
19k
You're M̶u̶t̶e̶d̶ Rooted
patrickwardle
0
4.1k
聊聊 Cgo 的二三事
david74chou
0
330
やってみたLT会 Fleet Managerのススメ
yukiiiiikuma
PRO
0
400
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
1
1.4k
SPAとWebアプリケーションでCognitoの使い方はどう変わるのか? / How do we use cognito with SPA and web applications?
kitano_yuichi
0
400
疎ベクトル検索と密ベクトル検索: 第68回 Machine Learning 15minutes! Broadcast
keyakkie
1
250
Amazon Comprehendで始める感情分析
46ta
0
190
フィンテック養成勉強会#24
finengine
0
330
ECS on EC2 で Auto Scaling やってみる!
sayjoy
1
240
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
63
7.6k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
In The Pink: A Labor of Love
frogandcode
131
21k
The Invisible Customer
myddelton
110
11k
Scaling GitHub
holman
451
140k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
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ʹ͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ