教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートでは記事データの置かれたContentfulと、記事を表示させる場であるNuxt.jsアプリを連携させる方法を学びます。この教材の肝になるパートなので、じっくり取り組みましょう。
連携の手順は、公式ドキュメントに詳しく説明されていますので、これにしたがって進めていきます。
まず、連携に必要なツールをnpmからインストールします。
以下のコマンドを実行してください。
bash1 Copied!$ npm install contentful --save
以下のような実行結果が出力されれば成功です。
Copied!$ npm install contentful --save
...
+ contentful@7.13.1
added 4 packages from 3 contributors and audited 13376 packages in 25.621s
続いて設定ファイルとなるcontentful.js
をsrc/plugins/
配下に追加します。
追加したファイルを以下のように編集してください。
src/plugins/contentful.js123456789101112 Copied!// src/plugins/contentful.js
const contentful = require('contentful')
const config = {
space: process.env.CTF_SPACE_ID,
accessToken: process.env.CTF_CDA_ACCESS_TOKEN
}
module.exports = {
createClient () {
return contentful.createClient(config)
}
}
続いてsrc/
配下に.contentful.json
ファイルを作成してください。このファイルは連携のためのコードを保管するためのものです。前章の最後にContentfulで取得した2つのコードを次のようにペーストしてください。
src/.contentful.json123456 Copied!// src/.contentful.json
{
"CTF_SPACE_ID": "Space ID",
"CTF_CDA_ACCESS_TOKEN": "access token"
}
最後にsrc/nuxt.config.js
を次の通りに編集してください。
src/nuxt.config.js12345678910111213141516171819202122 Copied!// src/nuxt.config.js
// ここから追加
const config = require('./.contentful.json')
const contentful = require('contentful')
// ここまで追加
export default {
mode: 'universal',
/*
** Headers of the page
*/
// ここから追加
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN
},
// ここまで追加
・
・
・
1つずつ説明していきます。
js12 Copied!const config = require('./.contentful.json')
const contentful = require('contentful')
上記コードは先ほど作成した設定ファイルをconfig
という定数とし、また先ほどインストールしたcontentfulのプラグインをcontentful
という定数としています。
js1234 Copied!env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,
CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN
},
上記コードは環境変数としてスペースIDとアクセストークンを設定しています。各変数の値は設定ファイルから引っ張ってきています。
以上でプロジェクトフォルダの下準備が完了しました。次の章ではアプリの中身を作っていきます。