Contentful バックエンドアプリの構築チュートリアル実践 - イベント通知によるリアルタイム処理
2025.07.10はじめに
本記事では、Contentful のバックエンドアプリ構築について、公式から提供されているチュートリアル に取り組みます。
Contentful とは
Contentful は、効率的にコンテンツを構築・管理・配信するために設計されたヘッドレスコンテンツ管理システム（CMS）です。コンテンツとプレゼンテーション層を分離することで、Web サイト、モバイルアプリ、IoT デバイスなど、あらゆるチャネルに対応した柔軟なコンテンツ展開が可能になります。
今回チュートリアルで制作する Contentful のバックエンドアプリは、Contentful からのイベント通知を受信し、それに応じた処理を実行します。これにより、コンテンツの変更に対するリアルタイムな対応や、他のシステムとの連携が可能となります。
対象読者
- Contentful を活用したバックエンドアプリの開発に興味がある方
- Contentful のイベント通知機能を活用して、他のシステムとの連携やリアルタイムな処理を実装したい方
参考
実装
環境の準備
下記の環境を用意します。
- Git: リポジトリのクローンに使用
- Node.js: アプリの実行環境として使用
- ngrok: ローカルで実行しているアプリをインターネット上で公開するために使用
デモアプリの取得
Contentful の公式リポジトリ からデモアプリのコードをクローンします。
git clone https://github.com/contentful/apps
アプリ定義の作成
Contentful コンソール で新しいアプリ定義を作成します。Apps > Custom Apps > Manage app definitions をクリックします。
Craete app ボタンでアプリを作成します。
アプリ名を入力して作成します。
キーペアの生成
アプリが Contentful の API にアクセスするための認証情報として、公開鍵と秘密鍵のペアを生成します。アプリ定義の Security タブに移動し、Generate key pair をクリックして、公開鍵と秘密鍵のペアを生成します。
秘密鍵のダウンロードは自動的に開始されます。ダウンロードした秘密鍵をアプリのディレクトリに配置します。
cd apps/examples/default-values-backend
mkdir keys
cp path/to/private-key.pem keys/key.pem
アプリイベントの購読設定
アプリがイベント通知を受信できるように設定します。アプリ定義の Events タブでイベント発生時に呼び出すエンドポイントを設定します。Enable events をオンにして Target の URL にエンドポイントを設定します。
アプリに対して通知したいトピックを選択します。
アプリのホスティング
ngrok を使用して、ローカルで開発中のアプリを公開し、Contentful からのリクエストを受け取れるようにします。以下のコマンドでローカルのポートを公開します。
ngrok http 3543
ngrok が提供する公開 URL + /event-handler を前述のエンドポイント URL として設定します。
エンドポイント URL の例
https://012345ffffff.ngrok.app/event-handler
アプリのインストール
Contentful のスペース環境にアプリをインストールします。Apps > Custum apps から先に作成したアプリを Install します。
App ID をこの後の手順で使用するので控えておきます。
アプリの初期設定
下記のコマンドで必要なライブラリをインストールします。
npm install
.env を修正し、 APP_ID と CONTENT_TYPE_ID を登録します。APP_ID には先ほどの手順で控えた App ID を入力します。
PUBLIC_APP_KEY="./keys/key.pub"
PRIVATE_APP_KEY="./keys/key.pem"
BASE_URL=https://api.contentful.com
# Required for setup script only
CMA_TOKEN= # You can obtain this token from the contentful web app
ORG_ID= # Your contentful organisation id
SPACE_ID= # Your contentful space id
ENVIRONMENT_ID= # Your contentul enviornment name
HOSTED_APP_URL= # Where your app will be hosted
# ここに追記
APP_ID=xxxxxxxxxxxx
CONTENT_TYPE_ID=blogPost
動作確認
アプリを実行し、設定したイベントが正しく処理されることを確認します。まずは下記コマンドで、アプリを開始します。
npm run start
アプリが正しく動作しているかを確認するため、以下の手順を実行します。
- Contentful のスペースで新しいエントリーを作成します。
- アプリのログを確認して、イベントの受信と処理が行われていることを確認します。
アプリのログ出力例
Server running on http://localhost:3543
(node:30578) Warning: Using insecure HTTP parsing
(Use `node --trace-warnings ...` to show where the warning was created)
Received webhook request because Entry xxxxxxxxxxxx was created
Set default values for Entry xxxxxxxxxxxx
最後の 2 行がエントリーの作成時に出力されたログです。
まとめ
本記事では、Contentful のバックエンドアプリを構築する手順を解説しました。Contentful からのイベント通知を受信し、それに応じた処理を行うことで、他のシステムとの連携やリアルタイムな対応が実現できます。これらの機能を活用することで、より柔軟で効率的なコンテンツ管理が可能となります。
