Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Yes! ͦ͏Ͱ͋Δ΂͖ʂ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Ͱ͢ΑͶʔ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

app.js？ • NodeͰಈ͔͢ϓϩάϥϜͱͯ͠ࢦఆ͢ΔϑΝΠϧ • ߏ੒ཁ݅ • nuxtΛexpressͷϞδϡʔϧͱͯ͠ॳظԽ • ։ൃϞʔυͷͱ͖͸ϗοτϦϩʔυ༻ʹϦϏϧυ • expressʹϦΫΤετ͕དྷͨͱ͖
 Nuxt.jsͰϨϯμϦϯά • expressΛࢦఆϙʔτͰ଴ػͤ͞Δ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

備考:create-nuxt-app • Use a custom server framework? ʹ
 -> express ͱճ౴͢Δ • server/index.js Λࣗಈੜ੒ͯ͘͠ΕΔʂʂ • ಺༰͸ઌఔͷϑΝΠϧͱ֓Ͷಉ͡

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

改ざんしてレンダリング • Կ΋ߟ͑ͣʹ೴ےͰ String.replace() • String.replace(//,
 'ʢུʣ') • ஔ׵ͨ͠΋ͷΛ res.send() ͢Δ

Slide 30

Slide 30 text

// 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(//, ``) res.send(html) }); ௥Ճ͠·ͨ͠

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

ΊͰͨ͠ɹΊͰͨ͠

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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