Download as PDF, PPTX
![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](https://image.slidesharecdn.com/slide-201225170824/85/Nuxt-js-microCMS-netlify-12-320.jpg)
![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](https://image.slidesharecdn.com/slide-201225170824/85/Nuxt-js-microCMS-netlify-20-320.jpg)
![静的ページの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](https://image.slidesharecdn.com/slide-201225170824/85/Nuxt-js-microCMS-netlify-27-320.jpg)
Nuxt.js + microCMS + netlify
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 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.
- 14.
- 15.
- 16. NuxtPagesdirectry-URLpath ディレクトリ構造がそのままパスになる 動的ページは _id.vue を配置 pages/index.vue# / pages/news/index.vue # /news pages/news/_id.vue # /news/:id 1616
- 17. 動的にコンテンツを取得(詳細ページ) microCMSにアクセスしてnewsを取得 X-API-KEY で認証 (省略) <script> exportdefault { 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. 動的ページにコンテンツを埋め込む titleは⽂字列 bodyはリッチテキスト(HTML)を想定 <template> <div class="news"> <h1>{{ news.title}}</h1> <div class="contents" v-html="news.body"> </div> </template> 1818
- 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. 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. 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.
- 23.
- 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. 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.
- 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.
- 29.
- 30.
- 31.
- 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. 画⾯プレビューの問題点 コンテンツ毎に DRAFT_KEY の値が違う ⼀覧等、複数コンテンツを読む場合DRAFT_KEY 使えない 3333
- 34.
- 35.
- 36.
- 37. 未公開コンテンツの下書き更新問題 新ページの下書きが初めて作成された時だけフックしたい microCMSで コンテンツの下書き保存時 のwebhook 作成or 更新の区別がない 下書き保存されるたびにビルドが⾛る Netlifyのビルド時間がどんどん削られる ビルドの⾼速化 cache: true は必須 コード変更ないので nuxt build がスキップされる 3737
- 38.
- 39.
- 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. microCMSプラン移⾏問題 プラン API数 Webhook数料⾦ 旧Starter 無制限 10 ¥2,640~ Standard 10 (+¥2,000/個) 無制限 ¥4,900~ Webhook⾜りないからって安易に移⾏したら 云万円になるのでちゃんと⾃⼒で⾒積もりましょう 4141
- 42.
- 43. microCMSの良いところ シンプルな管理画⾯ 馴染みのREST API CDNが AllEdge Locations チャットの問い合わせがエンジニア直通 4343
- 44.
- 45.
- 46.