特別なスタイルを当てなければブログの開発にたった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 ですが..🤔 設定し無くても普通に動作するので気にしない。