HeadlessCMSの「Strapi」をDockerで爆速で立ち上げる

5 min読了の目安(約5300字TECH技術記事

StrapiのAPIの権限周りが分かりづらかったのと、公式のDockerイメージを使ってのStrapiの構築の情報があまりなかったので記事にしました。

https://hub.docker.com/r/strapi/strapi

HeadlessCMSとは

記事を書いたり保存したりのバックエンドの機能だけを持っていて、記事を表示するフロント側の機能を持たないCMSのことです。

APIやGraphQLを用いてフロント側で記事を表示します。

メリットとしては、フロント側の技術は何を使ってもいいのでかなり自由度が高いことだと思います。

StrapiをDockerで起動する

StrapiをDockerで起動する設定について説明していきます。

docker-composeの設定

まずはdocker composeの設定からです。

$ mkdir strapi
$ cd strapi
$ vi docker-compose.yml
version: '3'
services:
  strapi:
    image: strapi/strapi
    environment:
      DATABASE_CLIENT: mysql
      DATABASE_HOST: mysql
      DATABASE_PORT: 3306
      DATABASE_NAME: strapi
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi
      DATABASE_SSL: 'false'
    volumes:
      - ./app:/srv/app
    ports:
      - '1337:1337'
    depends_on:
      - mysql
    tty: true

  mysql:
    image: mysql
    command: mysqld --default-authentication-plugin=mysql_native_password
    volumes:
      - ./data:/var/lib/mysql
    ports:
    - '3306:3306'
    environment:
      MYSQL_ROOT_PASSWORD: strapi
      MYSQL_DATABASE: strapi
      MYSQL_USER: strapi
      MYSQL_PASSWORD: strapi
    cap_add:
      - SYS_NICE

以上でdockerの準備は終わりです。

StrapiをDockerで起動する

次にDockerでStrapiを起動していきます。

$ docker-compose up

これで起動は完了です。

注意点としては、以下の場所で10~15分程度止まります。
裏側で実行自体はされているので、終了などせずに待ってください。

strapi_1  | Starting your app...

Strapiの起動

以下が表示されたらStrapiの起動は完了です。

strapi_1  | Welcome back!
strapi_1  | To manage your project 🚀, go to the administration panel at:
strapi_1  | http://localhost:1337/admin
strapi_1  |
strapi_1  | To access the server ⚡️, go to:
strapi_1  | http://localhost:1337

Strapiでの記事作成

Strapiの記事作成までの使い方を説明していきます。

アカウントの作成

まずは http://localhost:1337/admin にアクセスします。

以下のようにアカウントの作成画面になるので、情報を入力してきます。
image.png

パスワードは大文字を含めないとアカウント作成できないので注意しましょう。

Strapiでの記事の作成の準備

Strapiでの記事の作成の準備をしていきます。

1.左のサイドバーのContent-Types Builder を選択

image.png

2.Create new collection type を選択

image.png

3.名前を入力して、「続ける」を押下

image.png

4.Title の設定

Textを選択します。
image.png

Nameは Title と打ち込んで Add another field を押下します。
image.png

5.次に先程と同じ要領で Rich Text を選択し、Nameには Text と入力して 「終了」を押下します

6.右上の「保存」を押下

image.png

サーバーのリスタートが始まるので、ターミナルで以下のように出たらページリロードしてください。

strapi_1  | Welcome back!
strapi_1  | To manage your project 🚀, go to the administration panel at:
strapi_1  | http://localhost:1337/admin
strapi_1  |
strapi_1  | To access the server ⚡️, go to:
strapi_1  | http://localhost:1337

記事の作成

記事の作成していきましょう。

1.サイドバーで作成した Articlesを選択します

image.png

2.Articlesを追加を押下

image.png

3.記事を書く

以下のように記事を書けます。
image.png

Title は先程追加したTextフィールド
Text はRich Textフィールドです。

Rich Textフィールドに関してはマークダウンで書いていくことができます。
他にも日付などのフィールドがあるので、必要なら使ってみてください。

4.保存をして公開

公開したらAPIで記事を配信できるようになります。

StrapiのAPIの使い方

StrapiでのAPIの使い方を説明してきます。

デフォルトだとAPIを叩いても以下のように権限で引っかかってしまったりするので少し設定が必要です。

GET http://localhost:1337/articles

image.png

権限設定の方法

サイドバーの設定 > ロールと権限 > Public の順に選択していきます。
image.png

以下のようにAPIで使いたい権限を選択します。
image.png

今回は記事の閲覧のみをしたいので find findone の2つにチェックを入れます。

右上のSave を選択して設定終了です。

APIを叩く

先程のAPIを叩くとちゃんと結果が返ってきます。

GET http://localhost:1337/articles

image.png

記事の詳細についても以下のようにAPIを叩けば返ってきます。

GET http://localhost:1337/articles/1

image.png

Strapiについてのまとめ

StrapiのDockerでの立ち上げ方と記事の作成方法、APIの設定の方法を説明しました。

簡単に記事の作成までをすることができるのでかなり便利なので試してみてください。

おかしなところや疑問点などありましたら、是非コメント下さい。

参考

https://strapi.io/documentation/developer-docs/latest/installation/docker.html#step-1-create-a-docker-compose-yaml-file