Successfully reported this slideshow.

Nuxt.js + microCMS + netlify

0

Share

Upcoming SlideShare
Openresty
Openresty
Loading in …3
×
1 of 46
1 of 46

Nuxt.js + microCMS + netlify

0

Share

Download to read offline

Description

動的ページの基本的な作り方とmicroCMSに絡んだ話を中心に話します。

Transcript

  1. 1. Nuxt.js+microCMS+netlify tottoruby#38@watti
  2. 2. Ruby3.0.0Released 22
  3. 3. @watti Ruby on Rails AWS Electron Nuxt.js 33
  4. 4. @wattiの最近 某ベンチャー → 某ベンチャー Nuxt.jsあまり触らなくなるかも知れないので旬なうちに 寝落ちするかコード書くか勉強するか AWS試験勉強進まない 受かったら M1 Macbook Air買う 44
  5. 5. Nuxt.js+microCMS+netlify 55
  6. 6. https://ja.nuxtjs.org/ 66
  7. 7. Wikipediaより抜粋 Nuxt.jsは、Vue.js、Node.js、Webpack、Babel.jsに基づ く無料のオープンソースWebアプリケーションフレームワー クです。このフレームワークは、「ユニバーサルアプリケー ションのメタフレームワーク」として宣伝されています。 77
  8. 8. https://microcms.io/ 88
  9. 9. HeadlessCMS コンテンツをAPIで取得 任意の場所だけCMS化 99
  10. 10. microCMSAPIスキーマ 1010
  11. 11. microCMS管理画⾯ 1111
  12. 12. microCMSAPIResponse { "contents": [ { "id": "gsx9tvbo4", "createdAt": "2020-12-02T13:40:42.111Z", "updatedAt": "2020-12-03T13:15:12.067Z", "publishedAt": "2020-12-02T13:40:42.111Z", "revisedAt": "2020-12-03T13:15:12.067Z", "image": { "url": "https://images.microcms-assets.io/protected/..." }, ... }, ... ] } 1212
  13. 13. https://www.netlify.com/ 1313
  14. 14. 静的コンテンツのホスティングサービス 公開簡単 CDN、独⾃ドメイン、SSL対応 Nuxt.jsをSSGでexportしたものをデプロイ 1414
  15. 15. Nuxt.js+microCMS+netlify 実装の話 例) ニュース⼀覧・詳細ページをどう作るか 1515
  16. 16. NuxtPagesdirectry-URLpath ディレクトリ構造がそのままパスになる 動的ページは _id.vue を配置 pages/index.vue # / pages/news/index.vue # /news pages/news/_id.vue # /news/:id 1616
  17. 17. 動的にコンテンツを取得(詳細ページ) microCMSにアクセスしてnewsを取得 X-API-KEY で認証 (省略) <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} } } } </script> 1717
  18. 18. 動的ページにコンテンツを埋め込む titleは⽂字列 bodyはリッチテキスト(HTML)を想定 <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> 1818
  19. 19. pages/news/_id.vue <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} }} } </script> 1919
  20. 20. NuxtSSGRoutes Netlifyなので nuxt generate で静的コンテンツ⽣成 静的ページは⾃動で⽣成される 動的ページは nuxt.config.js の generate.routes に Array or Promise を返す関数 or callback 関数 export default { generate: { routes: ['/news/hoge', '/news/fuga', '/news/piyo'] } } 2020
  21. 21. NuxtSSG動的ページのID指定 microcmsのnews⼀覧からIDを取得してパスを⽣成する const url = 'https://watti.microcms.io/api/v1/news?fields=id' export default { generate: { routes() { axios.get(url).then(response => { return response.data.contents.map(c => `/news/${c.id}`) }) } } } 2121
  22. 22. 動的ページ表⽰遅い netlifyのエッジが遠い 画像のURLが microCMSアクセス後に わかる 2222
  23. 23. 動的ページの⽣成時にpayloadを渡す generate時にidを取るためmicroCMSにアクセスしてる generate時と実際のアクセス時とで⼆度API叩く事になる generate.routes で取得したコンテンツを渡す asyncDataで受け取れる 2323
  24. 24. generate.routesでpayloadを渡す 取得したコンテンツを payload に指定する パスは route に指定 routes() { axios.get(url).then(response => { return response.data.contents.map(c => { return { route: `/news/${c.id}`, payload: c } } }) } 2424
  25. 25. asyncDataでpayloadを受け取る nuxt dev で起動時は受け取れないので取りに⾏く asyncData({ $axios, params: { id }, payload }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } } 2525
  26. 26. 動的ページ取得早い? generatedで⽣成された payload.jsにデータ保持 体感的には普通に 2626
  27. 27. 静的ページのpayload対応 静的ページのroutesは⾃動⽣成 exclude した上で route と payload を指定する const url = 'https://watti.microcms.io/api/v1/news' export default { generate: { exclude: ['/news'], routes() { axios.get(url).then(response => { return { route: '/news', payload: response.data.contents } }) } } } 2727
  28. 28. microCMSのコンテンツ追加への⾃動追従 generateしたタイミングのコンテンツしか持たない microCMSのAPIの Webhook 設定で netlifyのデプロイをキックする 2828
  29. 29. プレビュー (下書きの表⽰) 2929
  30. 30. microCMSの 下書き取得 DRAFT_KEY を利⽤する コンテンツ毎に⾃動発⾏ パラメータに付与する draftKey=xxx 3030
  31. 31. 画⾯プレビュー⽤URL設定 https://xxx.netlify.app/news/{CONTENT_ID}?draftkey=?{DRAFT_KEY} {CONTENT_ID} {DRAFT_KEY} は⾃動で埋まる microCMSのコンテンツ画⾯から、 画⾯プレビューボタンを押すと上記URLに⾶ぶ 3131
  32. 32. microCMSの下書きと画⾯プレビュー ⾃サイトに DRAFT_KEY 付きでアクセス それを使ってmicroCMSのAPIを叩く asyncData({ params: { id }, payload, query: { draftKey } }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const options = {} if (draftKey) { options.params = { draftKey } } const { content } = await $axios.$get(url, options) return { news: content } } 3232
  33. 33. 画⾯プレビューの問題点 コンテンツ毎に DRAFT_KEY の値が違う ⼀覧等、複数コンテンツを読む場合 DRAFT_KEY 使えない 3333
  34. 34. GLOBAL_DRAFT_KEYを使ったプレビュー 全下書きコンテンツを⼀度に取得するための認証キー リクエストヘッダに X-GLOBAL-DRAFT-KEY を設定 Nuxt.js側で持っておいて、適宜使う 画⾯プレビューのURL設定からは渡せない netlifyのpreview環境のみ有効にする、とか 3434
  35. 35. 下書き全般の問題点 他のコンテンツを参照できる 下書き状態のものも設定できる が、参照先の下書きは取れない 3535
  36. 36. 未公開コンテンツの下書き問題 generate時に動的ページを⽣成しても通常下書きは含まない microCMSから下書きを表⽰しようとすると404 preview環境だけでも⾒たいなら ⼀覧ページから辿る仕組みを作る (htmlは作らない) preview環境だけ下書きの動的ページを⽣成する 404ページを利⽤する 3636
  37. 37. 未公開コンテンツの下書き更新問題 新ページの下書きが初めて作成された時だけフックしたい microCMSで コンテンツの下書き保存時 のwebhook 作成 or 更新の区別がない 下書き保存されるたびにビルドが⾛る Netlifyのビルド時間がどんどん削られる ビルドの⾼速化 cache: true は必須 コード変更ないので nuxt build がスキップされる 3737
  38. 38. ⼩ネタ 3838
  39. 39. microCMSCDNEdge 国内CDNを経由~としか書いてないので聞いた microCMSの管理画⾯のチャットから サポートチャットはエンジニア ブログ書いてる⼈だった CloudFront を利⽤しているらしい All Edge Locations 3939
  40. 40. microCMS外部サービス埋め込みにハマる URL指定で埋め込める https://www.youtube.com/watch?v=xxx APIレスポンスはHTMLなので v-html で埋め込む <script> タグが⼊っているので Vue.js側でエラー mounted / updated 時に置換して埋め込み・実⾏ 遅延表⽰もあるらしいので強制発⽕ https://the-fukui.com/blog/microcms-sugeeeeee/ 4040
  41. 41. microCMSプラン移⾏問題 プラン API数 Webhook数 料⾦ 旧Starter 無制限 10 ¥2,640~ Standard 10 (+¥2,000/個) 無制限 ¥4,900~ Webhook⾜りないからって安易に移⾏したら 云万円になるのでちゃんと⾃⼒で⾒積もりましょう 4141
  42. 42. まとめ 4242
  43. 43. microCMSの良いところ シンプルな管理画⾯ 馴染みのREST API CDNが All Edge Locations チャットの問い合わせがエンジニア直通 4343
  44. 44. microCMSの困ったところ 参照先が公開されてないとどうやっても取れない microCMS上のファイル管理UIがイマイチ 動画ファイルはサムネ出して欲しい、事故る 画像は画像だけで選べるがディレクトリ欲しい 外部サービス埋め込みどう使うのが正解? エンジニア向けのサービス感 (API Schemaとか) 4444
  45. 45. Nuxt+HeadlessCMS ページ構成の変更に弱い 画像メインで扱う分には良さそう 結局スタイル修正になることが多い 巨⼤・複雑なページは⼤変そう けど⾯⽩かった 4545
  46. 46. 良いお年を〜 4646

Description

動的ページの基本的な作り方とmicroCMSに絡んだ話を中心に話します。

Transcript

  1. 1. Nuxt.js+microCMS+netlify tottoruby#38@watti
  2. 2. Ruby3.0.0Released 22
  3. 3. @watti Ruby on Rails AWS Electron Nuxt.js 33
  4. 4. @wattiの最近 某ベンチャー → 某ベンチャー Nuxt.jsあまり触らなくなるかも知れないので旬なうちに 寝落ちするかコード書くか勉強するか AWS試験勉強進まない 受かったら M1 Macbook Air買う 44
  5. 5. Nuxt.js+microCMS+netlify 55
  6. 6. https://ja.nuxtjs.org/ 66
  7. 7. Wikipediaより抜粋 Nuxt.jsは、Vue.js、Node.js、Webpack、Babel.jsに基づ く無料のオープンソースWebアプリケーションフレームワー クです。このフレームワークは、「ユニバーサルアプリケー ションのメタフレームワーク」として宣伝されています。 77
  8. 8. https://microcms.io/ 88
  9. 9. HeadlessCMS コンテンツをAPIで取得 任意の場所だけCMS化 99
  10. 10. microCMSAPIスキーマ 1010
  11. 11. microCMS管理画⾯ 1111
  12. 12. microCMSAPIResponse { "contents": [ { "id": "gsx9tvbo4", "createdAt": "2020-12-02T13:40:42.111Z", "updatedAt": "2020-12-03T13:15:12.067Z", "publishedAt": "2020-12-02T13:40:42.111Z", "revisedAt": "2020-12-03T13:15:12.067Z", "image": { "url": "https://images.microcms-assets.io/protected/..." }, ... }, ... ] } 1212
  13. 13. https://www.netlify.com/ 1313
  14. 14. 静的コンテンツのホスティングサービス 公開簡単 CDN、独⾃ドメイン、SSL対応 Nuxt.jsをSSGでexportしたものをデプロイ 1414
  15. 15. Nuxt.js+microCMS+netlify 実装の話 例) ニュース⼀覧・詳細ページをどう作るか 1515
  16. 16. NuxtPagesdirectry-URLpath ディレクトリ構造がそのままパスになる 動的ページは _id.vue を配置 pages/index.vue # / pages/news/index.vue # /news pages/news/_id.vue # /news/:id 1616
  17. 17. 動的にコンテンツを取得(詳細ページ) microCMSにアクセスしてnewsを取得 X-API-KEY で認証 (省略) <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} } } } </script> 1717
  18. 18. 動的ページにコンテンツを埋め込む titleは⽂字列 bodyはリッチテキスト(HTML)を想定 <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> 1818
  19. 19. pages/news/_id.vue <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} }} } </script> 1919
  20. 20. NuxtSSGRoutes Netlifyなので nuxt generate で静的コンテンツ⽣成 静的ページは⾃動で⽣成される 動的ページは nuxt.config.js の generate.routes に Array or Promise を返す関数 or callback 関数 export default { generate: { routes: ['/news/hoge', '/news/fuga', '/news/piyo'] } } 2020
  21. 21. NuxtSSG動的ページのID指定 microcmsのnews⼀覧からIDを取得してパスを⽣成する const url = 'https://watti.microcms.io/api/v1/news?fields=id' export default { generate: { routes() { axios.get(url).then(response => { return response.data.contents.map(c => `/news/${c.id}`) }) } } } 2121
  22. 22. 動的ページ表⽰遅い netlifyのエッジが遠い 画像のURLが microCMSアクセス後に わかる 2222
  23. 23. 動的ページの⽣成時にpayloadを渡す generate時にidを取るためmicroCMSにアクセスしてる generate時と実際のアクセス時とで⼆度API叩く事になる generate.routes で取得したコンテンツを渡す asyncDataで受け取れる 2323
  24. 24. generate.routesでpayloadを渡す 取得したコンテンツを payload に指定する パスは route に指定 routes() { axios.get(url).then(response => { return response.data.contents.map(c => { return { route: `/news/${c.id}`, payload: c } } }) } 2424
  25. 25. asyncDataでpayloadを受け取る nuxt dev で起動時は受け取れないので取りに⾏く asyncData({ $axios, params: { id }, payload }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } } 2525
  26. 26. 動的ページ取得早い? generatedで⽣成された payload.jsにデータ保持 体感的には普通に 2626
  27. 27. 静的ページのpayload対応 静的ページのroutesは⾃動⽣成 exclude した上で route と payload を指定する const url = 'https://watti.microcms.io/api/v1/news' export default { generate: { exclude: ['/news'], routes() { axios.get(url).then(response => { return { route: '/news', payload: response.data.contents } }) } } } 2727
  28. 28. microCMSのコンテンツ追加への⾃動追従 generateしたタイミングのコンテンツしか持たない microCMSのAPIの Webhook 設定で netlifyのデプロイをキックする 2828
  29. 29. プレビュー (下書きの表⽰) 2929
  30. 30. microCMSの 下書き取得 DRAFT_KEY を利⽤する コンテンツ毎に⾃動発⾏ パラメータに付与する draftKey=xxx 3030
  31. 31. 画⾯プレビュー⽤URL設定 https://xxx.netlify.app/news/{CONTENT_ID}?draftkey=?{DRAFT_KEY} {CONTENT_ID} {DRAFT_KEY} は⾃動で埋まる microCMSのコンテンツ画⾯から、 画⾯プレビューボタンを押すと上記URLに⾶ぶ 3131
  32. 32. microCMSの下書きと画⾯プレビュー ⾃サイトに DRAFT_KEY 付きでアクセス それを使ってmicroCMSのAPIを叩く asyncData({ params: { id }, payload, query: { draftKey } }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const options = {} if (draftKey) { options.params = { draftKey } } const { content } = await $axios.$get(url, options) return { news: content } } 3232
  33. 33. 画⾯プレビューの問題点 コンテンツ毎に DRAFT_KEY の値が違う ⼀覧等、複数コンテンツを読む場合 DRAFT_KEY 使えない 3333
  34. 34. GLOBAL_DRAFT_KEYを使ったプレビュー 全下書きコンテンツを⼀度に取得するための認証キー リクエストヘッダに X-GLOBAL-DRAFT-KEY を設定 Nuxt.js側で持っておいて、適宜使う 画⾯プレビューのURL設定からは渡せない netlifyのpreview環境のみ有効にする、とか 3434
  35. 35. 下書き全般の問題点 他のコンテンツを参照できる 下書き状態のものも設定できる が、参照先の下書きは取れない 3535
  36. 36. 未公開コンテンツの下書き問題 generate時に動的ページを⽣成しても通常下書きは含まない microCMSから下書きを表⽰しようとすると404 preview環境だけでも⾒たいなら ⼀覧ページから辿る仕組みを作る (htmlは作らない) preview環境だけ下書きの動的ページを⽣成する 404ページを利⽤する 3636
  37. 37. 未公開コンテンツの下書き更新問題 新ページの下書きが初めて作成された時だけフックしたい microCMSで コンテンツの下書き保存時 のwebhook 作成 or 更新の区別がない 下書き保存されるたびにビルドが⾛る Netlifyのビルド時間がどんどん削られる ビルドの⾼速化 cache: true は必須 コード変更ないので nuxt build がスキップされる 3737
  38. 38. ⼩ネタ 3838
  39. 39. microCMSCDNEdge 国内CDNを経由~としか書いてないので聞いた microCMSの管理画⾯のチャットから サポートチャットはエンジニア ブログ書いてる⼈だった CloudFront を利⽤しているらしい All Edge Locations 3939
  40. 40. microCMS外部サービス埋め込みにハマる URL指定で埋め込める https://www.youtube.com/watch?v=xxx APIレスポンスはHTMLなので v-html で埋め込む <script> タグが⼊っているので Vue.js側でエラー mounted / updated 時に置換して埋め込み・実⾏ 遅延表⽰もあるらしいので強制発⽕ https://the-fukui.com/blog/microcms-sugeeeeee/ 4040
  41. 41. microCMSプラン移⾏問題 プラン API数 Webhook数 料⾦ 旧Starter 無制限 10 ¥2,640~ Standard 10 (+¥2,000/個) 無制限 ¥4,900~ Webhook⾜りないからって安易に移⾏したら 云万円になるのでちゃんと⾃⼒で⾒積もりましょう 4141
  42. 42. まとめ 4242
  43. 43. microCMSの良いところ シンプルな管理画⾯ 馴染みのREST API CDNが All Edge Locations チャットの問い合わせがエンジニア直通 4343
  44. 44. microCMSの困ったところ 参照先が公開されてないとどうやっても取れない microCMS上のファイル管理UIがイマイチ 動画ファイルはサムネ出して欲しい、事故る 画像は画像だけで選べるがディレクトリ欲しい 外部サービス埋め込みどう使うのが正解? エンジニア向けのサービス感 (API Schemaとか) 4444
  45. 45. Nuxt+HeadlessCMS ページ構成の変更に弱い 画像メインで扱う分には良さそう 結局スタイル修正になることが多い 巨⼤・複雑なページは⼤変そう けど⾯⽩かった 4545
  46. 46. 良いお年を〜 4646

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×