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

Nuxt(SPA)でもOGPしたい/want to render ogp with nuxt ...

Nuxt(SPA)でもOGPしたい/want to render ogp with nuxt spa mode

ここにSPAモードのプロッジェクトがあります。
OGP?はい、1個設定できますね。
ページごとに設定したい?いったいなにをいっているんだ。

果物リン

May 27, 2019
Tweet

More Decks by 果物リン

Other Decks in Technology

Transcript

  1. const { Nuxt, Builder } = require('nuxt') const app =

    require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') }
  2. 備考:create-nuxt-app • Use a custom server framework? ʹ
 -> express

    ͱճ౴͢Δ • server/index.js Λࣗಈੜ੒ͯ͘͠ΕΔʂʂ • ಺༰͸ઌఔͷϑΝΠϧͱ֓Ͷಉ͡
  3. const { Nuxt, Builder } = require('nuxt') const app =

    require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') } େࣄͦ͏
  4. // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd

    const nuxt = new Nuxt(config) // detailͰಛผॲཧ app.get(‘/detail', async (req, res) => { const result = await nuxt.renderRoute('/'); console.log(result.html) }) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) ௥Ճ͠·ͨ͠ ↑Ͱॲཧ͞Εͳ͚Ε͹ ɹͬͪ͜Ͱॲཧ͢Δ
  5. // detailͰಛผॲཧ app.get("/detail", async (req, res) => { const result

    = await nuxt.renderRoute("/"); let html = result.html; const meta = await axios.get("/someting-meta") html = html.replace(/<meta data-n-head="true" data-hid=“og:title".*?>/, `<meta title="og:title" content="${meta.title}">`) res.send(html) }); ௥Ճ͠·ͨ͠