Nuxt.jsでSPA_Webアプリを初期構築した話.pdf

by Takayuki

Slide 1

Slide 1 text

Nuxt.jsでSPA Webアプリを初期構築した話鈴木孝之 2018/12/06

Slide 2

Slide 2 text

"HFOEB ࣗݾ঺հɾձࣾ঺հ /VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ αʔόߏ੒ +85ೝূ ͦͷଞ޻෉ͨ͠఺ NJYJOͳͲ

Slide 3

Slide 3 text

ࣗݾ঺հɾձࣾ঺հ

Slide 4

Slide 4 text

0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js Nuxtྺ 2ϲ݄͘Β͍ʂʂʂ

Slide 5

Slide 5 text

Slide 6

Slide 6 text

/VYUKTͱ-BSBWFMͰͷ8FCΞϓϦઃܭ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷURL- safeͳJSONΛ࢖ͬͨೝূํࣜͰ ͢ɻ Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕͍ͭ ͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ͕େ ͖͍Ͱ͢ɻ

Slide 10

Slide 10 text

JWTͱ͸ [ೝূϑϩʔͷ࢓૊Έ] ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴Ͱ҉߸Խͯ͠JWT ͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞΫηεΛߦ͏ɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ

Slide 13

Slide 13 text

MiddleWareͷൃಈλΠϛϯά ɾೝূͳͲͷϨϯμϦϯάΑΓ΋લʹ࣮ߦ ͍ͨؔ͠਺Λ͜͜ʹஔ͖·͢ɻ ϛυϧ΢ΣΞ͸Լهͷॱʹ࣮ߦ͞Ε·͢ 1.nuxt.config.js 2.Ϛονͨ͠ϨΠΞ΢τ 3.Ϛονͨ͠ϖʔδ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

LaravelଆͰ΍͍ͬͯΔ͜ͱ ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ ɾ/api/me Ϣʔβʔͷ৘ใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ

Slide 17

Slide 17 text

LaravelଆͰͷ࣮૷खॱ ᶃೝূػೳΛ࡞੒ ᶄcomposerͰjwt-authΛΠϯετʔϧ ᶅEmployeeϞσϧΛमਖ਼ ᶆguardΛमਖ਼ ᶇApiControllerΛੜ੒ ᶈroutes/api.phpΛฤू

Slide 18

Slide 18 text

ը໘Πϝʔδ

Slide 19

Slide 19 text

ը໘Πϝʔδ

Slide 20

Slide 20 text

ը໘Πϝʔδ

Slide 21

Slide 21 text

ͦͷଞ޻෉ͨ͠఺

Slide 22

Slide 22 text

mixinͰϖʔδભҠ࣌ʹSpinnerΛൃಈͤ͞Δ ■લఏ৚݅ ɾಠࣗͷSpinnerΛ࢖͍͍ͨɻ ɾຖճɺ֤ίϯϙʔωϯτʹಠࣗSpinnerىಈɾऴྃͷఆٛΛ͢ Δͷ͕໘౗ͳͷͰmixinΛ࢖͍ɺ ͳΔ΂͘ɺιʔεతʹ͸҉໧తʹൃಈͤ͞Δɻ

Slide 23

Slide 23 text

mixinͰϖʔδભҠ࣌ʹSpinnerΛൃಈͤ͞Δ ■࣮૷खॱ 1.ಠࣗϩʔσΟϯά༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ 2. nuxt.conf.jsͷloadingʹ্هίϯϙʔωϯτΛࢦఆ͢Δɻ 3.mixin༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ 4.ϩʔσΟϯάΛݺͼग़͍֤ͨ͠ίϯϙʔωϯτͰmixinΛࢦఆ͢Δɻ

Slide 24

Slide 24 text

ը໘Πϝʔδ

Slide 25

Slide 25 text

ը໘Πϝʔδ

Slide 26

Slide 26 text

mixinͱ͸ʁ ɾϛοΫεΠϯ (mixin) ͸ɺVue ίϯϙʔωϯτʹ࠶ར༻ՄೳͰॊೈ ੑͷ͋ΔػೳΛ࣋ͨͤΔͨΊͷํ๏Ͱ͢ɻ ɾϛοΫεΠϯΦϒδΣΫτ͸೚ҙͷίϯϙʔωϯτΦϓγϣϯΛؚ Ή͜ͱ͕Ͱ͖·͢ɻίϯϙʔωϯτ͕ϛοΫεΠϯΛ࢖༻͢Δͱ͖ɺ ϛοΫεΠϯͷશͯͷΦϓγϣϯ͸ίϯϙʔωϯτࣗ਎ͷΦϓγϣϯ ʹ”ࠞͥΒΕ”·͢ɻ ɾίϯϙʔωϯτʹΦϓγϣϯΛ͚ͭΒΕΔΑ͏ͳΠϝʔδʂ

Slide 27

Slide 27 text

■खॱ1 ಠࣗϩʔσΟϯά༻ίϯϙʔωϯτΛ༻ҙ͢Δɻ components/loading.vueΛҎԼͷΑ͏ʹฤू͢ Δɻ start()ͱfinish()͸ఆٛඞਢɻ components/loading.vue

Slide 28

Slide 28 text

■खॱ2 nuxt.conf.jsͷloadingʹ্هίϯϙʔωϯ τΛࢦఆ͢Δ nuxtͰಈ͘σϑΥϧτͷSpinnerʹɺઌఔ ࡞੒ͨ͠loading.vueΛࢦఆ͢Δɻ nuxt.conf.jsΛҎԼͷΑ͏ʹฤू͢Δɻ nuxt.conf.js

Slide 29

Slide 29 text

■खॱ3 mixin༻ίϯϙʔωϯτΛ༻ҙ͢Δ components/loadingMixin.jsΛ࡞੒͢Δɻ ɾൃಈλΠϛϯάΛίϯτϩʔϧ͍ͯ͠ΔΠ ϝʔδʂ ɾ͜ΕʹΑΓmixinΛ࢖༻͢Δίϯϙʔωϯτ ͕Ϛ΢ϯτ͞ΕͨλΠϛϯάͰಠࣗSpinner͕ ඳը͞ΕΔɻ ͳ͓this.$nuxt.$loading.start()͸nuxt.conf.jsͰ ࢦఆͨ͠ಠࣗSpinnerͷඳըΛ։࢝Λɺ this.$nuxt.$loading.finish()͸ඳըͷऴྃΛ ߦ͍ͬͯΔɻ components/loadingMixin.js

Slide 30

Slide 30 text

■खॱ4 ϩʔσΟϯάΛݺͼग़͍֤ͨ͠ίϯϙʔωϯτͰmixinΛࢦఆ͢Δ ҎԼͷΑ͏ʹpages/index.vue, pages/about.vueΛ࡞੒͢Δɻ pages/about.vue pages/index.vue

Slide 31

Slide 31 text

Nuxt.jsͷ؅ཧը໘ςϯϓϨʔτΛ࢖༻ ͜ΕΛ࢖͏͜ͱͰॳظͷcomponentͷ੾Γ෼͚ɺ ֤छઃఆϑΝΠϧͷಋೖͷखؒΛল͚ͨɻ ؅ཧը໘ͩͱಛʹࣅͨΑ͏ͳσβΠϯʹͳΔͷͰɺ ج൫ͷιʔε͸ςϯϓϨʔτΛ࢖͏ࣄΛ͓קΊ͠· ͢ɻ https://github.com/muhibbudins/nuxt-coreui

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

ᶃJWTೝূΛ؆୯ʹ࣮ݱͰ͖Δʂ ᶄMixinʹڞ௨ॲཧΛ·ͱΊ͓ͯ͘ͱྑͦ͞͏ʂ ·ͱΊ

Slide 34

Slide 34 text

ࢀߟ ɾJWTɺJSON΢ΣϒτʔΫϯ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token ɾJWT(JSON Web Token)Λཧղ͢Δɻ https://scrapbox.io/fendo181/JWT(JSON_Web_Token) %E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B%E3 %80%82 ɾϦϏϧυࣾһϒϩά http://kkznch.hatenablog.com/entry/2018/11/27/143022