microCMS をさわってみる その6

日本製のHeadless CMS、microCMSをさわってみる。その6

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

generate設定

Gitにプッシュした際に、APIから記事一覧情報取得して詳細ページを生成する必要があるので nuxt.config.js に設定を書く。
参考： Nuxt.jsとmicroCMSで採用ページを作成してみよう！

nuxt.config.js に追記

// generate時にaxiosを使って詳細ページを生成
const axios = require('axios')

export default {
  // ...
  // Netlifyへ詳細ページの自動デプロイ
  generate: {
    routes() {
      const demo = axios
        .get('https://jtk.microcms.io/api/v1/demo', {
          headers: { 'X-API-KEY': process.env.API_KEY }
        })
        .then(res => {
          return res.data.contents.map(post => {
            return '/posts/' + post.id
          })
        })
      return Promise.all([demo]).then(values => {
        return values.join().split(',')
      })
    }
  }
}

環境変数はビルド実行されるNetlify側へ設定する必要があります。
Settings => Build & deploy => Environment

これで設定完了。
設定した nuxt.config.js をmasterにプッシュして動作確認してみます。

Netlifyのサイト管理画面 => Deploys で Building が1分以内には始まるのでクリック

Deploy log に

2:12:03 PM: ✔ Generated /posts/demo02
2:12:03 PM: ✔ Generated /posts/demo01
2:12:03 PM: ✔ Generated /posts/9itQJnwUs

があるので詳細ページの生成はうまくいっているよう。

最後の Finished processing build request in XXXs を確認したらサイトをみにいく。
一覧ページのリンクをクリックして各詳細ページのコンテンツが描画されていれば成功。

残りやること

• webhook設定（microCMSを更新したら自動ビルドが走るようにする）
• かるくスタイリングする