現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. フロントエンド
  2. 417 view

Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る

最終更新日:2019/12/28


どうもぞえです。
ポータルサイトを作ろうと思っていたところ、ポータルサイトを作るのであればheadlessCMSとNuxtがおすすめだよ。
と言われて気になったので、紹介しながら実装していこうと思います。

ContentfulをNuxt.jsと統合して実際にデータを表示するまでの手順もおまけに書いていくので参考になれば幸いです。

以下の記事をご覧になると、headlessCMSの素晴らしさが一瞬でわかるでしょう。
超簡単にAPIが作れる?Headless CMS “strapi” を触ってみる

headlessCMS

フロントエンド界隈では、シングルページアプリケーション(SPA)が盛り上がりを見せており、CMS構築においてもAPIファーストな考え方が主流となってきています。
そんななかコンテンツを管理するバックエンド側だけを提供する“Headless CMS”と呼ばれるツールがいろいろと出てきています。

ポータルサイトを作る際にはWordPressで作るなどという選択肢もありますが、SPAがいい。Nuxt使いたい。Git管理が楽だという点で今後はHeadlessCMSの人気が上がるのではないかなと思っています。

HeadlessCMSの技術選定

先ほど紹介したstrapiの記事をみて感銘を受けたのですが、どうやらcontentfullのほうが有名だよの声があったので調べてみました。

はい、数の多いほうが正義ということでContentfulを採用することにしましょう。

Contentfulの概要

ビジネス面でのメリット

技術面は様々ですが、とりあえず管理画面とfrontが分離されてて爆速でカスタマイズしやすいといった点がいいですね。
おやおや、先人の方がQiitaで実装面に関して記述をしているではないですか。

Nuxt.jsとContentfulでモダンなブログを構築してみた

実際にNuxt+Contentfulで構築されたブログ(早い)
MyCode.rip

Contentfulを始める

お値段

1つのロール(ユーザー権限)
5000レコード
24個のコンテンツタイプ
2つの環境(本番用・開発用など)
2つのロケール(日本語・英語などの多言語対応)
8言語のSDK(JavaScript, PHP, Android, iOS, Java, Python, Ruby, .NET)
10人のユーザー
APIの呼び出し(200万/月)
アセットの帯域(0.75TB/月)

引用 https://fromscratch-y.work/ja/blog/technology/other/start-contentful/

始め方

github連携して会員登録するのみ。
Contentful

ContentfulをNuxt.jsと統合する

ここからは、以下の記事を元に作業していきます。
公式

Nuxtプロジェクトの作成/起動

npm install @vue/cli -g
npx create-nuxt-app event-app
npx nuxt

Contentfulでの作業(CLIを使用)

次にContentful側での作業にうつります。
作業をする前にdatamodelとcontentfulの使い方ガイドを読むのがおすすめのようです、
Contentful data model
The beginner’s guide to Contentful

ContentfulCLIのインストール

まずはCLIをインストールしましょう。

//use brew
brew install contentful-cli

//use npm
npm install -g contentful-cli

//use yarn
yarn global add contentful-cli

Contentfulにログイン

contentful login

すると認証画面が開かれるのでauthorizeをしましょう。

次にtokenが表示されますのでcliにpasteしてください

スペースの作成

ポータルサイト用のspaceを作成します。

contentful space create --name 'Event App'

freeプランでは1つまで無料ですが、すでに作成している場合は以下のようなエラーが出ます。

spaceを選択してseedを挿入

$ contentful space use
? Please select a space:
  ...
❯ Event App (k8iqtj0xib4n)
  ...

seedの挿入(ニュルンニュルン)
2つ目のコマンドも使えるようにはなっているが、spaceを選択しているので、前者のコマンドをうつ

# after space selection using `contentful space use`
$ contentful space seed --template blog
# without space selection
$ contentful space seed --template blog --space-id <your-new-space-id>

Content Delivery APIアクセストークンの作成

$ contentful space accesstoken create --name event-app
✨  Successfully created access token nuxt (1234567890xxxxxxxxxxx)

ContentfulをNuxt.jsに統合

主なやることは2つ
Contentful JavaScript CDA SDKを登録する
index.vueページコンポーネントでデータを取得する

Contentful CDA JavaScript SDKをインストール

これでJavaScriptが使えるようになる。PHP, Android, iOS, Java, Python, Ruby, .NETもいけるっぽい

npm install --save contentful

pluginの作成

Nuxt.jsではサーバー側とフロント側のカスタムコードを書くために、plugin機能を備えているのでplugins配下にcontentful.jsを作成し以下のコードを記述

src > 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"
}

space_idとaccess_tokenは自分の物を利用する

contentful space accesstoken create --name event-app

の時のターミナルに各々出力されている

nuxt.config.js

// ./nuxt.config.js
const config = require('./.contentful.json')

module.exports = {
  // ...
  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
  }
  // ...
}

結果


データを無事取得することができました!!

最後に

僕自身、space_idをspace_nameにするなどの凡ミスで結構時間がかかってしまいましたが、公式曰く5分でできるらしいようです。
正直なところこれから始まるフロントエンドの実装に萎えましたが、簡単にサーバーレスを導入できると考えると非常にいいのではないかなと。

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

フロントエンドの最近記事

  1. Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る

  2. IOSアプリをAppStoreに公開する手順書(Ionic)

  3. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  4. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  5. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP