Nuxtを使った 複業メディアサイトのアーキテクチャ紹介

29fc9602e0ed9cca544d677266dadd68?s=47 hikarut
September 28, 2019

Nuxtを使った 複業メディアサイトのアーキテクチャ紹介

29fc9602e0ed9cca544d677266dadd68?s=128

hikarut

September 28, 2019
Tweet

Transcript

  1. /VYUΛ࢖ͬͨ ෳۀϝσΟΞαΠτͷΞʔΩςΫνϟ঺հ ߴڮɹޫ /VYU OFUMJGZ DPOUFOUGVM )FSPLV 1ZUIPO 'JSFCBTF %PDLFS

  2. ࠓ೔ͷ࿩ͷର৅ऀ ɾҎԼݴޠ΍αʔϏεʹڵຯ͕͋Δਓ ɾݸਓ։ൃ͍ͯ͠Δਓ͜Ε͔Β͍ͨ͠ਓ )FSPLV 1ZUIPO 'JSFCBTF

  3. ΞδΣϯμ ɾࣗݾ঺հ ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌ ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

  4. ΞδΣϯμ ɾࣗݾ঺հ ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌ ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

  5. ࣗݾ঺հɹߴڮޫ ɾ8FCاۀࣾһΤϯδχΞϚωʔδϟʔ ɾ1)1 +BWB4DSJQU /PEFKT 7VFKT /VYUKT 1ZUIPO 4XJGU 3FBDU/BUJWF

     ɾגࣜձࣾΤοάγεςϜ ෳۀࣾһ IUUQTRJJUBDPNIJLBSVU IUUQTHJUIVCDPNIJLBSVU IUUQTUXJUUFSDPNMJHIU
  6. ΞδΣϯμ ɾࣗݾ঺հ ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌ ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

  7. Fukugyou ΤϯδχΞͷͨΊͷෳۀϝσΟΞαΠτ

  8. ɾΤϯδχΞ޲͚ͷෳۀ ෭ۀ ϝσΟΞαΠτ ɾෳۀ ෭ۀ ʹؔ࿈͢ΔهࣄΛ·ͱΊ͍ͯΔ ɾຖ೔ࣗಈߋ৽ ɾओͳػೳ͸هࣄͷࣗಈߋ৽ɺϒϩά౤ߘɺ ໰͍߹Θͤ IUUQTGVLVHZPVEFW

    Fukugyou 'VLVHZPVͱ͸
  9. IUUQTGVLVHZPVEFW Fukugyou 'VLVHZPVͱ͸ ɾʮEFWʯυϝΠϯ͸೥݄೔͔Βར༻Մೳʹͳͬͨτο ϓϨϕϧυϝΠϯ ɾ։ൃऀ༻ ։ൃऀ޲͚αΠτ༻ ͷυϝΠϯ ɾར༻Մೳʹͳͬͨͷ͕࠷ۙͳͷͰ޷͖ͳυϝΠϯΛૂ͑Δ͔΋ʁ ࢀߟɿ(PPHMF͕σϕϩούʔ޲͚υϝΠϯʮEFWʯͷઌऔΓϓϩάϥϜΛ։࢝ɻ༏ઌతʹυϝΠϯ໊Λ֬อՄೳʵ1VCMJDLFZ

    IUUQTXXXQVCMJDLFZKQCMPHHPPHMFEFWIUNM
  10. ΞδΣϯμ ɾࣗݾ঺հ ɾෳۀϝσΟΞαΠτͷαʔϏεઆ໌ ɾෳۀϝσΟΞαΠτͷΞʔΩςΫνϟઆ໌

  11. 8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁ

    1ZUIPO όοΫΤϯυ։ൃ؀ڥ
  12. )FSPLV 7VFUJGZ 1ZUIPO 'JSF4UPSF ΞʔΩςΫνϟɹ֓ཁ ϑϩϯτΤϯυ όοΫΤϯυ ੩తϑΝΠϧͷੜ੒ ϖʔδ੍࡞ͷͨΊͷ 6*ϑϨʔϜϫʔΫ

    ιʔείʔυ؅ཧͱ σϓϩΠࣗಈԽ ੩తϑΝΠϧͷ ϗεςΟϯά χϡʔεهࣄͷอଘ χϡʔεهࣄͷࣗಈߋ৽ॲཧ όονॲཧ όοΫΤϯυͷ࣮ߦݴޠ όοΫΤϯυͷ։ൃ؀ڥ هࣄͷ౤ߘऔಘͷ"1*
  13. ΞʔΩςΫνϟɹಛ௃ ɾϑϩϯτΤϯυɺόοΫΤϯυɺશͯαʔόϨεߏ੒ʹͳ͍ͬͯΔ ɾϚΠΫϩαʔϏεʹ͍ۙઃܭʹͳ͍ͬͯΔͨΊ޷͖ͳݴޠͰҎલͤ ͣ։ൃͰ͖Δ ɾ΄΅શͯΛແྉͰӡ༻͍ͯ͠Δ υϝΠϯ୅ͷΈ༗ྉ

  14. /VYU /VYUͱ͸7VF ΞϓϦέʔγϣϯΛ࡞੒͢Δ ϑϨʔϜϫʔΫͰ͢ 7VFKT͸+BWB4DSJQUͷ ϑϨʔϜϫʔΫͰ͢

  15. ࠷ۙͷ+BWB4DSJQUͷϑϨʔϜϫʔΫ 7VF 3FBDU "OHVMBS

  16. ࠷ۙͷ+BWB4DSJQUͷϑϨʔϜϫʔΫ ࢀߟɿ(PPHMFτϨϯυ ࠷ۙ͸ 7VFKT͕ਓؾ IUUQTTUBSIJTUPSZUUJPGBDFCPPLSFBDUBOHVMBSBOHVMBSWVFKTWVF

  17. /VYUΛ࢖͏ϝϦοτ ɾαʔόαΠυϨϯμϦϯάͰ͖Δ ɾ7VF3PVUFS 7VFYͳͲ͕࢖͍΍͍͢ ɾܕ͕ܾ·͍ͬͯΔͨΊෳ਺ਓ։ൃʹ޲͍͍ͯΔ ݸਓ։ൃͰ΋ૣ͘։ൃͰ͖Δ  ɾϗοτϦϩʔυͰ։ൃͰ͖Δ ɾ੩తϑΝΠϧͷੜ੒͕Մೳ /VYUΛબఆͨ͠

    େ͖ͳཁҼ ຊۀ΍ෳۀ ෭ۀ Ͱ/VYUΛ࢖͍͔ͬͯͨΒ
  18. 7VFUJGZ ɾVue.jsͰ࢖͑ΔϚςϦΞϧσβΠϯͷUIϑϨʔϜϫʔΫ ɾcssΛॻ͔ͣʹϨεϙϯγϒσβΠϯͳͲରԠ͍ͯ͠Δ ɾBulma,BootstrapͳͲͷcssϑϨʔϜϫʔΫɺUIϑϨʔϜϫʔΫ΋͋Δ 7VFUJGZΛબఆ͠ ͨେ͖ͳཁҼ 7VF /VYU ͱ૬ੑ͕Αͦ͞͏͔ͩͬͨΒ

  19. OFUMJGZ ɾ੩తϑΝΠϧͷϗεςΟϯάαʔϏε ɾ/VYUͷެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ /VYUͷެࣜυΩϡϝϯταΠτ͕OFUMJGZΛ࢖ͬͯϗεςΟϯά͍ͯ͠Δ  ɾ(JU)VCͱ࿈ܞͯ͠σϓϩΠ͕؆୯ ɾςετ؀ڥ΋༻ҙͰ͖Δ ϓϧϦΫ୯ҐͰςετ؀ڥ͕༻ҙͰ͖Δ  ɾଞαʔϏεͱͷ࿈ܞ͕Մೳ

    XFCIPPL͕࢖͑Δ  ɾҰఆͷϦΫΤετ·Ͱ͸ແྉͰ࢖͑Δ
  20. ੩తϑΝΠϧϗεςΟϯάαʔϏε ੩తϑΝΠϧͷੜ੒ɿIUUQTKBOVYUKTPSHHVJEF OFUMJGZ͸/VYUͷެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔͷͰ͓͢͢Ί

  21. DPOUFOUGVM ɾϔουϨε$.4 άϥϑΟΧϧͳ6*Λఏڙ͠ͳ͍$.4  ɾ8PSE1SFTTͱ͸ҧ͍$POUFOUGVM͸ϑϩϯτ෦෼ Ϣʔβʔ ͕৮ΕΔը໘ ͸Ұ੾ఏڙͳ͍ ɾ8PSE1SFTTͷ؅ཧը໘͚ͩ͋ΔΠϝʔδ ɾσʔλ͸"1*ܦ༝Ͱऔಘ͢Δ

    ɾҰఆͷ༰ྔ·Ͱ͸ແྉͰ࢖͑Δ
  22. $.4ͷબఆ ɾαʔόϨεߏ੒ʹ͔ͨͬͨ͠ ɾOFUMJGZ΍/VYUͱ΋૬ੑ͕ྑͦ͞͏ ɾϔουϨε$.4ͷதͰ͸࣮੷΋͋Γͦ͏ υΩϡϝϯτ͕ἧͬ ͍ͯΔ

  23. ೔ຊ੡ϔουϨεCMS IUUQTNJDSPDNTJP ͪ͜Β΋ϔουϨε$.4ͱͯ͠͸ྑͦ͞͏ʂ ։ൃ࣌ʹ͜ΕΛ஌͍ͬͯͨΒͪ͜ΒΛ࠾༻͍͔ͯͨ͠΋͠Ε·ͤΜɻɻ

  24. 1ZUIPO ɾεΫϦϓτݴޠ ɾ୹͍ߏจͰ෼͔Γ΍͘͢ॻ͚Δͷ͕ಛ௃ ɾ࠷ۙ͸ػցֶशɺ"*ྖҬͰਓؾͷݴޠ ɾ8FCΞϓϦέʔγϣϯͷϑϨʔϜϫʔΫ΋͋Γ෯޿͘࢖͑Δݴޠ 1ZUIPOΛબఆ͠ ͨେ͖ͳཁҼ ݸਓతʹ1ZUIPOΛॻ͖͔ͨͬͨʂ ϑϩϯτΤϯυʹ߹Θͤͯ/PEFKT࢖͏ͷ͕ϕλʔͳؾ͸͍ͯ͠·͢ɻɻ

  25. )FSPLV ɾ1BB4 1MBUGPSNBTB4FSWJDF ͱݺ͹ΕΔϓϥοτϗʔϜ ɾ8FCΞϓϦέʔγϣϯΛߏங͢Δ͏͑Ͱ༷ʑͳػೳΛఏڙ͠ ͯ͘ΕΔαʔϏε ɾࠓճ࢖͍ͬͯΔͷ͸)FSPLV4DIFEVMFSͷΈ

  26. )FSPLV4DIFEVMFS ɾόονॲཧ DSPO Λͯ͘͠ΕΔ)FSPLVͷϓϥάΠϯ ɾ෯޿͍ݴޠʹରԠ͍ͯ͠Δ 1ZUIPOʹ΋ରԠ͍ͯ͠Δ  ɾҰఆྔ·ͰແྉͰ࢖͑Δ ɾ%ZOP μΠϊ

    ͱ͍͏ίϯςφ͕ར༻Ͱ͖Δ ɾ EZOP݄·Ͱແྉˠ ݄࣌ؒ·Ͱແྉ ɾ೔਺ճͷόονॲཧ͙Β͍ͳΒ༨༟Ͱແྉͷൣғ಺
  27. )FSPLV4DIFEVMFSΛ࢖ͬͨྫ https://qiita.com/hikarut/items/6138e8e406da17f5b67c IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE

  28. )FSPLV4DIFEVMFSΛ࢖ͬͨྫ https://qiita.com/hikarut/items/6138e8e406da17f5b67c IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE ೔ճ)FSPLV4DIFEVMFS͔Β2JJUB"1*Λୟ ͍ͯهࣄΛࣗಈߋ৽͢Δ ೥Ҏ্ӡ༻த

  29. 'JSFCBTF ɾN#BB4 NPCJMFCBDLFOEBTB4FSWJDF ͱݴΘΕΔϞό ΠϧͷόοΫΤϯυߏஙΛαϙʔτ͢ΔϓϥοτϑΥʔϜ ɾϞόΠϧҎ֎ͷ8FCΞϓϦέʔγϣϯͰ΋࢖͑Δػೳ͕૿͑ ͍ͯΔ

  30. 'JSFCBTF 'JSFTUPSF ɾ/P42-ͷσʔλϕʔε ɾ֊૚ܕσʔλߏ଄ʹରԠ͍ͯ͠Δ υΩϡϝϯτͱίϨΫγϣϯ  ɾϦΞϧλΠϜੑʹڧ͍ ɾಡΈऔΓ͸ SFREBZ·Ͱແྉ ɾॻ͖ࠐΈ͸

    SFREBZ·Ͱແྉ ࡟আ΋ SFREBZ·Ͱແྉ
  31. 'JSFCBTF 'JSFTUPSF ɾ֊૚ܕσʔλߏ଄ʹରԠ͍ͯ͠Δ υΩϡϝϯτͱίϨΫγϣϯ

  32. 'JSFCBTF 'JSFTUPSF ɾಡΈऔΓ͸ SFREBZ·Ͱແྉ ˠճϦΫΤετ͢ΔͱίϨΫγϣϯʹඥ͍͍ͮͯΔυΩϡϝϯτ ͷ਺͚ͩϦΫΤετ਺͕Χ΢ϯτ͞ΕΔ ˠ8FCϖʔδΛදࣔ͢ΔͨͼʹσʔλΛऔΓʹߦ͘ͱɺ͋ͬͱ͍ ͏ؒʹແྉ࿮Λ௒͑ͯ͠·͏ɻɻ ɾOFUMJGZͷϏϧυͷ࣌ʹ͋Β͔͡Ί'JSFTUPSF͔ΒσʔλΛશ݅ औಘͯ͠KTPOϑΝΠϧͱͯ͠ग़ྗ

    ɾ੩తϑΝΠϧੜ੒࣌ʹKTPOϑΝΠϧΛಡΈࠐΉ͜ͱͰ 'JSFTUPSF΁ͷϦΫΤετ͸Ϗϧυ͚࣌ͩʹ͢Δ ΫϥΠΞϯτ͔Β͸'JSFTUPSF͸ࢀর͠ͳ͍
  33. 8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁ

    º ̋ ΫϥΠΞϯτ͔Β'JSFTUPSF ΁͸ϦΫΤετͤͣɺ OFUMJGZͷϏϧυ࣌ʹ౓ͩ ͚ϦΫΤετ͢Δ
  34. %PDLFS ɾίϯςφܕͷԾ૝؀ڥ ɾ1ZUIPOͷ࣮ߦ؀ڥͱͯ͠ར༻ ɾຊ൪؀ڥͰ͸࢖Θͣɺ։ൃ؀ڥ͚ͩͰ࢖͍ͬͯΔ ˞ຊ൪؀ڥͷ)FSPLVΛ%PDLFSͰσϓϩΠ͢Δ͜ͱ΋Մೳ

  35. %PDLFSͷϝϦοτ ɾϩʔΧϧ؀ڥΛԚͣ͞։ൃ؀ڥ͕࡞ΕΔ ɾ࠶ݱ͕͠΍͍͢ͷͰଞͷਓɺଞͷ1$Ͱ΋͙͢ʹ։ൃ؀ڥͷߏ ங͕Ͱ͖Δ ɾຊ൪σϓϩΠ΋%PDLFSͰߦ͏͜ͱͰ։ൃ؀ڥͱຊ൪؀ڥͰ ͷࠩ෼Λແͤ͘Δ

  36. )FSPLV 7VFUJGZ 1ZUIPO 'JSF4UPSF ΞʔΩςΫνϟɹ֓ཁɹ·ͱΊ ϑϩϯτΤϯυ όοΫΤϯυ ੩తϑΝΠϧͷੜ੒ ϖʔδ੍࡞ͷͨΊͷ 6*ϑϨʔϜϫʔΫ

    ιʔείʔυ؅ཧͱ σϓϩΠࣗಈԽ ੩తϑΝΠϧͷ ϗεςΟϯά χϡʔεهࣄͷอଘ χϡʔεهࣄͷࣗಈߋ৽ॲཧ όονॲཧ όοΫΤϯυͷ࣮ߦݴޠ όοΫΤϯυͷ։ൃ؀ڥ هࣄͷ౤ߘऔಘͷ"1*
  37. 8FCIPPL CVJME "1* "1* )FSPLV 1ZUIPO 'JSF4UPSF 8FCIPPL CVJME ΞʔΩςΫνϟɹ֓ཁɹ·ͱΊ

    1ZUIPO όοΫΤϯυ։ൃ؀ڥ
  38. &/%

  39. "11&/%*9

  40. ࢀߟهࣄ ɾෳۀͰ8FCαΠτ੍࡞͢Δࡍͷ8PSE1SFTTͱ/VYUKTͷϝϦσϝൺֱ IUUQTGVLVHZPVEFWQPTUT ɾ/VYUKTͱ$POUFOUGVMͰϒϩά࡞ͬͯΈͨ IUUQTRJJUBDPNIJTBLPJUFNTCEGFGF ɾʲೖ໳ʳ/VYUKT $POUFOUGVM /FUMJGZͰ࢝ΊΔɺ+".TUBDLͳ$.4ߏங IUUQTRJJUBDPNJTJIJHBNF,PVEBJJUFNTFBEFDBDD ɾ/VYUKT

    $POUFOUGVM /FUMJGZͰϒϩάΛͭ͘Δ IUUQTRJJUBDPNDIJIBSVJTBLJJUFNTGDBDDDDC ɾ/VYU /FUMJGZ $POUFOUGVM 1ZUIPO 'JSFCBTF )FSPLVΛ࢖ͬͨແྉͰαʔόϨεͳෳۀϝσΟΞ αΠτΛ࡞ͬͨ࿩ IUUQTRJJUBDPNIJLBSVUJUFNTCEE⒎EBG ɾ/VYUͰϏϧυ࣌ʹ"1*Λ੩తԽͯ͠ɺ׬શʹαʔόʔ΁ͷϦΫΤετΛͳ͘͢τ IUUQTRJJUBDPNTPJDIJSP@OJUUBJUFNTDBEFCBFE