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

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Λ࢖͏ϝϦοτ ɾαʔόαΠυϨϯμϦϯάͰ͖Δ
    ɾ7VF
    3PVUFS
    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 1MBUGPSN
    BT
    B
    4FSWJDF ͱݺ͹ΕΔϓϥοτϗʔϜ
    ɾ8FCΞϓϦέʔγϣϯΛߏங͢Δ͏͑Ͱ༷ʑͳػೳΛఏڙ͠ ͯ͘ΕΔαʔϏε
    ɾࠓճ࢖͍ͬͯΔͷ͸)FSPLV
    4DIFEVMFSͷΈ
26. )FSPLV
    4DIFEVMFS ɾόονॲཧ DSPO Λͯ͘͠ΕΔ)FSPLVͷϓϥάΠϯ
    ɾ෯޿͍ݴޠʹରԠ͍ͯ͠Δ 1ZUIPOʹ΋ରԠ͍ͯ͠Δ
    ɾҰఆྔ·ͰແྉͰ࢖͑Δ
    ɾ%ZOP μΠϊ ͱ͍͏ίϯςφ͕ར༻Ͱ͖Δ
    ɾ EZOP݄·Ͱແྉ
    ˠ
     ݄࣌ؒ·Ͱແྉ
    ɾ೔਺ճͷόονॲཧ͙Β͍ͳΒ༨༟Ͱແྉͷൣғ಺
27. )FSPLV
    4DIFEVMFSΛ࢖ͬͨྫ https://qiita.com/hikarut/items/6138e8e406da17f5b67c IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE
28. )FSPLV
    4DIFEVMFSΛ࢖ͬͨྫ https://qiita.com/hikarut/items/6138e8e406da17f5b67c IUUQTRJJUBDPNIJLBSVUJUFNTFFEBGCD IUUQTRJJUBDPNIJLBSVUJUFNTGDBDCE ೔ճ)FSPLV
    4DIFEVMFS͔Β2JJUB
    "1*Λୟ ͍ͯهࣄΛࣗಈߋ৽͢Δ ೥Ҏ্ӡ༻த
29. 'JSFCBTF ɾN#BB4 NPCJMF
    CBDLFOE
    BT
    B
    4FSWJDF ͱݴΘΕΔϞό ΠϧͷόοΫΤϯυߏஙΛαϙʔτ͢ΔϓϥοτϑΥʔϜ
    ɾϞόΠϧҎ֎ͷ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