どうもぞえです。
ポータルサイトを作ろうと思っていたところ、ポータルサイトを作るのであれば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プランでは１つまで無料ですが、すでに作成している場合は以下のようなエラーが出ます。
spaceを選択してseedを挿入
$ contentful space use
? Please select a space:
...
❯ Event App (k8iqtj0xib4n)
...
seedの挿入（ニュルンニュルン）
２つ目のコマンドも使えるようにはなっているが、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に統合
主なやることは２つ
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分でできるらしいようです。
正直なところこれから始まるフロントエンドの実装に萎えましたが、簡単にサーバーレスを導入できると考えると非常にいいのではないかなと。
WINDII
最新記事 by WINDII (全て見る)
- Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
- IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
- IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日
この記事へのコメントはありません。