こんにちは、ソリューションの五十嵐です。

Netlify CMS + GatsbyのようなJAMStackなブログが話題になっています。

弊社のブログもJAMStackな構成にしたいと思っていますが、Netlifyなどのサービスを利用するよりは自社のサーバにHeadlessCMSを構築したいと考えています。

調べたところによるとNode.jsで構築できる「Strapi」というオープンソースのHeadlessCMSがありましたので試してみようと思います。

https://strapi.io/

Strapi

Strapiのインストールはnpmで行います。 公式のチュートリアル通りに以下のコマンドを実行しましょう。

$ npm install strapi@alpha -g

インストールが完了したらstrapiコマンドでプロジェクトディレクトリを作成します。

公式ではMongoDBを推奨していますが、MySQL、PostgreSQLなども使用できるようです。

今回はMySQLで設定してみましょう。

DBはプロジェクト作成時に設定でき、MySQLの設定も簡単に行うことができました。

$ strapi new [対象ディレクトリ]
? Starting to create your Strapi application.
? Choose your installation type Custom (manual settings)
? Choose your main database: MySQL
? Database name: blog
? Host: localhost
? Port: 3306
? Username: root
? Password: ********
? Enable SSL connection: false

プロジェクトディレクトリが作成されたらそのディレクトリに移動しstartコマンドでstrapiを起動します。

$ strapi start

無事起動すると以下のページで管理画面を開くことができます。 http://localhost:1337/admin

Post作成

管理画面でユーザーを作成、ログインできたらブログ記事を投稿するためのコンテンツを作成しましょう。

コンテンツタイプの項目を選択します。

コンテンツタイプの追加を選び「Post」と入力し、記事コンテンツを作成します。

今回はサンプルなので記事コンテンツはString型のTitleとText型のDetailのみとします。

コンテンツは作成できましたがこのままではAPIで取得できませんので「ロールと権限 > public」から以下のようにチェックを入れ、権限を設定します。

これで記事の公開ができましたので実際にGETで取得してみましょう。

ブラウザでhttp://localhost:1337/postsにアクセスするとJSON形式のPostデータが取得できます

GraphQL

最後にGraphQLでデータを取得できるようにします。

デフォルトでREST APIが有効になっているのでそのままでも良いのですが、今回はGatsbyのGraphQLからデータを取得する予定ですのでGraphQLを有効にします。

GraphQLを有効にするにはStrapiにプラグインを追加する必要がありますので、以下のコマンドでプラグインを追加しましょう。

$ strapi install graphql

これでGraphQLが有効になりましたので再度Strapiを起動し、http://localhost:1337/graphqlにアクセスしましょう。

GraphQLの実行環境が表示されるはずです。

まとめ

Node.jsのHeadlessCMSであるStrapiを試してみましたが、思った以上に簡単に構築でき、GraphQLの有効化もプラグインのインストールだけで済みました。

手軽に構築できる点は良いと思うのですが、カテゴリやタグなどの設定を入れたり、マークダウンの記事エディタを入れたりすることは可能なのでしょうか。。。

その辺りは機会があれば検証してみたいと思います。