Strapi｜Note

Home
Note
Strapi

概要

ヘッドレスCMS「Strapi」を使ってみた。

環境を用意する

Dockerで構築。node_modulesの扱いはこちらの記事を参照した。

1
services:
2
  app:
3
    build: ./src/strapi
4
    ports:
5
      - '1337:1337'
6
    volumes:
7
      - ./app:/usr/src/app
8
      - node-modules-volume:/usr/src/app/node_modules
9
    tty: true
10

11
volumes:
12
  node-modules-volume:

1
# 22以下推奨だった
2
FROM node:22
3

4
WORKDIR /usr/src/app
5

6
# npmのアップデートが案内されたので、あらかじめここで入れておく
7
RUN npm install -g npm@11.2.0

1
.git
2
.log
3
node_modules
4
.strapi
5
.tmp

ビルド。

1
docker compose build

起動。

1
docker compose up -d

アプリのコンテナに入る。

1
docker compose exec app bash

Strapiのプロジェクトを作成する。

1
npx create-strapi-app@latest .

今回は無料で試したいので、Strapi CloudはSkipする。

1
? Please log in or sign up. (Use arrow keys)
2
  Login/Sign up
3
❯ Skip
4

5
? Please log in or sign up. Skip
6
? Do you want to use the default database (sqlite) ? Yes
7
? Start with an example structure & data? No
8
? Start with Typescript? Yes
9
? Install dependencies with npm? Yes
10
? Initialize a git repository? No

Strapiを起動。

1
npm run develop
2
# http://localhost:1337/

アカウント登録すればダッシュボードが確認できる。

Consoleでエラーが出た

GET http://localhost:5173/admin/ net::ERR_CONNECTION_REFUSED

GitHubに同様のissueがあり、解決方法が書かれていた。

package.jsonを変更する。

1
{
2
  ..
3
  "scripts": {
4
    ..
5
    "dev": "strapi develop",
6
    "develop": "strapi develop",
7
    "dev": "strapi develop --no-watch-admin",
8
    "develop": "strapi develop --no-watch-admin",
9
    ..
10
  },
11
  ...
12
}

データを登録してみる

たとえばモンスターの名前と属性を管理する。

Content-Type Builder

データの型を作成する。

項目	内容
Display name	Monster
API ID (Singular)	monster（自動）
API ID (Plural)	monsters（自動）

Field	Name	Type or Value
Text	name	Short text
Enumeration	element	Fire Water Earth Wind Thunder

Content Manager

データを登録する。APIにデータを含める場合は「Publish」しておく。

NAME	ELEMENT
AAAAA	Fire
BBBBB	Water
CCCCC	Earth
DDDDD	Wind
EEEEE	Thunder

Setting

[Users & Permissions plugin] - [Roles] - [Public] - [Monster] - [find]にチェックを入れると、APIにアクセスできる。以下は整形したデータ。

1
{
2
  "data": [
3
    {
4
      "id": 2,
5
      "documentId": "nds6yl0rhi6mc8qajkbnst33",
6
      "name": "AAAAA",
7
      "element": "Fire",
8
      "createdAt": "2025-03-29T06:50:05.891Z",
9
      "updatedAt": "2025-03-29T06:50:05.891Z",
10
      "publishedAt": "2025-03-29T06:50:05.901Z"
11
    },
12
    {
13
      "id": 4,
14
      "documentId": "h5b5eqhpx4rqad9qhybbgk2q",
15
      "name": "BBBBB",
16
      "element": "Water",
17
      "createdAt": "2025-03-29T06:50:13.760Z",
18
      "updatedAt": "2025-03-29T06:50:13.760Z",
19
      "publishedAt": "2025-03-29T06:50:13.770Z"
20
    },
21
    {
22
      "id": 6,
23
      "documentId": "x97lxl2ubqhnvi4eovdb6hgm",
24
      "name": "CCCCC",
25
      "element": "Earth",
26
      "createdAt": "2025-03-29T06:50:19.803Z",
27
      "updatedAt": "2025-03-29T06:50:19.803Z",
28
      "publishedAt": "2025-03-29T06:50:19.811Z"
29
    },
30
    {
31
      "id": 11,
32
      "documentId": "ckresuyjxosy2l32oxu87u5m",
33
      "name": "DDDDD",
34
      "element": "Wind",
35
      "createdAt": "2025-03-29T06:50:26.119Z",
36
      "updatedAt": "2025-03-29T06:51:02.108Z",
37
      "publishedAt": "2025-03-29T06:51:02.119Z"
38
    },
39
    {
40
      "id": 12,
41
      "documentId": "jdw4gtrevl98ikz184g3dfw5",
42
      "name": "EEEEE",
43
      "element": "Thunder",
44
      "createdAt": "2025-03-29T06:50:47.909Z",
45
      "updatedAt": "2025-03-29T07:10:25.227Z",
46
      "publishedAt": "2025-03-29T07:10:25.238Z"
47
    }
48
  ],
49
  "meta": {
50
    "pagination": {
51
      "page": 1,
52
      "pageSize": 25,
53
      "pageCount": 1,
54
      "total": 5
55
    }
56
  }
57
}

idが不規則になっているのが気になったので、実際にSQLiteのデータを確認。

1
sqlite3 data.db

1
SELECT * FROM monsters;

1
1|nds6yl0rhi6mc8qajkbnst33|AAAAA|Fire|1743231005891|1743231005891||1|1|
2
2|nds6yl0rhi6mc8qajkbnst33|AAAAA|Fire|1743231005891|1743231005891|1743231005901|1|1|
3
3|h5b5eqhpx4rqad9qhybbgk2q|BBBBB|Water|1743231013760|1743231013760||1|1|
4
4|h5b5eqhpx4rqad9qhybbgk2q|BBBBB|Water|1743231013760|1743231013760|1743231013770|1|1|
5
5|x97lxl2ubqhnvi4eovdb6hgm|CCCCC|Earth|1743231019803|1743231019803||1|1|
6
6|x97lxl2ubqhnvi4eovdb6hgm|CCCCC|Earth|1743231019803|1743231019803|1743231019811|1|1|
7
7|ckresuyjxosy2l32oxu87u5m|DDDDD|Wind|1743231026119|1743231062108||1|1|
8
9|jdw4gtrevl98ikz184g3dfw5|EEEEE|Thunder|1743231047909|1743232225227||1|1|
9
11|ckresuyjxosy2l32oxu87u5m|DDDDD|Wind|1743231026119|1743231062108|1743231062119|1|1|
10
12|jdw4gtrevl98ikz184g3dfw5|EEEEE|Thunder|1743231047909|1743232225227|1743232225238|1|1|

どうも同じデータを編集した場合、UPDATEではなくINSERTしているように見える。

MySQLで使ってみる

1
services:
2
  app:
3
    build: ./src/strapi
4
    ports:
5
      - '1337:1337'
6
    volumes:
7
      - ./app:/usr/src/app
8
      - node-modules-volume:/usr/src/app/node_modules
9
    tty: true
10

11
  db:
12
    image: mysql/mysql-server:8.0
13
    env_file: .env
14
    ports:
15
      - '3306:3306'
16
    volumes:
17
      - ./src/mysql/my.cnf:/etc/my.cnf
18
      - ./db:/var/lib/mysql
19

20
volumes:
21
  node-modules-volume:

1
MYSQL_DATABASE=strapi
2
MYSQL_USER=strapi
3
MYSQL_PASSWORD="password"
4
MYSQL_ROOT_PASSWORD="password"
5
TZ=Asia/Tokyo

1
.git
2
.log
3
node_modules
4
.strapi
5
.tmp
6
.env

1
# ------------------------------
2
# 普通にイメージ作成した時のデフォルト設定項目
3
# ------------------------------
4
[mysqld]
5
skip-host-cache
6
skip-name-resolve
7
datadir=/var/lib/mysql
8
socket=/var/lib/mysql/mysql.sock
9
secure-file-priv=/var/lib/mysql-files
10
user=mysql
11
pid-file=/var/run/mysqld/mysqld.pid
12

13
# ------------------------------
14
# 追加項目
15
# ------------------------------
16
# サーバ側の文字コード
17
character-set-server = utf8mb4
18

19
# ソート順
20
collation_server = utf8mb4_ja_0900_as_cs_ks
21

22
# タイムゾーン
23
default-time-zone = 'SYSTEM'
24
log_timestamps = 'SYSTEM'
25

26
# エラーログを残す
27
log-error = mysql-error.log
28

29
# スロウ（ここでは1秒とする）ログを残す
30
slow_query_log = 1
31
slow_query_log_file = mysql-slow.log
32
long_query_time = 1.0
33
log_queries_not_using_indexes = 0
34

35
# 通常のログを残す
36
general_log = 1
37
general_log_file = mysql-general.log
38

39
[mysql]
40
# mysqlコマンドの文字コード
41
default-character-set = utf8mb4
42

43
[client]
44
# 他クライアントツール（mysqlコマンドも含むが重複して問題ない）の文字コード
45
default-character-set = utf8mb4

create-strapi-app時に、MySQLを選択する。

1
? Please log in or sign up. Skip
2
? Do you want to use the default database (sqlite) ? No
3
? Choose your default database client mysql
4
? Database name: strapi
5
? Host: db # コンテナ名を指定する
6
? Port: 3306
7
? Username: strapi
8
? Password: ********
9
? Enable SSL connection: No
10
? Start with an example structure & data? No
11
? Start with Typescript? Yes
12
? Install dependencies with npm? Yes
13
? Initialize a git repository? No

データを確認するために、DBコンテナに入る。

1
docker compose exec db /bin/bash

MySQLに入る。

1
mysql -u root -p

DB「strapi」を選択して、monstersの中身を表示。

1
use strapi;

1
SELECT * FROM monsters;

1
+----+--------------------------+-------+---------+----------------------------+----------------------------+----------------------------+---------------+---------------+--------+
2
| id | document_id              | name  | element | created_at                 | updated_at                 | published_at               | created_by_id | updated_by_id | locale |
3
+----+--------------------------+-------+---------+----------------------------+----------------------------+----------------------------+---------------+---------------+--------+
4
|  1 | au4avn7jlw1fbp99zv8tkpwn | AAAAA | Fire    | 2025-03-29 13:16:51.823000 | 2025-03-29 13:16:51.823000 | NULL                       |             1 |             1 | NULL   |
5
|  2 | au4avn7jlw1fbp99zv8tkpwn | AAAAA | Fire    | 2025-03-29 13:16:51.823000 | 2025-03-29 13:16:51.823000 | 2025-03-29 13:16:51.833000 |             1 |             1 | NULL   |
6
|  3 | bz6ze1w0qjekyca7httrhhsp | BBBBB | Water   | 2025-03-29 13:17:01.044000 | 2025-03-29 13:17:01.044000 | NULL                       |             1 |             1 | NULL   |
7
|  4 | bz6ze1w0qjekyca7httrhhsp | BBBBB | Water   | 2025-03-29 13:17:01.044000 | 2025-03-29 13:17:01.044000 | 2025-03-29 13:17:01.058000 |             1 |             1 | NULL   |
8
|  5 | j9dgf9l54izmdrtflvbz14jx | CCCCC | Earth   | 2025-03-29 13:17:09.291000 | 2025-03-29 13:17:09.291000 | NULL                       |             1 |             1 | NULL   |
9
|  6 | j9dgf9l54izmdrtflvbz14jx | CCCCC | Earth   | 2025-03-29 13:17:09.291000 | 2025-03-29 13:17:09.291000 | 2025-03-29 13:17:09.303000 |             1 |             1 | NULL   |
10
|  7 | dalpv7r7gxzx5ilxal3ekowk | DDDDD | Wind    | 2025-03-29 13:17:18.973000 | 2025-03-29 13:17:39.929000 | NULL                       |             1 |             1 | NULL   |
11
|  9 | z3j7kqdutlt6r6j633cbsea4 | EEEEE | Thunder | 2025-03-29 13:17:29.755000 | 2025-03-29 13:17:29.755000 | NULL                       |             1 |             1 | NULL   |
12
| 10 | z3j7kqdutlt6r6j633cbsea4 | EEEEE | Thunder | 2025-03-29 13:17:29.755000 | 2025-03-29 13:17:29.755000 | 2025-03-29 13:17:29.766000 |             1 |             1 | NULL   |
13
| 11 | dalpv7r7gxzx5ilxal3ekowk | DDDDD | Wind    | 2025-03-29 13:17:18.973000 | 2025-03-29 13:17:39.929000 | 2025-03-29 13:17:39.942000 |             1 |             1 | NULL   |
14
+----+--------------------------+-------+---------+----------------------------+----------------------------+----------------------------+---------------+---------------+--------+

データの編集がUPDATEではなくINSERTなのは同じだった。どうやらDBの種類による状態ではないらしい。

続く...かもね