lalavel phpを使ったキュレーションサイトを考え中

Posted at 2026-09-26

Laravel + Supabaseでキュレーション（まとめ）サイトを作ろう！【環境構築からDB接続まで】

はじめに

本記事では、PHPの堅牢なフレームワーク Laravel と、Firebaseの代替（Open Source Alternative）として人気の Supabase を組み合わせて、キュレーションサイト（まとめサイト）を構築するための初期セットアップ手順を解説します。

なぜこの組み合わせなのか？

Laravel: 認証、ルーティング、スクレイピング、リレーション管理などが容易でバックエンドのロジックが組みやすい。
Supabase: 面倒なPostgreSQLのサーバー運用が不要。さらに強力な認証（Auth）や画像ストレージ（Storage）が最初からセットになっている。

1. 開発環境とアーキテクチャ

PHP: 8.2+
Laravel: 11.x
Database: Supabase PostgreSQL
API接続: Supabase REST API (PostgREST) / PostgreSQL Direct

2. Supabaseプロジェクトの作成

Supabase公式サイトにログインし、New Project を作成します。
プロジェクト名とデータベースのパスワード（※後ほど使うので控えておく）を設定し、リージョンは Tokyo (ap-northeast-1) を選択します。
作成完了後、Settings > API から以下をメモしておきます。
- Project URL
- anon (public) API Key
Settings > Database から、Connection String（接続文字列）の URI または各接続パラメータ（Host, Port, User）を確認します。

3. Laravelプロジェクトの作成と設定

3.1. プロジェクトの新規作成

ローカル環境でLaravelプロジェクトを作成します。

composer create-project laravel/laravel curation-site
cd curation-site

3.2. .env ファイルの編集

Supabaseのデータベースに直接接続するため、.env ファイルを書き換えます。

DB_CONNECTION=pgsql
DB_HOST=://supabase.com # SupabaseのHostを入力
DB_PORT=6543 # トランザクションプール（外部接続）用のポート
DB_DATABASE=postgres
DB_USERNAME=postgres.[あなたのプロジェクトID]
DB_PASSWORD=あなたのSupabaseデータベースパスワード

# Supabase API連携用（後述のSDK等で使用）
SUPABASE_URL=https://supabase.co
SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

💡 ポイント: Supabaseへの外部接続ポートは 5432（直接接続）と 6543（接続プール/Supavisor）が選べます。サーバーレス環境や多数の同時接続を考慮し、基本的には 6543 の使用を推奨します。

4. データベース設計とマイグレーション

キュレーションサイトに必要な最低限のテーブル（記事、まとめ要素、カテゴリ）をLaravelのマイグレーションで定義します。

4.1. マイグレーションファイルの作成

php artisan make:migration create_curation_tables

4.2. マイグレーションの実装

生成されたマイグレーションファイルを以下のように編集します。

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        // カテゴリテーブル
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug')->unique();
            $table->timestamps();
        });

        // キュレーション記事（親）
        Schema::create('articles', function (Blueprint $table) {
            $table->id();
            $table->foreignId('category_id')->constrained()->onDelete('cascade');
            $table->string('title');
            $table->text('summary')->nullable();
            $table->string('status')->default('draft'); // draft, published
            $table->timestamps();
        });

        // 記事内のコンテンツ要素（子：リンク、テキスト、画像など）
        Schema::create('curation_items', function (Blueprint $table) {
            $table->id();
            $table->foreignId('article_id')->constrained()->onDelete('cascade');
            $table->string('type'); // text, url, image, youtube
            $table->text('content')->nullable(); // テキストやURL
            $table->string('media_url')->nullable(); // OGP画像やアップロード画像のパス
            $table->integer('sort_order')->default(0); // ドラッグ&ドロップ並び替え用
            $table->timestamps();
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('curation_items');
        Schema::dropIfExists('articles');
        Schema::dropIfExists('categories');
    }
};

4.3. マイグレーションの実行

コマンドを実行して、Supabase上のPostgreSQLにテーブルを作成します。

php artisan migrate

Supabaseの管理画面（Table Editor）を開き、テーブルが正しく作成されているか確認してください。

5. Supabase SDKの導入（API経由の操作）

直接のSQLクエリだけでなく、SupabaseのStorage（画像保存）やAuth（認証）を呼び出すために、コミュニティ製のPHP SDKを導入すると便利です。

composer require supabase/supabase-php

簡易的なクライアント初期化例

サービスプロバイダなどで以下のようにクライアントをバインドしておくと、コントローラーから簡単に呼び出せます。

use Supabase\Storage\StorageClient;

$storage = new StorageClient(
    env('SUPABASE_ANON_KEY'),
    [
        'service_url' => env('SUPABASE_URL')
    ]
);

// 例: 画像バケットへのアップロード
// $storage->Bucket('thumbnails')->upload('path/to/file.jpg', $fileContents);

おわりに

これで、LaravelからSupabaseの強力なPostgreSQLデータベースを操作する基盤が整いました！
ここからキュレーションサイトとして完成させるには、以下の機能を実装していくことになります。

OGP情報のスクレイピング機能（ユーザーがURLを入力した際にタイトルや画像を自動取得する）
SortableJS等を用いた並び替えUI（curation_items の sort_order を動的に書き換える）
Supabase Storageを活用した画像アップロード

次回は、**「外部URLからOGP情報を自動取得してまとめ要素を作る機能」**の実装について解説します。

よろしければ、いいね・フォローをお願いします！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up