Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
  • 2022.01.08に公開
  • ブログ構築TS
  • 5. Nuxt.js×Contentfulセットアップ
  • No.1 / 3

今回達成すること

Nuxtにモジュールcontentfulをインストールし、モジュールのセットアップを行います。

作業に入る前にブランチを切っておきます。

% git checkout -b 20220107_setup_contentful_api

# 作成と移動の確認
% git branch
* 20220107_setup_contentful_api

モジュールcontentfulをインストールする

Contentfulには、APIを取得するcontentfulという公式のモジュールが用意されています。

contentful - npm

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を用意します。

プロジェクトディレクトリ直下に.envファイルを作成してください。

% touch .env

.envには本番用の環境変数も記述するので注意が必要

今回のデプロイは、Nuxtが、ローカル上でビルドしたファイルをNetlifyにデプロイする設計としています。

つまり、ContentfulへAPIリクエストを行うタイミングは、ローカルでビルドしたタイミングです。

この時参照されるAPI Keyは、.envファイルのAPI Keyとなります。

このように、.envファイルには、本番環境用API Keyと開発環境用のAPI Keyを記述することになるので、絶対にGItHubにPushしないようにしてください。

Gitの管理外ファイルであるか確認する

Nuxtが作成する.gitignoreファイルには、デフォルトで.envが記述されています。

改めて、.envファイルがGitの管理外になっているか確認しておきましょう。

.gitignore
# 59~60行目付近
# dotenv environment variables file
.env

.envにContentful API Keyを用意する

Contentfulへ移動しAPI Keyをコピーします。

ヘッダーメニュー > 「Settings」 > 「API Keys」へ移動してください。

下記を3つをコピーしてください。

  1. Space ID
  2. Content Delivery API
  3. Content Preview API

まだContentfulのAPI Keyを発行していない場合は、この記事の目次 スペースにアクセスするAPI Keyを発行するを参照してください。

.envファイルへコピーした値を環境変数として登録します。

.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の漏洩を防ぐためです。

nuxt.config.jsenvpublicRuntimeConfigプロパティに登録すると、クライアントで使用できるようになりますが、同時にAPI Keyが漏洩するので注意してください。


【コラム】コンテンツが公開情報の場合、API Keyが漏洩しても問題ないという筆者の考え

Delivery API KeyとPreview API Keyは、コンテンツを取得するためのAPI Keyなので、アカウントを操作することはできません。

ですので、漏洩してもそこまで大事には至らないと考えています。(元々ブログが公開コンテンツなので)

ただ、下書き記事に重要な情報を書き込んでいた場合は公開前に盗まれるでしょう。

隠せるなら隠す方が得策です。

contentfuのセットアップを行う

インストールしたモジュール、contentfulのセットアップを行います。

pluginsディレクトリにcontentful.tsを作成してください。

% 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') ... モジュールcontentfulimport文で読み込めないので、requireを使用する。
  • accessToken ... 開発環境と本番環境でAPI Keyを切り替える。
  • CTF_SPACE_ID || 'client only' ... Vuexでプラグインファイルを呼び出す際にクライアントでも呼ばれる。この時に、spaceaccessTokenString型の値がないとcontentfulがエラーを吐く
  • timeout: 60000 ... API接続タイムアウトは60秒。コンテンツが多くなるとデフォルトの30000msではエラーを吐く。タイムアウトエラーになる場合はtimeoutの値を増やせば良い。
  • params.host ... リクエスト先のホストを指定。accessTokenPREVIEW_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ファイルにコンテンツを表示するところまでを行いましょう。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
1
  • コンテンツページ構築
  • /
  • #01
ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう
2
  • コンテンツページ構築
  • /
  • #02
カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】
3
  • コンテンツページ構築
  • /
  • #03
カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】
4
  • コンテンツページ構築
  • /
  • #04
injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】
5
  • コンテンツページ構築
  • /
  • #05
NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】
6
  • コンテンツページ構築
  • /
  • #06
タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】
7
  • コンテンツページ構築
  • /
  • #07
プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】
8
  • コンテンツページ構築
  • /
  • #08
@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】
1
  • NetlifyFunctionsを使った検索機能
  • /
  • #01
Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】
2
  • NetlifyFunctionsを使った検索機能
  • /
  • #02
Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】
3
  • NetlifyFunctionsを使った検索機能
  • /
  • #03
Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
4
  • NetlifyFunctionsを使った検索機能
  • /
  • #04
オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】
5
  • NetlifyFunctionsを使った検索機能
  • /
  • #05
Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】
6
  • NetlifyFunctionsを使った検索機能
  • /
  • #06
ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】
7
  • NetlifyFunctionsを使った検索機能
  • /
  • #07
検索ページを作成しよう【Vue propsとTypeScriptの書き方 解説】
8
  • NetlifyFunctionsを使った検索機能
  • /
  • #08
Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】
9
  • NetlifyFunctionsを使った検索機能
  • /
  • #09
検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】
1
  • ブログMarkdown対応
  • /
  • #01
@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】
2
  • ブログMarkdown対応
  • /
  • #02
Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう
3
  • ブログMarkdown対応
  • /
  • #03
Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう
4
  • ブログMarkdown対応
  • /
  • #04
Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。