Contentful バックエンドアプリの構築チュートリアル実践 - イベント通知によるリアルタイム処理

Contentful バックエンドアプリの構築チュートリアル実践 - イベント通知によるリアルタイム処理

Contentful の公式チュートリアルに基づいて、バックエンドアプリを構築する手順を解説します。イベント通知機能を活用することで、コンテンツの変更に対するリアルタイムな処理や他システムとの連携が可能になります。アプリ定義の作成から認証設定、イベント購読の設定まで、実際の開発で必要な手順を順を追って説明します。

はじめに

本記事では、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 をクリックします。

Manage app definitions

Craete app ボタンでアプリを作成します。

Create app

アプリ名を入力して作成します。

App creation setting

キーペアの生成

アプリが Contentful の API にアクセスするための認証情報として、公開鍵と秘密鍵のペアを生成します。アプリ定義の Security タブに移動し、Generate key pair をクリックして、公開鍵と秘密鍵のペアを生成します。

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 にエンドポイントを設定します。

Target URL

アプリに対して通知したいトピックを選択します。

Select Subscription

アプリのホスティング

ngrok を使用して、ローカルで開発中のアプリを公開し、Contentful からのリクエストを受け取れるようにします。以下のコマンドでローカルのポートを公開します。

ngrok http 3543

ngrok が提供する公開 URL + /event-handler を前述のエンドポイント URL として設定します。

エンドポイント URL の例

https://012345ffffff.ngrok.app/event-handler

アプリのインストール

Contentful のスペース環境にアプリをインストールします。Apps > Custum apps から先に作成したアプリを Install します。

Install app

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

アプリが正しく動作しているかを確認するため、以下の手順を実行します。

  1. Contentful のスペースで新しいエントリーを作成します。
  2. アプリのログを確認して、イベントの受信と処理が行われていることを確認します。

アプリのログ出力例

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 からのイベント通知を受信し、それに応じた処理を行うことで、他のシステムとの連携やリアルタイムな対応が実現できます。これらの機能を活用することで、より柔軟で効率的なコンテンツ管理が可能となります。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.