7VFKTೖ໳ϲ݄Ͱ ࣗ࡞ͷٕज़ϒϩάΛϦϦʔεͨ͠࿩ :VNFNJWVF ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

"CPVU.F w ʹ͜͠Γ͞ͿΖʙ w ౦ژ౎ɾҏ౾େౡग़਎ w גࣜձࣾ#FBS5BJM w "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ w 8FCΤϯδχΞ 3BJMT3FBDU w 7VFྺ໿ϲ݄

"HFOEB w ࡞ͬͨϞϊ঺հ w ࣮૷ղઆ w σΟϨΫτϦߏ੒ w 7VFKT4FSWFS4JEF3FOEFSJOHͷղઆ w ·ͱΊɺࠓޙͷల๬

࡞ͬͨϞϊ w ԣਢլୈ؅۠৘ใہ w 7VFKT8FCQBDL w WVFSPVUFSΛ࢖ͬͨ41" w 4&0ରࡦͱͯ͠443 w WVFTFSWFSSFOEFSFS w &YQSFTTKT ϦϯΫTVCSPIOFU (JUIVCTVCSPIUFDICMPH

ߏ੒ਤ

-JHIUIPVTFͷϨϙʔτ ͜͜·Ͱߴ଎Խ͢Δͷͳ͔ͳ͔େมͩͬͨʜ ʋТA ˞8FCQBDLͱͷ֨ಆͷ࿩ʹͳΔͷͰׂѪ

࣮૷ղઆ σΟϨΫτϦߏ੒ w "UPNJD%FTJHOͬΆ͍ߏ੒ BUPNTNPMFDVMFT w υϝΠϯʹґଘ͠ͳ͍$PNQPOFOU w ྫ0VUMJOFE#VUUPOɺ4IBSF#VUUPO QBHFT w 63-ͱରͷରԠ͕औΕΔը໘ PSHBOJTNTUFNQMBUFT w ͦΕҎ֎ ࠶ར༻ੑͦ͜·Ͱߴ͘ͳ͍$PNQPOFOU

7VFKTྑ͔ͬͨͱ͜Ζ ςϯϓϨʔτߏจ࠷ߴʂ w )5.-ɾ$44ɾ+BWBTDSJQU͕ϑΝΠϧʹ·ͱ·ΔˠಡΈ΍͍͢ʂ w 3FBDUͰ΋Ͱ͖Δ͕ɺTUZMFEDPNQPOFOUͷಋೖඞਢ w "UPNJD%FTJHOʹԊͬͨ͜ͱͰɺελΠϧͷ؅ཧ͕ΑΓָʹʂ w λάͰͭͷཁૉ͕͖ͬͪΓ෼ׂ͞ΕΔ w 3FBDUͰ͋Γ͕ͪͳʮ)5.-ͷதʹෳࡶͳ+BWBTDSJQU͕ࠞೖͯ͠ർฐʯ ͢Δ͜ͱ͕গͳ͍ʂ ϑϩϯτΤϯυͷ։ൃ͸αΫαΫʂɹ൒݄΄ͲͰ6*͸΄΅׬੒ʂ

ҙؾ༲ʑͱϦϦʔεʜ͔͠͠ʜ w ʮγΣΞͨ࣌͠ʹهࣄλΠτϧ͕൓ө͞ΕΜͷ͕ͩʜ ɾТɾʆ ʯ ॳճϦϦʔε࣌ͷ ͸ͯϒը໘ ͜͏ͳͬͯཉ͍͠

ݪҼௐࠪ w NFUBλάͷߋ৽ॲཧ w "QQWVFͷNPVOUFE ͱ SPVUFΦϒδΣΫτͷߋ৽ͰൃՐ w ௚઀هࣄϖʔδʹΞΫηεͨ͠৔߹ɺ λάߋ৽લͷ)5.-͕ಡ·Εͯ͠·͏ ˠॳظঢ়ଶͷNFUBλά͕γΣΞ࣌ʹ൓өʂ export default { ... mounted() { updateConfig(this.$route); insertMetaTags(this.$route); }, watch: { '$route': function (to, from) { updateConfig(to); insertMetaTags(to); } } } 41"։ൃͷৗࣝͰ͸ʁ ΅͘ɺ"OESPJEΤϯδχΞ΍͠ʜ

ରࡦ w WVFTFSWFSSFOEFSFSΛ࢖ͬͨ4FSWFS4JEF3FOEFSJOH w ެࣜΨΠυIUUQTTTSWVFKTPSH w ରԠखॱ w 7VFΠϯελϯεͷॳظԽΛؔ਺Խ w ΫϥΠΞϯτ༻αʔόʔ༻ͷΤϯτϦϑΝΠϧΛ࡞੒ w αʔόʔ༻ͷόϯυϧ+40/ͷੜ੒ w &YQSFTTKTWVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷

ରԠखॱ w 7VFΠϯελϯεͷॳظԽΛؔ਺Խ export const createApp = () => { const router = createRouter(); const app = new Vue({ router, render: h => h(App), }); return { app, router }; }; new Vue({ router, el: '#app', components: { App }, template: '', }); CFGPSF BGUFS

ରԠखॱ w ΫϥΠΞϯτ༻αʔόʔ༻ͷΤϯτϦϑΝΠϧΛ࡞੒ FOUSZDMJFOUKT FOUSZTFSWFSKT const { app, router } = createApp(); router.onReady(() => { app.$mount('#app'); }); export default (context) => { return new Promise((resolve, reject) => { const { app, router } = createApp(); router.push(context.url); router.onReady(() => { resolve(app); }); }); }; ˞8FCQBDLͷFOUSZʹࢦఆ͢ΔϑΝΠϧ

ରԠखॱ w αʔόʔ༻ͷόϯυϧ+40/ͷੜ੒ w 7VF4434FSWFS1MVHJOΛ௥Ճ w ZBSOSVOXFCQBDL࣮ߦ w TFWFSCVOEMFKTPO͕ੜ੒ module.exports = merge(common, { ... plugins: [ ... new VueSSRServerPlugin({ filename: 'server-bundle.json', }), ], }); XFCQBDLTFSWFSKT

ରԠखॱ w &YQSFTTKTWVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, { template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080'));

ରԠखॱ w &YQSFTTKTWVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, { template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); લͷखॱͰੜ੒ͨ͠+40/

ରԠखॱ w &YQSFTTKTWVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, { template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); NFUBλάੜ੒ؔ਺

ରԠखॱ w &YQSFTTKTWVFTFSWFSSFOEFSFSͰOPEFKTαʔόʔΛ࣮૷ TFSWFSKT const renderer = createBundleRenderer(serverBundle, { template }); const app = express(); app.get('*', (req, res) => { const context = { ...metatags(req.path, req.query), url: req.url }; renderer.renderToString(context, (error, html) => { res.end(html); }); }); app.listen(port, () => console.log('Server start: 8080')); DPOUFYUͱόϯυϧ+40/͔Β ΠΠײ͡ʹ)5.-ੜ੒ͯ͘͠ΕΔؔ਺

443ରԠޙ w ࠷ॳͷ)5.-ͷϩʔυͰNFUBλά͕൓ө͞Εͨʂ

ޙ೔ஊ w /VYUKTͱ͍͏ͷ͕͋ΔΒ͍͠Ͱ͢Ͷʁʁʁ w OVYUCVJMEOVYUTUBSUͰ443ϞʔυͰOPEFαʔόʔىಈʂਆͰ͸ʁ w /VYUKTͷίʔυɺࣗ෼͕ॻ͍ͨϞϊͱ΄΅ಉ͜͡ͱ͍ͯͨ͠ w BTZOD%BUBؔ਺ϖʔδίϯϙʔωϯτͷϩʔυલʹݺ͹ΕΔʂਆͰ͸ʁ ݁࿦7VFKTͰͷ443͸େਓ͘͠/VYUKT࢖͏΂͖

·ͱΊ w 7VFKTΛ࢖ٕͬͯज़ϒϩάΛࣗ࡞ͨ͠ w 8FCΞϓϦ։ൃͷϊ΢ϋ΢ෆ଍͕ݪҼͰԕճΓͯ͠͠·ͬͨ w 7VFKTͰͷ443ͷ࢓૊ΈΛਂΊʹ௥͏͜ͱ͕Ͱ͖ͨ w 6*ͷ࣮૷ͰຆͲ٧·Δ͜ͱ͕ͳ͔ͬͨɺςϯϓϨʔτߏจ࠷ߴʂ w ࠓޙͷల๬ w /VYUKT৮ͬͯΈΔˠҠߦ໰୊ͳͦ͞͏ͳΒҠߦ͢Δ ٕज़ϒϩάͷ%*:ɺແݶʹ஌ݟͨ·ΔͷͰΦεεϝʂ