VuePress x Firebaseでエンジニアブログを作ってみた話

Transcript

1. VuePress x FirebaseͰ ΤϯδχΞϒϩάΛ࡞ͬͯΈͨ࿩ גࣜձࣾεϚʔτγϣοϐϯάɹࢤ࣏௚ق
2. ࣗݾ঺հ • ໊લɿࢤ࣏௚قʢ@GcNok2ʣ • ୲౰ɿECγϣοϓͷՁ֨ൺֱαΠτͷ։ൃ • ։ൃݴޠɿVueɺAngularɺPHPɺGo • ೖࣾ࣌ظɿ2019೥2݄
3. ໨࣍ • ΤϯδχΞϒϩάΛ࡞͖͔͚ͬͨͬ • VuePressͱ͸ʁ • Firebaseͱ͸ʁ • σϞ • ॴײʢVuePressͷϝϦοτɺσϝϦοτʣ • ·ͱΊ
4. ΤϯδχΞϒϩάΛ࡞͖͔͚ͬͨͬ • ݸਓతʹVuePressʹ৮ͬͯΈ͔ͨͬͨͨΊ • ࣾ಺ͰίʔϙϨʔταΠτΛվमதͰɺΤϯδχΞϒϩάΛ։ ઃ༧ఆͷͨΊɺαϯϓϧͰ࡞ͬͯΈΑ͏ͱࢥͬͨͨΊ
5. VuePressͱ͸ʁ • VueʹΑΔ੩తαΠτδΣωϨʔλ • Markdown ʹΑΔϖʔδͷ࡞੒͕ՄೳͰɺٕज़ܥυΩϡϝϯτ ͷ࡞੒ʹ࠷దԽ͞ΕͨςʔϚ͕σϑΥϧτͰ༻ҙ͞Ε͍ͯΔ • VueͰ࡞੒͞Ε͍ͯΔͨΊɺVueίϯϙʔωϯτʹΑͬͯϖʔδ ͷΧελϜ΋Մೳ
6. VuePressͷػೳ • σϑΥϧτςʔϚ
 ɾϨεϙϯγϒϨΠΞ΢τ
 ɾϔομʔͰͷهࣄݕࡧ
 ɾΧελϚΠζՄೳͳφϏόʔɺαΠυόʔ • Markdown ಺෦͔ΒVueίϯϙʔωϯτͷݺͼग़͕͠Մೳ • Progressive Web ApplicationʢPWAʣͷαϙʔτ
7. Firebaseͱ͸ʁ • Google ͕ఏڙ͍ͯ͠ΔϞόΠϧ͓Αͼ Web ΞϓϦέʔγϣϯ ͷόοΫΤϯυαʔϏεʢmBaaSʣ • ͢͹΍͘ߴ඼࣭ͷϞόΠϧΞϓϦΛ։ൃ͢Δ͜ͱ͕Ͱ͖Δϓϥο τϑΥʔϜͰɺ։ൃʹ໾ཱͭ൚༻తͳػೳ͕༻ҙ͞Ε͍ͯΔ • ೝূػೳ΍؆қతͳσʔλϕʔεʢNoSQLʣɺετϨʔδɺ ϗεςΟϯάͳͲ
8. ͜ΜͳΠϝʔδ
9. ࠓճ͸Firebase Hosting͚ͩΛ࢖ͬͯ·͢
10. Firebase Hostingͱ͸ʁ • 1 ͭͷίϚϯυͰ৽͍͠όʔδϣϯΛσϓϩΠ • Ξοϓϩʔυͨ͠ϑΝΠϧ͸CDNͰΩϟογϡ͞ΕΔ • ؅ཧը໘͔ΒϫϯΫϦοΫͰϩʔϧόοΫͰ͖Δ
11. σϞ
12. ॴײʢϝϦοτʣ • HTMLɺCSSΛ΄ͱΜͲॻ͔ͣʹ؆୯ͳυΩϡϝϯταΠτ͕ߏஙͰ͖ ͨ • 1هࣄ1ϚʔΫμ΢ϯͰϑΝΠϧ͕؅ཧ͞Ε͍ͯΔͷͰɺهࣄͷ௥Ճ΋؆ ୯ • Vueͷ஌ࣝ͑͋͞Ε͹ɺ؆୯ʹΧελϜ΋Ͱ͖Δ • ΦʔϓϯιʔεͷͨΊແྉ
13. ॴײʢσϝϦοτʣ • ࠷ॳ͔Β΄ͱΜͲελΠϧ͕ܾ·͍ͬͯΔͨΊɺେ෯ʹσβΠϯ Λมߋ͍ͨ͠৔߹ʹ͸ෆ޲͖ • هࣄΛϑΝΠϧͰ؅ཧ͍ͯ͠ΔͨΊɺ૿͑͗͢Δͱ؅ཧ͕େมʹ ͳΔ • هࣄΛߋ৽͢ΔͨͼʹGitʹίϛοτͨ͠Γɺαʔόʔʹσϓϩ Π͕ඞཁʹͳΔ
14. ·ͱΊ • VuePress͸σϑΥϧτͰϨεϙϯγϒʹରԠ͍ͯͯ͠ɺݕࡧػೳ ΋༻ҙ͞Ε͍ͯΔͨΊɺΧελϜ͠ͳͯ͘΋ͦΕͳΓͷWebϖʔ δΛ࡞੒͢Δ͜ͱ͕Ͱ͖Δ • ֶशίετ΋௿͘ɺݸਓͰ؆୯ͳυΩϡϝϯταΠτΛߏஙͨ͠ ͍ͱࢥ͍ͬͯΔํʹ͸Φεεϝ
15. Thank you!!!