W3C SVG

Headless CMS StrapiをHerokuにインストールする

  1. まるさんかくしかく　Tech学習と入門ログ
  2. Cloud
  3. Headless CMS StrapiをHerokuにインストールする
2020-07-29

Next.jsやGatsbyで使うためにちょっとしたデータをJSONやGraphQLで欲しくなりました。

Headless CMSのStrapiを使うと簡単に環境が用意できるみたいなのでHerokuにインストールしました。

Strapiとは

StrapiはオープンソースのHeadless CMSです。

Next.jsのData fetching のマニュアルにサンプルがあって、 Contentful・ Prismic・ GraphCMSとかも無料枠で色々動かせそうだったけど、 せっかくなので自前でインストールできるStrapiを使うことにしました。 Strapiは、普通のRESTful APIでJSONをやり取りする以外に、GraphQLにも対応しているのがいいですね。

Strapiのインストール

npxあるいはyarnでインストールできる。 DBは MongoDB Atlas を使うため、--quickstartのオプションをいれないでコマンドを実行した。

#npx create-strapi-app my-strapi
yarn create strapi-app my-strapi

? Choose your installation type Custom (manual settings)
? Choose your default database client mongo
? Database name: mystrapi
? Host: *****.mongodb.net
? +srv connection: true
? Port (It will be ignored if you enable +srv): 27017
? Username: ******
? Password: ******
? Authentication database (Maybe "admin" or blank):
? Enable SSL connection: Yes

インストール後、以下を実行し、Strapiが動作することを確認する。

#npm run develop
yarn develop

GraphQLのインストール

GraphQLの機能はPluginとして提供されているのでインストールする。

#npm run strapi install graphql
yarn strapi install graphql

(自分の環境だとエラーが発生したので、yarnを実行後に再度上記コマンドを実行しました。)

Herokuに公開

Procfileはstartを設定する。

web:npm run start

ローカルでの確認は以下で行える。

heroku local web

サーバへの公開は、ローカルでコミット後、Herokuのgitにpushする。

git push heroku master

herokuでは「NODE_ENV=production」で公開が行われる。 productionだとhttps://example.jp/graphqlでPlaygroundにアクセスできなくなるため、 Playgroundを使いたい場合はextensions/graphql/config/settings.jsonのファイルを作成し、 playgroundAlwaysをtrueにする必要がある。

// extensions/graphql/config/settings.json
{
    "endpoint": "/graphql",
    "tracing": false,
    "shadowCRUD": true,
    "playgroundAlways": true,
    "depthLimit": 7,
    "amountLimit": 100,
    "federation": false
}

ローカルだとdevelopmentで起動するが、 productionでの動作を見たい場合など.envのファイルで設定できる。

# .env
NODE_ENV=production

参考ページ