今回達成すること
Nuxtにモジュールcontentfulをインストールし、モジュールのセットアップを行います。
作業に入る前にブランチを切っておきます。
% git checkout -b 20220107_setup_contentful_api
# 作成と移動の確認
% git branch
* 20220107_setup_contentful_api
モジュールcontentfulをインストールする
Contentfulには、APIを取得するcontentfulという公式のモジュールが用意されています。
Nuxtにインストールしましょう。
% yarn add contentful
# インストール確認
% yarn list --pattern contentful
├─ contentful-resolve-response@1.3.0
├─ contentful-sdk-core@6.10.4
└─ contentful@9.1.5
contentfulモジュールは、v9.1.5のバージョンを使用しています。
NuxtにContentfulのAPI Keyを用意する
NuxtにAPI Keyを用意します。
プロジェクトディレクトリ直下に
% touch .env
.envには本番用の環境変数も記述するので注意が必要
今回のデプロイは、Nuxtが、ローカル上でビルドしたファイルをNetlifyにデプロイする設計としています。
つまり、ContentfulへAPIリクエストを行うタイミングは、ローカルでビルドしたタイミングです。
この時参照されるAPI Keyは、
このように、
Gitの管理外ファイルであるか確認する
Nuxtが作成する.envが記述されています。
改めて、
.gitignore
# 59~60行目付近
# dotenv environment variables file
.env
.envにContentful API Keyを用意する
Contentfulへ移動しAPI Keyをコピーします。
ヘッダーメニュー > 「Settings」 > 「API Keys」へ移動してください。
下記を3つをコピーしてください。
- Space ID
- Content Delivery API
- Content Preview API
まだContentfulのAPI Keyを発行していない場合は、この記事の目次 スペースにアクセスするAPI Keyを発行するを参照してください。
.env
# contentful
CTF_SPACE_ID=<ここにSpace ID>
# production api key(generate command)
CTF_DELIVERY_API_KEY=<ここにDelivery API>
# development api key(dev command)
CTF_PREVIEW_API_KEY=<ここにPreview API>
CTF_DELIVERY_API_KEY... デプロイ前に実行されるgenerateコマンド時に参照される。公開記事のみ取得可能なAPI Key。CTF_PREVIEW_API_KEY... 開発サーバを起動するdevコマンド時に参照される。下書きと公開記事が取得できるAPI Key。
API Keyが漏洩するタイミング
今回のContentful API Keyは、サーバーサイドでのみ使用する設計としています。
これはAPI Keyの漏洩を防ぐためです。
envやpublicRuntimeConfigプロパティに登録すると、クライアントで使用できるようになりますが、同時にAPI Keyが漏洩するので注意してください。
【コラム】コンテンツが公開情報の場合、API Keyが漏洩しても問題ないという筆者の考え
Delivery API KeyとPreview API Keyは、コンテンツを取得するためのAPI Keyなので、アカウントを操作することはできません。
ですので、漏洩してもそこまで大事には至らないと考えています。（元々ブログが公開コンテンツなので）
ただ、下書き記事に重要な情報を書き込んでいた場合は公開前に盗まれるでしょう。
隠せるなら隠す方が得策です。
contentfuのセットアップを行う
インストールしたモジュール、contentfulのセットアップを行います。
pluginsディレクトリに
% touch plugins/contentful.ts
作成したファイルは以下のコードをコピペしてください。
plugins/contentful.ts
// paramsの型を公式からインポート
import { CreateClientParams } from 'contentful'
// module.exportsが使用されているのでrequireでimportする
const contentful: any = require('contentful')
const isDev: boolean = process.env.NODE_ENV === 'development'
// 開発はCTF_PREVIEW_API_KEY, 本番はCTF_DELIVERY_API_KEYを返す
const accessToken: string | undefined = (isDev)
? process.env.CTF_PREVIEW_API_KEY
: process.env.CTF_DELIVERY_API_KEY
// contentful parameter doc: https://contentful.github.io/contentful.js/contentful/latest/contentful.html
const params: CreateClientParams = {
/*
space id
'client only' => store内ではclientでも呼ばれるためkeyが存在しないエラーを回避する
*/
space: process.env.CTF_SPACE_ID || 'client only',
// API Key
accessToken: accessToken || 'client only',
// APIリクエストをhttpで行うか(false: https, default: true)
insecure: false,
// 接続タイムアウトms(ビルド時のタイムアウトエラーを回避, default: 30000)
timeout: 60000
}
if (isDev) {
/*
contentful preview APIホスト(default: cdn.contentful.com)
cdn.contentful.com => CTF_DELIVERY_API_KEY(publish content only)
preview.contentful.com => CTF_PREVIEW_API_KEY(draft & publish content)
*/
params.host = 'preview.contentful.com'
}
export default contentful.createClient(params)
require('contentful')... モジュールcontentfulはimport文で読み込めないので、requireを使用する。accessToken... 開発環境と本番環境でAPI Keyを切り替える。CTF_SPACE_ID || 'client only'... Vuexでプラグインファイルを呼び出す際にクライアントでも呼ばれる。この時に、spaceとaccessTokenにString型の値がないとcontentfulがエラーを吐く。timeout: 60000... API接続タイムアウトは60秒。コンテンツが多くなるとデフォルトの30000msではエラーを吐く。タイムアウトエラーになる場合はtimeoutの値を増やせば良い。params.host... リクエスト先のホストを指定。accessTokenがPREVIEW_API_KEYの場合は、preview.contentful.comを指定する。これにより下書きコンテンツが取得できる。
参考: https://contentful.github.io/contentful.js/contentful/latest/contentful.html
contentfulパラメーター CreateClientParamsの型
モジュールcontentfulが用意している型、CreateClientParamsの実態は以下のようになります。
node_modules/contentful/index.d.ts
export interface CreateClientParams {
space: string;
accessToken: string;
environment?: string;
insecure?: boolean;
host?: string;
basePath?: string;
httpAgent?: any;
httpsAgent?: any;
proxy?: AxiosProxyConfig;
headers?: any;
adapter?: any;
application?: string;
integration?: string;
resolveLinks?: boolean;
removeUnresolved?: boolean;
retryOnError?: boolean;
logHandler?: (level: ClientLogLevel, data?: any) => void;
timeout?: number;
retryLimit?: number;
}
以上でモジュールcontentfulのセットアップは完了です。
コミットしておきます。
% git add -A
% git commit -m "Add module contentful and plugin file"
次回は?
今回行ったcontentfulのセットアップが正しく行われているか、実際にAPIリクエストを行います。
Vueファイルにコンテンツを表示するところまでを行いましょう。