さくっと２日で完成しました！

特別なスタイルを当てなければブログの開発にたった1日。インフラの構築もたった1日、テスト環境では Netlifyを、本番環境では AWS Fargate を採用しました。インフラ周りについては後日記したく思います。

モデルの作成

Contentfulの管理画面より事前の登録が済んでいることを確認してください。予め登録でき次第、スペース Nuxt blog、テンプレートに blog、またフロントエンド (Nuxt.js) からContentfulの入るデータにアクセスするのに必要なトークンを設定してください。

# スペース
contentful space create --name 'Nuxt blog'

# テンプレート
contentful space seed --template blog

# アクセストークン
contentful space accesstoken create --name nuxt-blog

今回当ブログでは以下モデルを準備、各モデル全て必須 (required) 項目にしました。各フィールド以下のように丁寧に作るだけ。

画像投稿するなら、

Hero Image で設定しているが、Contentfulでは非常に容易に設定できる。

バリデーションを設定するなら、

tags や category で設定しているが、こちらも容易に設定できる。

エンドポイントを使うために、

一通り .contentful.json に設定を記述するが、Nuxtでは .env を新たに作って、 process.envでアクセスできるようにします。

module.exports = {
    env: {
        CTF_PERSON_ID: CONTENTFUL_CONFIG.CTF_PERSON_ID,
        CTF_BLOG_POST_TYPE_ID: CONTENTFUL_CONFIG.CTF_BLOG_POST_TYPE_ID,
        CTF_SPACE_ID: CONTENTFUL_CONFIG.CTF_SPACE_ID,
        CTF_CDA_ACCESS_TOKEN: CONTENTFUL_CONFIG.CTF_CDA_ACCESS_TOKEN,
    }
}

createClient()でインスタンスを作成することでブログを取得できるようになりました。

client
    .getEntries(contentfulOptions)
    .then(entries => {
      // console.log(entries)
    })
    .catch(console.error)

CTF_PERSON_ID ですが..🤔 設定し無くても普通に動作するので気にしない。