Strapi 概要 | Knowledge Garden

Strapi（ストラピ）は、オープンソースのヘッドレスCMS（Content Management System）です。RESTful APIやGraphQL APIを自動生成し、フロントエンドフレームワークと組み合わせて使用します。

Strapiとは

Strapiは以下の特徴を持つヘッドレスCMSです：

オープンソース: 無料で使用でき、セルフホスティングが可能
ヘッドレス: フロントエンドを持たず、APIのみを提供
管理画面付き: コンテンツ管理用の管理画面が標準で付属
カスタマイズ性: コンテンツタイプを自由に定義可能
プラグインシステム: 機能拡張が容易

データベースについて

Strapiはデータを保存するためにデータベースを必要とします。

サポートされるデータベース

データベース	開発環境	本番環境
SQLite	○	△（小規模のみ）
PostgreSQL	○	○（推奨）
MySQL	○	○
MariaDB	○	○

開発環境

開発環境ではSQLiteがデフォルトで使用されます。SQLiteはファイルベースのデータベースなので、別途データベースサーバーを準備する必要がありません。

# プロジェクト作成時、デフォルトでSQLiteが選択される
npx create-strapi-app@latest my-project --quickstart

本番環境

本番環境ではPostgreSQLが推奨されます。データベースは以下の方法で準備できます：

別サーバーで準備: 既存のデータベースサーバーやマネージドサービス（AWS RDS、Supabaseなど）を使用
Docker Composeで一緒に起動: StrapiとPostgreSQLを同じcompose.yamlで管理

Docker Composeの例

services:
  strapi:
    image: strapi/strapi
    environment:
      DATABASE_CLIENT: postgres
      DATABASE_HOST: db
      DATABASE_PORT: 5432
      DATABASE_NAME: strapi
      DATABASE_USERNAME: strapi
      DATABASE_PASSWORD: strapi
    ports:
      - "1337:1337"
    depends_on:
      - db

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: strapi
      POSTGRES_USER: strapi
      POSTGRES_PASSWORD: strapi
    volumes:
      - strapi-data:/var/lib/postgresql/data

volumes:
  strapi-data:

基本的な概念

コンテンツタイプ（Content Type）

コンテンツの構造を定義するスキーマです。管理画面のContent-Type Builderで視覚的に作成できます。

Collection Type: 複数のエントリを持つ（例：記事、商品）
Single Type: 1つのエントリのみ（例：サイト設定、会社情報）

コンポーネント（Component）

再利用可能なフィールドのグループです。複数のコンテンツタイプで共通して使う構造を定義できます。

メディアライブラリ

画像やファイルを管理する機能です。アップロードしたメディアはコンテンツから参照できます。

APIエンドポイント

Strapiは自動的にREST APIを生成します。

# 記事一覧を取得
GET /api/articles

# 特定の記事を取得
GET /api/articles/1

# 記事を作成（認証必要）
POST /api/articles

# 記事を更新（認証必要）
PUT /api/articles/1

# 記事を削除（認証必要）
DELETE /api/articles/1

GraphQL

GraphQLプラグインをインストールすると、GraphQL APIも利用可能になります。

npm install @strapi/plugin-graphql

インストールと起動

ローカル開発

# プロジェクト作成
npx create-strapi-app@latest my-project

# 開発サーバー起動
cd my-project
npm run develop

管理画面は http://localhost:1337/admin でアクセスできます。

環境変数

データベース接続などは環境変数で設定します。

# .env
DATABASE_CLIENT=postgres
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_NAME=strapi
DATABASE_USERNAME=strapi
DATABASE_PASSWORD=your_password

フロントエンドとの連携

Strapiは以下のようなフロントエンドフレームワークと組み合わせて使用します：

Astro: 静的サイト生成
Next.js: React + SSR/SSG
Nuxt: Vue + SSR/SSG
Gatsby: React + 静的サイト生成

Astroでの使用例

// src/pages/articles/index.astro
---
const response = await fetch('http://localhost:1337/api/articles');
const { data } = await response.json();
---

<ul>
  {data.map((article) => (
    <li>{article.attributes.title}</li>
  ))}
</ul>

Strapi Cloud vs セルフホスティング

Strapi Cloud

Strapi社が提供するマネージドサービス
インフラ管理が不要
有料プランあり

セルフホスティング

VPS、クラウドサーバー、Dockerなどで自分で運用
完全にコントロール可能
インフラの知識が必要

公式ドキュメント

Strapi公式サイト: https://strapi.io/
Strapi公式ドキュメント: https://docs.strapi.io/
Strapi GitHub: https://github.com/strapi/strapi