Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発_台湾版

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発_台湾版

Laravel + Nuxt.js + FirebaseでDXと開発コストを意識したSPA開発_台湾版

Takayuki

July 19, 2019
Tweet

More Decks by Takayuki

Other Decks in Programming

Transcript

  1. 2 ٕज़બᎩ Agenda 4 ᅶୂݐߏ 1 ࣗզհ঺ 3 ᮫ԙબఆతٕज़ -

    Overall product design - JWT authentication - Chat function with Firebase
 - Test, GitlabCI etc
  2. 6 ࣗզհ঺ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺ೔ຊͷਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥5݄ʹϑϦʔ

    ϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓɺίεϓϨ ◆Twitter @kanbo0605 υϥΰϯϘʔϧͷ ϐοίϩͰ͢ʂ
  3. Copyright Re:Build.inc All Rights Reserved. ࣗզհ঺ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢ

    ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 5໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ ΤϯδχΞืूதͰ͢ʂ
  4. Re:Build اۀͷ୲౰ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗ෼ͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨ͸νʔϜʹ੠Λ͔͚Δ ΤʔδΣϯτ͸ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ

    اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࢓ࣄΛ঺հ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋
  5. 1 2 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ)

    Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿) ͜ͷϙδγϣϯΛ ΍ͬͯ·͢ʂ
  6. 1 5 Development schedule 2018೥12݄ʙ 2019೥3݄ 2019೥4݄ʙ6݄ ։ൃ։࢝ Ϋϩʔζυβ൛׬੒ ࠷௿ݶͷ։ൃج൫ɺυ

    Ωϡϝϯτɺ։ൃମ੍ Λ੔උͯ͠ɺ͕ͬͭΓ ։ൃΛਐΊΔ ଟগɺόά͕͋ͬͯ΋ ྑ͍ͷͰɺશମతʹ࠷ ௿ݶͷॳظͷػೳ͕Ϧ Ϧʔε͞Ε͍ͯΔঢ়ଶ Λ໨ࢦ͢ɻ γʔυϥ΢ϯυͷࢿۚ ௐୡ༧ఆ ॳظͷػೳ͕ϦϦʔε ͞Ε͓ͯΓɺ͋Δఔ౓ɺ Ϣʔβͷొ࿥΋֬อ͞ Ε͍ͯΔঢ়ଶΛ໨ࢦ͢
  7. 2 6 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ PHP(Laravel5.8) ɾϑϩϯτΤϯυ JavaScript(Vue.js,Nuxt.js) ɾςετ PHPUnit,Cypress

    ɾ੩తղੳ ESlint,PHPStan ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃ؀ڥ php7,nginx,mariadb,docker,webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳ Ͳ),Slack,phpStorm
  8. 3 1 JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷ URL-safeͳJSONΛ࢖ͬͨೝূํ ࣜͰ͢ɻ

    Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕ͭ ͍͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ ͕େ͖͍Ͱ͢ɻ
  9. front end login process flow API request Server side Vuex

    Token is returned 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 example HTML CSS JS Receive Token and set to localStorage Every time, check if Token is in localStrage. If not, redirect to login screen Each time, check localStorage and set token in Authorization header localStrage token get token On the server side Execute login process Issue a token. Access from browser, Enter user ID and password set token
  10. 3 7 ᶃೝূػೳΛ࡞੒ $ php artisan make:auth $ php artisan

    migrate ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞੒͢Δɻ ͜ΕͰ؆୯ʹೝূػೳΛ࡞੒Ͱ͖·͢ɻ
  11. 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": { ... } }, } αʔόαΠυ
  12. 7 2 ೔ຊͷSNSͷൺֱ 20୅Ҏ্ͷஉঁ ݎΊͳงғؾ ɾϏδωεܥͷ৘ใൃ৴ˍऩू ɾ݁ࠗ΍స৬ͷۙگใࠂͳͲ ɾϏδωεͰͷ׆༻ɺχϡʔε ͷγΣΞ౳ ɾۙگใࠂ౳ɺগ͠ݎΊͷ

    ౤ߘ গ͠࢖͏ ΄ͱΜͲ࢖Θͳ͍ 20୅ʙ30୅ঁੑ ϋΠηϯεͳงғؾ ϏδϡΞϧʹؔ͢Δ͜ͱ ͷ৘ใൃ ৴ˍऩू ɾϙδςΟϒͳ౤ߘ͹͔Γ ɾϢʔβʔͷੈք؍͕ॏࢹ͞ΕΔ 10ʙ20୅ͷஉঁ ࠷ۙ͸30୅΋ଟΊɻ ΧδϡΞϧͳงғؾ ɾଈ࣌ੑͷߴ͍৘ใൃ৴ˍऩू ɾࢥͬͨ͜ͱײͨ͜͡ͱΛϥϑ ʹͭͿ΍͘ ɾಗ໊ੑ ɾϦΞϧλΠϜੑ͕ߴ͍ ɾΧδϡΞϧͳ౤ߘ Α͘࢖͏ ओཁ Ϣʔβʔଐੑ ར༻໨త ಛ௃ ΤϯδχΞ͕࢖͏͔ʁ
  13. 7 4 ։ൃνʔϜߏ੒ Suzuki Takayuki ਖ਼ࣾһ (ि5೔ۈ຿) Kakazu Yuki (ਖ਼ࣾһ)

    Ϛωδϝϯτ&։ൃ ։ൃ ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि2೔ۈ຿) ϑϦʔϥϯε (ि1೔ۈ຿) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5೔ۈ຿) ෭ۀ (ि1೔ۈ຿)
  14. 8 1 εΫϥϜ։ൃ ݄ Ր ਫ ໦ ۚ Sprint ϙʔΧʔϓϥϯχ

    ϯά/։ൃ/
 ϦϦʔε σΠϦʔεΫϥϜ/ ։ൃ σΠϦʔεΫϥϜ/ ։ൃ σΠϦʔεΫϥϜ/ ։ൃ εϓϦϯτϨϏϡ ʔ/
 εϓϦϯτϓϥϯ χϯά