Strapi v4でカスタムAPIエンドポイントを作成する

こんにちは。キューでWebエンジニアをしている永井です。

今回は、ヘッドレスCMSのStrapiでカスタムAPIエンドポイントを作成する方法を紹介します。
Strapiはコレクション（コンテンツのデータ構造）作成時にAPIを自動生成してくれますが、コレクションが不要でAPIだけを用意したい場合に、こちらの方法を知っていると便利です。

前提

Strapiの開発環境は構築済みの想定で進めていきます。
まだの方は以下を参考に開発環境の構築をお願いします。

環境

strapi 4.4.5
Node 16.14.2

カスタムAPIエンドポイントの作成

本記事では、「GETメソッド /api/hello」のカスタムAPIエンドポイントを作成していきます。

1. カスタムAPIエンドポイント用のフォルダを作成する

開発環境に/src/apiがあるので、そちらにフォルダを作成します。
今回は/api/helloなので、フォルダ名もhelloとします。

2. APIルートを定義する

フォルダ/ファイルの作成
1.で作成したフォルダ内にroutesフォルダを作成し、その中にファイルを作成します。
ファイル名の指定はありませんが、こちらもhelloにしておきます。

ファイルの編集
作成したファイルにカスタムAPIエンドポイントの情報を定義します。

/src/api/hello/routes/hello.js

"use strict";

module.exports = {
  routes: [
    {
      method: "GET",          // メソッドの定義。 （GET, POST, PUT, DELETE or PATCH）
      path: "/hello",         // パスの定義。動的パスの場合は、"/hello/:id"のように。
      handler: "hello.world", // 実行される関数。<controllerName>.<actionName>で定義。
    },　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// こちらの詳細は、次の3.で説明します。
  ],
};

routesのパラメータに関しては、こちらでも確認できます。

3. ルートで実行される関数を定義する

今のままだとAPIを呼び出しても何も処理が実行されないので、処理を実装していきます。

フォルダ/ファイルの作成
1.で作成したフォルダ内にcontrollersフォルダを作成し、その中にファイルを作成します。
※このファイル名が<controllerName>になるので、2.で定義したhandlerの値と合わせる必要があります。（handler: "hello.world" → hello）

ファイルの編集
作成したファイルにAPI呼び出し時に実行される関数を定義します。
※この関数が<actionName>になるので、（handler: "hello.world" → world）

/src/api/hello/controllers/hello.js

"use strict";

module.exports = {
  async world(ctx, next) {
    // ...処理

    return "Hello world";
  },
};

 カスタムAPIエンドポイントの有効化

ここまでで作成は完了しましたが、APIを有効にしないと実行してもエラーになります。

$ curl localhost:1337/api/hello
{"data":null,"error":{"status":403,"name":"ForbiddenError","message":"Forbidden","details":{}}}

有効化は、Strapiの管理画面から可能です。
http://localhost:1337/admin/ で管理画面にアクセスし、
「Setting → Roles → Public」を選択してAPIの設定画面を開きます。
作成したカスタムAPIがあるので、そちらを有効にして右上の「Save」ボタンで保存します。

再度実行してみます。

$ curl localhost:1337/api/hello
Hello world

無事に実行できました！

まとめ

カスタムAPIエンドポイントを作成する方法を紹介しました。
別途サーバーを用意する必要もなく、APIを追加することができるので便利です。ぜひ活用してください。