自由度高いHeadless CMS Strapiの開発環境作成してみた！

これまでCMSといえばWordPressしか使用したことなかったのですが、
記事以外のコンテンツも自由に管理できるHeadless CMSがないか調査したところ、
OSSではStrapiがええよとググったら出てきたので、
実際に触ってみるのにDockerで動くローカル環境をつくってみました！

環境情報

- CPU：Apple M4 Pro
- Docker： 27.4.0
- Docker Desktop：4.37.2
- Node: 20.18.0

手順

1.Strapi Cloudアカウントを作成

2.ローカル環境でStrapiプロジェクトを作成する

npx create-strapi@latest project-test

# 今回のケース
? Do you want to use the default database (sqlite) ? mysql
? Start with an example structure & data ? No
? Start with TypeScript ? Yes
? Install dependencies with npm? No
? Initialize a git repository ? No

3.ローカルでパッケージインストールする

npm ci 

4.Dockerfileを作成する

FROM node:22-alpine3.20
RUN apk update && apk add --no-cache build-base gcc autoconf automake zlib-dev libpng-dev nasm bash vips-dev git
ARG NODE_ENV=development
ENV NODE_ENV=${NODE_ENV}

WORKDIR /opt/
COPY package.json package-lock.json ./
RUN npm install -g node-gyp
RUN npm config set fetch-retry-maxtimeout 600000 -g && npm install
ENV PATH /opt/node_modules/.bin:$PATH

WORKDIR /opt/app
COPY . .
RUN chown -R node:node /opt/app
USER node
RUN ["npm", "run", "build"]
EXPOSE 1337
CMD ["npm", "run", "develop"]

5..envに環境変数を設定する

NODE_ENV=development

# Server
HOST=0.0.0.0
PORT=1337

# Secrets
APP_KEYS=【Strapi Cloudの管理画面で確認してください】
API_TOKEN_SALT=【Strapi Cloudの管理画面で確認してください】
ADMIN_JWT_SECRET=【Strapi Cloudの管理画面で確認してください】
TRANSFER_TOKEN_SALT=【Strapi Cloudの管理画面で確認してください】

# Database
DATABASE_CLIENT=mysql
DATABASE_HOST=127.0.0.1
DATABASE_PORT=3306
DATABASE_NAME=strapi
DATABASE_USERNAME=
DATABASE_PASSWORD=
DATABASE_SSL=false
JWT_SECRET=

6.compose.ymlを作成する

name: strapi

services:
  strapi:
    container_name: strapi
    build: .
    image: strapi:latest
    restart: unless-stopped
    env_file: .env
    environment:
      DATABASE_CLIENT: ${DATABASE_CLIENT}
      DATABASE_HOST: strapiDB
      DATABASE_PORT: ${DATABASE_PORT}
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET}
      APP_KEYS: ${APP_KEYS}
      NODE_ENV: ${NODE_ENV}
    volumes:
      - ./config:/opt/app/config
      - ./src:/opt/app/src
      - ./package.json:/opt/package.json
      - ./yarn.lock:/opt/yarn.lock
      - ./.env:/opt/app/.env
      - ./public/uploads:/opt/app/public/uploads
    ports:
      - "1337:1337"
    networks:
      - strapi
    depends_on:
      - strapiDB

  strapiDB:
    container_name: strapiDB
    platform: linux/amd64
    restart: unless-stopped
    env_file: .env
    image: mysql:8.0.41
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_USER: ${DATABASE_USERNAME}
      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
      MYSQL_PASSWORD: ${DATABASE_PASSWORD}
      MYSQL_DATABASE: ${DATABASE_NAME}
    volumes:
      - strapi-data:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - strapi

volumes:
  strapi-data:

networks:
  strapi:
    driver: bridge

7.Dockerイメージをビルドする

docker build -t strapi .

8.Dockerコンテナを起動する

docker-compose up -d

9.http://localhost:1337/ にアクセスする

下記のような画面が出てきたらバッチリです！

ここから実際にコンテンツのAPIスキーマ作成やプラグイン検証したりで、
躓いたところが多々とあるのですが、今回はここまで！

参考資料