本記事は、IKEAのサメアイコンが一人で完走を目指す Advent Calendar 2022の2日目記事です。

会社でHeadlessCMSをおきたい事例が生じようとしている気配を感じたので、ここ1年くらい前にHeadlessCMSを触るようになりました。

昨今、HeadlessCMSを使うならmicroCMS等のSaaSを使うのが一般かと思いますが、自由度や予算を確保してないのでお金を使えない等の理由で特定のサーバーやインスタンスにホストしたいケースなんかもあると思います。
今回は、そういったケースのためにひとまずローカル環境にHeadlessCMSを立ててみる記事となります。

Strapi

使用するHeadlessCMSはStrapiです。
トップにStrapi is the leading open-source headless CMS. It’s 100% JavaScript and fully customizable.と書くくらいには高いカスタマイズ性を売りにしています。

これをDockerでローカルに立てます。

Dockerを用いてローカルにStrapiを立てる

docker-composeを用いてローカル上にStrapiを立てていきます。
これは、headlessCMSで作成したテキストデータなどはStrapiにではなく接続したDBに保存する必要があるためです。
一応、ローカル上にDBをインストールして実行することもできますが、色々手間なのでDockerを使います。

DBにはMariaDBを使用します。
MySQLやPostgreSQLにも対応しているので、MariaDBを好んでいない方はそれらでも問題ないです。MariaDBを使っているのは私の趣味なのと、何も知らないでMariaDB向けに作成しようとすると1点詰まる箇所があるためです。

strapiをインストール

以下を実行

npx create-strapi-app@latest

フロントエンドではよく見る形式のコマンドなので覚えやすいと思います。

ikea_shark@Almalinux ~/apps/hoge > npx create-strapi-app@latest
? What would you like to name your project? strapi_sample
? Choose your installation type Custom (manual settings)
? Choose your preferred language (Use arrow keys)
❯ JavaScript 
  TypeScript 
ikea_shark@Almalinux ~/apps/hoge > npx create-strapi-app@latest
? What would you like to name your project? strapi_sample
? Choose your installation type Custom (manual settings)
/bin/sh: hostname: command not found
? Choose your preferred language TypeScript
? Choose your default database client mysql
? Database name: strapi
? Host: 127.0.0.1
? Port: 3306
? Username: strapi
? Password: ****
? Enable SSL connection: No

これでstrapiの準備は整いました。

ただ、現時点ではDBがないので案内に沿って実行してもエラーを吐くだけです。
ここから、docker-compose.yamlを作成します。

必要事項に関しては以下のリンク先に書かれているので主導で書いてもよいのですが、コミュニティのツールに便利なものがあるので今回はそちらを使おうかと思います。

以下のコマンドでサクッと作れるので実行してみましょう

npx @strapi-community/dockerize@latest

いろいろ聞かれるので、先ほど答えた内容に合わせて適当に答えます。

✔ Do you want to create a docker-compose file? 🐳 … No / Yes
✔ What environments do you want to configure? › Both
✔ Whats the name of the project? … strapi
✔ What database do you want to use? › MariaDB
✔ Database Host … localhost
✔ Database Name … strapi
✔ Database Username … strapi
✔ Database Password … ***
✔ Database Port … 3306

What environments do you want to configure?

ここについては、わかっていないうちはBothかdevって答えておきましょう。
Productionだとできないことがあるためです。

Bothを選択した場合、以下のようになります。

.
├── config
│   ├── admin.ts
│   ├── api.ts
│   ├── database.ts
│   ├── env
│   │   ├── development
│   │   │   └── database.ts
│   │   └── production
│   │       └── database.ts
│   ├── middlewares.ts
│   └── server.ts
├── database
│   └── migrations
├── docker-compose.yml
├── Dockerfile
├── Dockerfile.prod
├── favicon.png
├── package.json
├── public
│   ├── robots.txt
│   └── uploads
├── README.md
├── src
│   ├── admin
│   │   ├── app.example.tsx
│   │   ├── tsconfig.json
│   │   └── webpack.config.example.js
│   ├── api
│   ├── extensions
│   └── index.ts
├── tsconfig.json
└── yarn.lock

Bothは開発環境と本番環境の両方を作成するコマンドなので、両環境のDBの設定ファイルとDockerファイルが存在します。
そのままdocker-compose upするとdev環境を作成してくれます。

実行前に日本語化の準備をしておきましょう。
/src/admin/app.example.tsxを/src/admin/app.tsxにして'ja'のコメントアウトを外します。

実行すると以下の画面が見れるようになります。
英語ですが、右上のドロップダウンからに日本語が選べるので好きに使用してください。

あとは案内されるチュートリアルに従って操作するだけで完了です。

おわりに

というわけで、毒にも薬にもならぬn番煎じの記事でした。
大した記事ではないのですが、今後のアドベントカレンダーでStrapiを使うので触れた形です。

今回の記事を書くまで@strapi-community/dockerizeの存在を知らなかったので、ここだけは為になったかなと思っています。