Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development...
Search
kkznch
January 30, 2019
Technology
3
3.2k
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
410
VueRouterとNuxtのルーティング/VueRouter and Nuxt Routing
kkznch
0
370
Vuexで何を管理する方が良い?/What is better to store in Vuex?
kkznch
1
760
Firestoreのルール設定 割と何でも出来てビビる/Firestore rule setting
kkznch
1
810
LaraCSVで手軽にCSVを出力する/Easily generate CSV by LaraCSV
kkznch
0
1.7k
自社サービス チャット機能にFirebaseが導入されてた/Firebase was introduced to the chat function of our service
kkznch
0
1.2k
Laravel Telescopeが便利そうな気がする/Laravel Telescope seems to be convenience
kkznch
1
1.1k
Laravel Novaはなんだかいい感じらしい/Laravel Nova seems to be nice
kkznch
0
660
Laravel5.5的 継続的インテグレーション / Laravel 5.5 Continuous Integration
kkznch
3
3.5k
Other Decks in Technology
See All in Technology
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
330
TypeScript 上達の道
ysknsid25
23
4.8k
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
AI工学特論: MLOps・継続的評価
asei
10
2k
claude codeでPrompt Engineering
iori0311
0
520
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
1
410
MCPと認可まわりの話 / mcp_and_authorization
convto
2
290
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
750
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
280
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
320
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.8k
スプリントレビューを効果的にするために
miholovesq
9
1.7k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
KATA
mclloyd
30
14k
Automating Front-end Workflow
addyosmani
1370
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Done Done
chrislema
184
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Six Lessons from altMBA
skipperchong
28
3.9k
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ʹ͍ΖΜͳՄೳੑ͕͋Γͦ͏ʂ ·ͱΊ