[microCMS] Nuxt.jsとNetlifyでプレビューページを実装する

Nuxt.js v2.14.0から新しくtarget: staticが追加され、SSGがより捗るようになりました。

Preview Modeが追加されたということで、ぜひ使ってみたい！と思ったのですが、現状では情報が少なかったので備忘録的に書き記しておきます。
現状、よくわかっていない部分がありますので、適宜更新します。

参考は公式ドキュメントのこちら。
Preview Mode – NuxtJS

ライブプレビュー用にプラグインを追加する

// plugins/preview.client.js
export default function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

// nuxt.config.js
export default {
  plugins: ['plugins/preview.client.js']
}

この辺りは正直理解していないです。。
XX.client.jsを拡張子にすると、nuxt.config.jsで特に指定しなくてもクライアント側のみで実行されるのを初めて知りました。

プレビューページ

page/preview.vueファイルは、本番と同じ構成で作成します。(割愛)
/preview&slug=XXX&draftKey=XXX&preview=true
URLはアクセスできるようにしています。
(draftKeyはmicroCMSを使用していたので、APIのアクセスに使用します)

// page/preview.vue
validate({ params, query }) {
  if (query.preview) {
    return true
    }
}

preview=trueでアクセスしなければ404になるようにvalidateを指定してます。
インデックスされたくないページなので、headにnoindexも忘れずに指定します。

// page/preview.vue
head() {
    return {
        meta: [
            { hid: 'robots', name: 'robots', content: 'noindex' }

        ]
    }
}

microCMSへAPI経由でアクセスする

process.envにAPIKEYを置くと、コード中にKEYが残ってしまってよくないとのこと。

privateRuntimeConfigでKEYを設定すると、サーバーサイドでのみ使用でき、クライアントからは隠蔽できます。
詳しくはmicroCMS公式ブログに記載があります。
NuxtのJamstack構成におけるAPIキーの隠蔽方法について

privateRuntimeConfigではサーバーサイドでしかKEYにアクセスできませんが、プレビューを表示するには、クライアントからAPIを叩く必要があります。
Netlify functionsにmicroCMSにアクセスするAPIを作成し、preview.vueからAPIを経由することにします。

参考にした記事はこちらです。
無料で簡単にNetlify Functionsの始め方｜shimakaze_soft｜note

手順としては以下になります。

• netlify-lambdaインストール
• netlify.tomlとpackage.jsonに設定を追記
• functions/ディレクトリにAPIを作成

netlify-lambdaインストール

yarn add netlify-lambda

netlify.tomlに設定追記

// netlify.toml
[build]
  command = "npm run generate"
  functions = "api" // 追記
  publish = "dist"

functions=“api”は、functionsフォルダを指定するとエラーになります。
どうやら、functionsフォルダから指定のフォルダへ吐き出すので違うディレクトリ名を指定する必要がありました。

package.jsonに追記

// package.json
  "scripts": {
    "dev": "nuxt-ts & netlify-lambda serve functions/",
    "build": "nuxt-ts build && nuxt export && netlify-lambda build functions/",
    "serve": "netlify-lambda serve functions/",
    }

package.jsonにnetlify-lambdaのスクリプトを追記します。

functions/にAPIを作成

// functions/getContents.js
const axios = require('axios')
const microcmsUrl = 'XXX'

exports.handler = async function (event, _context, callback) {
  const slug = event.queryStringParameters.slug
  const draftKey = event.queryStringParameters.draftKey

  const query = draftKey
    ? `${microcmsUrl}contents/${slug}?draftKey=${draftKey}`
    : `${microcmsUrl}contents/${slug}`

  const { data } = await axios.get(query, {
    headers: { 'X-API-KEY': process.env.MICROCMS_APIKEY },
  })

  callback(null, {
    statusCode: 200,
    body: JSON.stringify(data),
  })
}

/.netlify/functions/getContentsでアクセスできます。
preview.vueのAPIアクセスをこちらのURLに差し替えておしまいです。

その他は特に設定必要なく、Netlifyの通常のデプロイ手順でfunctionsもデプロイされました。
とても簡単にAPIが作れて良い体験でした。