More than 5 years have passed since last update.

ジーズアカデミーAdvent Calendar 2018

@kmifa

Nuxt.jsとcontentfulでブログを作成する

Posted at 2018-12-14

はじめに

Nuxt.jsとcontentfulを使ってブログを構築してみます。

環境

node v10.12.0
vue-cli 3.1.1

今回使うもの

Nuxt.js
contentful

contentfulって？

2011年にベルリンのスタートアップが作ったAPIベースのCMSです。
結構前ですが、1300万ドルを調達しています。
ベルリンの「Contentful」が1300万ドルを調達、最先端のプラットフォーム向けCMSの拡大目指す

手順

実際にやっていきましょー

Integrate Contentful with Nuxt.js

1. Nuxt.jsをインストール

先ずはvue-cliをインストール

$ npm install -g vue-cli

次にNuxt.jsでプロジェクトを作成。今回はmy-blogというプロジェクト名にします。

$ vue init nuxt/starter my-blog

もし上記のコマンドを叩いて

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.

がでたら、vue-cliをglobalにインストールして、プロジェクトを作成してください。

// globalにインストール
$ npm install -g @vue/cli-init

// プロジェクトを作成
$ vue init nuxt/starter my-blog

プロジェクトを作成するときに色々聞かれますが、全部Enterを押してもらって大丈夫です。

? Project name
? Project description
? Autthor

これでプロジェクトが作成されました。
早速起動してみましょう。

// 作成されたプロジェクトに移動
$ cd my-blog
// npmかyarn好きな方でインストール
$ npm install # Or yarn
// 起動
$ npm run dev

下記の3つのコマンドを叩けばlocalhost:3000でアクセスできるようになります。

アクセスすると下記の画面がでるかと思います。

2. contentfulの設定

contentfulのアカウントを作成しましょう。
下記のページからアカウントを作成してください。

contentful Signup

Companyは適当でも大丈夫です。
Choose your development platformはjavascriptを選択します。

ログインすると下記の画面になります。　　

それでは「space」を作成します。
「space」はプロジェクトごとに割り当てる領域のことです。
無料枠だと2つまで作成することができます。

左上のロゴをクリックすると下記の画面になります。
Add Spaceでspaceを追加します。

Freeを選択します。

spaceの名前を決めます。
あと、ラジオボタンがあるのですがcreate an empty spaceを選択してください。

最後は確認なのでボタンを押して完了です。

ここまでで一旦contenfulの設定は完了です。

3.contentful CLIでseedデータの作成

contentfulはcliが用意されています。

先ずはcontentful-cliをインストール

$ npm i -g contentful-cli

次にcontentfulにログインします。
cliを使うには、contentful login経由でオーサライズする必要があります。

$ contentful login
// 質問されるのでEnterを押す。
? Open a browser window now? (Y/n)
// するとブラウザが開くのでAuthorizeをクリックして
// access tokenをコピーする

// さっきコピーしたaccess tokenを貼ってEnterを押す
? Paste your token here:

無事ログインできました。

次にseed(テストデータ)を流します。

$ contentful space use

上記のコマンドを叩くとPlease select a spaceとでるので
先程自分で作成したspaceを選択してください。

そして下記コマンドを実行

$ contentful space seed --template blog

? Do you want to apply the changes to your Space now?と聞かれるのでEnterを押します。

そうするとseedデータが先程選択したspaceにimportされます。

seedデータを確認するためにブラウザからcontentfulにアクセスします。

メニューからContent modelを選択します。

seedデータがちゃんとimportされていますね。

4. Nuxt.jsとcontentfulの紐付け

contentfulをインストール

$ npm install --save contentful

初めに作ったNuxtプロジェクトを開いて./plugins配下にcontentful.jsを作成します。

// ./plugins/contentful.js

const contentful = require('contentful')
// use default environment config for convenience
// these will be set via `env` property in nuxt.config.js
const config = {
  space: process.env.CTF_SPACE_ID,
  accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}

// export `createClient` to use it in page components
module.exports = {
  createClient () {
    return contentful.createClient(config)
  }
}

次に.contentful.jsonをプロジェクト配下に作成して、下記を記述します。

{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_ACCESS_TOKEN"
}

各IDの場所

初めてcontentfulを触る時、各IDがどこにあるのか迷うと思うので簡単にまとめました。

spaceIDはメニューのSettingsからGeneral settingsを選んでください。
そうするとspaceIDが表示されます。
"CTF_CDA_ACCESS_TOKEN"はSettingsからAPI keysを開きます。Example Key 1をクリックしてContent Delivery API - access tokenがあります。これがAccess tokenになります。

contentful.jsonを作成したらnuxt.config.jsに下記を追記します。

// 追加 
const config = require('./.contentful.json')

module.exports = { 
  /*
  ** Headers of the page
  */
  head: {
    title: 'my-blog',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  // ここから 
  env: {
    CTF_SPACE_ID: config.CTF_SPACE_ID,
    CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,
    CTF_PERSON_ID: config.CTF_PERSON_ID,
    CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
  }
  // ここまで追加
}

次は./pages/index.vueを修正します。
index.vueに書かれているものは全部削除して下記をコピペしてください。

<template>
  <div>
    <!-- render data of the person -->
    <h1>{{ person.fields.name }}</h1>
    <!-- render blog posts -->
    <ul>
      <li v-for="post in posts" :key="post.fields.title">
        {{ post.fields.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  import {createClient} from '~/plugins/contentful.js'

  const client = createClient()

  export default {
    // `env` is available in the context object
    asyncData ({env}) {
      return Promise.all([
        // fetch the owner of the blog
        client.getEntries({
          'sys.id': env.CTF_PERSON_ID
        }),
        // fetch all blog posts sorted by creation date
        client.getEntries({
          'content_type': env.CTF_BLOG_POST_TYPE_ID,
          order: '-sys.createdAt'
        })
      ]).then(([entries, posts]) => {
        // return data that should be available
        // in the template
        return {
          person: entries.items[0],
          posts: posts.items
        }
      }).catch(console.error)
    }
  }
</script>