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

Transcript

1. 1.

   Nuxt(SPA)でも OGPしたい Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ Roppongi.vue #1 2019/05/27

2. 2.

   Q. NuxtͰ ϖʔδݸผʹOGPΛ ઃఆ͍ͨ͠Ͱ͢

3. 3.

   SSR, UniversalϞʔυ headͰϝλλάઃఆ

4. 4.

   Yes! ͦ͏Ͱ͋Δ΂͖ʂ

5. 5.

   ͱ͜ΖͰ ͜͜ʹSPAϞʔυͷ ϓϩδΣΫτ͕͋Γ·͢

6. 6.

   ʮͳΜͰSPAϞʔυͳΜ͔͢ʁʯ ʮ࢓༷͔ͩΒɺܦҢ͸Θ͔ΒΜʯ ʮ͍͞Ͱʯ

7. 7.

   ΫϥΠΞϯτͷσΟϨ ʮOGPग़ͳ͍ΜͰ͔͢ʁʯ

8. 8.

   Ͱ͢ΑͶʔ

9. 9.

   ͙͵͵͵…… SPA͔ΒUniversalϞʔυ΁ͷ੾Γସ͑…… →fetchͰͷwindow objectૢ࡞͕શ໓ Ұ෦ઃܭ΍Γͳ͓͠ ݕূίετܹ૿……

10. 10.

    ΫϥΠΞϯτͷΤϯδχΞ ʮNuxtʹ౉͢લʹExpressͰ HTMLΛվ͟Μ͢Ε͹ ͍͚ΔͷͰ͸ʁʯ

11. 11.

    ΓɺΓͭ͘͸Θ͔Δ Θ͔Δ͕……

12. 12.

    Nuxt（SPA）でも OGPしたい 闇の魔術に対する防衛術

13. 13.

    自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ • ·΋ͳ͘ೖࣾ4ϲ݄ • ϑϩϯτΤϯδχΞɺνʔϜϦʔμʔɺPMʁ •

    Vue͸͍͍ͧʂ
14. 14.

    ʮ͍ͬͯ͏࿩ͳΜ͚ͩͲ͞ɺ Ͱ͖Δͱࢥ͏ʁʯ ʮͪΐͬͱௐ΂ͯΈ·͠ΐ͏͔ʯ

15. 15.

    ʮͰ͖ͦ͏ͳؾ͕͠·͢ʁʯ ʮϚδͰʁʯ

16. 16.

    方針：nuxt startしない プロジェクトを目指す • nuxt start͢Δͱαʔόʔ͕ىಈ͢Δ • վ͟Μͷ༨஍ͳ͠ • expressΛىಈ͢Δapp.js

    తͳ΋ͷΛͭ͘Δ • nuxt start ͷ୅ΘΓʹ node app.js ͢Δ
17. 17.

    app.js？ • NodeͰಈ͔͢ϓϩάϥϜͱͯ͠ࢦఆ͢ΔϑΝΠϧ • ߏ੒ཁ݅ • nuxtΛexpressͷϞδϡʔϧͱͯ͠ॳظԽ • ։ൃϞʔυͷͱ͖͸ϗοτϦϩʔυ༻ʹϦϏϧυ •

    expressʹϦΫΤετ͕དྷͨͱ͖
 Nuxt.jsͰϨϯμϦϯά • expressΛࢦఆϙʔτͰ଴ػͤ͞Δ
18. 18.

    ͳΔ΄Ͳ·ͬͨ͘Θ͔ΒΜ

19. 19.

    app.js • ࢀߟจݙ: nuxt.render()
 https://ja.nuxtjs.org/api/nuxt-render/ • جຊతͳܕͱ্ͯ͠هͷίʔυΛ
 ͦͷ··ར༻͠·͠ΐ͏

20. 20.

    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 + '`.') }
21. 21.

    ͦ͏͍͏΋ͷͩͱఘΊͯ͘Ε

22. 22.

    備考:create-nuxt-app • Use a custom server framework? ʹ
 -> express

    ͱճ౴͢Δ • server/index.js Λࣗಈੜ੒ͯ͘͠ΕΔʂʂ • ಺༰͸ઌఔͷϑΝΠϧͱ֓Ͷಉ͡
23. 23.

    HTMLを取得したい • HTMLͷऔಘʹ͸ nuxt.renderRoute() Λ࢖͏ • SPAϞʔυͰ͸࣮࣭ςϯϓϨʔτ͕औಘͰ͖Δ • ฦΓ஋ͷΦϒδΣΫτʹؚ·ΕΔ html

    ʹ
 ϨϯμϦϯά͠Α͏ͱͨ͠HTML͕ೖ͍ͬͯΔ
24. 24.

    ಛఆϧʔςΟϯάͷͱ͖ͷΈͷॲཧ • ϧʔςΟϯάͰॲཧΛ෼͚͍ͨˠapp.get() ͳͲΛ࢖͏ • express ͷgetϝιου • app.get(‘/detail’) ,

    app.get(‘/user/:userId’) ͳͲ
25. 25.

    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 + '`.') } େࣄͦ͏
26. 26.

    // 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) ௥Ճ͠·ͨ͠ ↑Ͱॲཧ͞Εͳ͚Ε͹ ɹͬͪ͜Ͱॲཧ͢Δ
27. 27.

    None
28. 28.

    axiosで必要なデータを引っ張る • ͜͜͸ීஈͱ͋·ΓมΘΒͳ͍ • axios.get() ͳΓͳΜͳΓ

29. 29.

    改ざんしてレンダリング • Կ΋ߟ͑ͣʹ೴ےͰ String.replace() • String.replace(/<meta data-hid=“og:title”.*?>/,
 'ʢུʣ') • ஔ׵ͨ͠΋ͷΛ

    res.send() ͢Δ
30. 30.

    // 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) }); ௥Ճ͠·ͨ͠
31. 31.

    None
32. 32.

    None
33. 33.

    ΊͰͨ͠ɹΊͰͨ͠

34. 34.

    メリット • Ҡߦʹൺ΂Ε͹ݕূίετ͕͍ܰ • طଘͷSPAͷॲཧΛݟ௚͞ͳͯ͘Α͍ • αʔόʔͰDOMͷܭࢉΛ͠ͳ͍ͰΑ͍ • expressΛىಈ͢Δඞཁ͸͋ΔͷͰɺ
 αʔόʔϦιʔεΛ৯Θͳ͍Θ͚Ͱ͸ͳ͍

35. 35.

    デメリット • UniversalϞʔυͰ͍͍ͳΒ
 UniversalϞʔυͷ΄͏͕Α͍ • Expressͷ஌͕ࣝଟগඞཁ • ΍Δ͜ͱ͕టष͍

36. 36.

    デメリット２ • ϖʔδίϯϙʔωϯτͷϧʔςΟϯάͱ
 վ͟ΜॲཧͷϧʔςΟϯά͕Ұக͠ͳ͍ • NuxtͷࣗಈϧʔςΟϯάͷԸܙΛड͚ΒΕͳ͍ • ̍ϖʔδͷॲཧ͕2Օॴʹ෼͔ΕΔ • ର৅ͷϖʔδ͕૿͑Δͱίʔυ͕΍ͨΒ௕͘ͳΔ

37. 37.

    ͍ͬͯ͏͔ UniversalϞʔυͰ͖ΔͳΒ ຊ౰ʹͦͷํ͕͍͍

38. 38.

    ཁ݅ʹ߹Θͤͯ SPAϞʔυͰ։ൃΛਐΊ͍͍ͯͷ͔ ࠓҰ౓ߟ͑Α͏

39. 39.

    SPAϞʔυ͡Ό OGP͸ग़ͳ͍ͧͬʂ