Docker × PHP × Supabase ログイン機能付きToDoアプリ作成手順
Docker環境でPHPを立ち上げ、HTML/CSSの画面作成、PHPでのセッション認証、およびSupabaseとの連携を行うためのステップバイステップの練習手順です。
📁 ディレクトリ構成例
まず、プロジェクトのベースとなるフォルダとファイルを作成します。
todo-app/
├── docker/
│ └── php/
│ └── Dockerfile
├── docker-compose.yml
└── src/
├── css/
│ └── style.css
├── login.php
├── register.php
├── index.php (ToDoリスト・メイン画面)
└── logout.php
🚀 STEP 1: Docker環境の構築
ローカル環境に直接PHPをインストールせず、Dockerコンテナ上で動作させます。
1. docker/php/Dockerfile の作成
PHP公式のWebサーバー（Apache）付きイメージを使用します。
FROM php:8.3-apache
# 作業ディレクトリの設定
WORKDIR /var/www/html
# 必要なPHP拡張機能があればここでインストール (例: pdo_mysql等)
# RUN docker-php-ext-install pdo pdo_mysql
2. docker-compose.yml の作成
コンテナの起動・ポート設定・フォルダの同期（バインドマウント）を定義します。
version: '3.8'
services:
web:
build: ./docker/php
ports:
- "8080:80"
volumes:
- ./src:/var/www/html
3. コンテナの起動
ターミナルで以下のコマンドを実行します。
docker-compose up -d --build
> 確認: ブラウザで http://localhost:8080 にアクセスできれば環境構築完了です。
🎨 STEP 2: HTML/CSSでの画面作成（UI）
1. ログイン画面 (src/login.php)
<link rel="stylesheet" />
<h2>ログイン</h2>
2. ToDoリスト画面 (src/index.php)
<link rel="stylesheet" />
<h2>マイ ToDo リスト</h2>
<a href="logout.php">ログアウト</a>
<ul>
<li>サンプルタスク 1</li>
</ul>
🔐 STEP 3: PHPでのセッション認証実装
ログイン状態の保持と未ログインユーザーのアクセス制限を行います。
1. ログイン処理とセッション保存 (login.php の先頭に追記)
2. アクセス制限の追加 (index.php の先頭に追記)
3. ログアウト処理 (logout.php)
📝 STEP 4: ToDo機能（CRUD）の実装
ログインユーザーごとのタスク追加・表示処理を作成します。
<ul>
<li></li>
</ul>
⚡ STEP 5: Supabaseとの連携
データ管理と本格的な認証のために Supabase を接続します。
- Supabaseダッシュボードでの設定
- プロジェクトを作成。
-
Authentication設定でメール/パスワード認証を有効化。 -
Table Editorでtasksテーブルを作成 (id,user_id,title,created_at)。
- 接続方法の選択
- 方法 A（JavaScript SDKを使用）: フロントエンド（HTML/JS）側でSupabaseのJSクライアントライブラリを読み込み、直接ログインやタスク追加を行う。
-
方法 B（PHPからREST APIを呼び出す）: PHPの
cURLなどを使い、SupabaseのREST API（PostgREST API）へリクエストを送信してデータを操作する。