Postgresql on K-Life Hack | システムアーキテクチャ & DevOps

Spring Boot 3.3とReact 18を用いた画像共有SNSのMVP実装設計

Wed, 03 Jun 2026 18:03:03 +0900

Instagramクローン開発におけるシステムアーキテクチャと実装ロードマップ

画像共有、ソーシャルグラフ、およびリアルタイムのインタラクションを核としたSNSの開発における、アーキテクチャ設計と実装ロードマップを定義します。本ドキュメントでは、Spring Boot 3.3およびReact 18を基盤としたMVP（Minimum Viable Product）の構築に焦点を当てます。

1. プロジェクトの定義とMVPスコープ

本プロジェクトの目的は、ユーザーが写真をアップロードし、フォローしているユーザーの投稿を時系列で閲覧し、「いいね」や「コメント」を通じて交流できるWebサービスを構築することです。開発の複雑性を制御するため、フェーズ1（MVP）では以下の機能にスコープを限定します。

MVP機能マトリクス

カテゴリ	MVP実装範囲	フェーズ2以降の検討事項
アカウント	サインアップ、ログイン、プロフィール管理	OAuth2.0、2要素認証（2FA）
関係性	フォロー / アンフォロー	ブロック機能、非公開アカウント
投稿	単一画像アップロード、キャプション、削除	動画、複数画像（カルーセル）、フィルタ
フィード	フォロー中ユーザーの時系列リスト	AIレコメンデーション、無限スクロール最適化
インタラクション	いいね、コメント（作成・一覧）	返信（スレッド）、ブックマーク

2. 技術スタックの選定理由：Decoupled Architecture

SNS特有の動的なUX（ページ遷移なしのインタラクション）を実現するため、Spring Boot + Thymeleafのモノリス構成ではなく、Spring Boot + Reactの分離構成を採用します。

UXの向上: ReactによるSPA（Single Page Application）構成により、無限スクロールや非同期の「いいね」処理など、アプリライクな操作感を提供します。
拡張性: 将来的なモバイルアプリ（React Native等）への展開を見据え、バックエンドをREST APIとして独立させます。
開発コスト: 初期設定（CORS、JWT、DTO設計）のコストは増加しますが、長期的なメンテナンス性とスケーラビリティにおいて優位性があります。

3. データモデリングとERD設計

リレーショナルデータベース（PostgreSQL）を用いた、コアエンティティの設計仕様です。

主要テーブル構造

users: id, email, password_hash, username, avatar_url, bio, created_at
follows: follower_id, following_id, created_at (複合主キー)
posts: id, user_id, image_url, caption, created_at
likes: user_id, post_id, created_at (複合主キー)
comments: id, post_id, user_id, body, created_at

フィード生成ロジック（MVP版）

初期段階では、以下のクエリロジックによりフィードを生成します。ユーザー規模が拡大した場合は、Redisを用いたタイムラインキャッシュへの移行を検討します。

SELECT p.* 
FROM posts p
JOIN follows f ON p.user_id = f.following_id
WHERE f.follower_id = :currentUserId
ORDER BY p.created_at DESC
LIMIT 20 OFFSET :offset;

4. バックエンド実装仕様 (Spring Boot 3.3)

プロジェクト構造

src/main/java/com/example/instagram
├── config // SecurityConfig, WebMvcConfig, CloudConfig
├── controller // AuthController, PostController, UserController
├── dto // Request/Response DTOs
├── entity // JPA Entities (User, Post, Follow, etc.)
├── repository // JpaRepository Interfaces
└── service // Business Logic (AuthService, PostService)

セキュリティと認証 (JWT)

ステートレスな認証を実現するため、JWT（JSON Web Token）を採用します。パスワードはBCryptでハッシュ化し、トークンは以下のライフサイクルで運用します。

Access Token: Authorization: Bearer ヘッダーで送信。有効期限は15分〜1時間。
Refresh Token: HttpOnly クッキーに保存。有効期限は7日〜14日。

public String generateAccessToken(UserDetails userDetails) {
 return Jwts.builder()
 .setSubject(userDetails.getUsername())
 .setIssuedAt(new Date())
 .setExpiration(new Date(System.currentTimeMillis() + ACCESS_TOKEN_EXPIRY))
 .signWith(SignatureAlgorithm.HS512, secretKey)
 .compact();
}

5. パフォーマンスと運用の最適化

JPA N+1問題の回避

フィード取得時、投稿ごとにユーザー情報を取得するN+1問題を回避するため、fetch joinまたはEntityGraphを適用します。

@Query("SELECT p FROM Post p JOIN FETCH p.user WHERE p.user.id IN :followingIds")
List<post> findAllByUserIdInOrderByCreatedAtDesc(@Param("followingIds") List<long> followingIds);

画像ストレージの管理

画像ファイルはDBに直接保存せず、AWS S3またはローカルストレージに保存し、DBにはそのURLのみを格納します。アップロード時には、最大5MBの制限と、jpg/png/webpの拡張子バリデーションを実装します。

6. 開発ロードマップ (6週間)

Week 1: Foundation: 🛠️ Docker環境構築、Flywayによるスキーマ設計、JWT認証の実装。
Week 2: Profile & Posts: 🛠️ 画像アップロードロジック、プロフィールCRUD、投稿APIの実装。
Week 3: Social Graph: 🛠️ フォロー/アンフォロー機能、フィード生成サービスの構築。
Week 4: Interaction: 🛠️ いいね・コメントAPI、カウントロジックの実装。
Week 5: Integration: 🛠️ Reactフロントエンドとの結合、Optimistic UI（楽観的更新）の適用。
Week 6: Deployment: 🚀 HTTPS設定、ロギング、バックアップ体制の整備とデプロイ。

Operational Notes

💡 MVP開発において最も避けるべきは「オーバーエンジニアリング」です。初期段階でマイクロサービス化や複雑なAIアルゴリズムを導入せず、まずはモノリスなバックエンドとSPAの疎結合構成を安定させることに注力します。フィードのパフォーマンスがボトルネックとなった時点で、インデックスの最適化やキャッシュ戦略を段階的に導入するのが現実的なアプローチです。

WASMベースPostgreSQL PGliteのNodejs組み込みと検証

Mon, 01 Jun 2026 08:12:26 +0900

概要とアーキテクチャの特徴

PGliteは、WebAssembly (WASM) にコンパイルされ、クライアントサイドJavaScriptライブラリとしてパッケージ化された、完全に動作する軽量なPostgreSQLエンジンです。ElectricSQLによって開発されたPGliteを使用することで、開発者は個別のPostgreSQLサーバー、Dockerコンテナ、または外部デーモンを必要とせずに、Node.jsランタイム、Webブラウザ、またはモバイル環境（React Native/Capacitor経由）でPostgreSQLデータベースを直接実行できます。

本稿では、Node.js環境におけるPGliteの初期化、操作、ベンチマーク、およびハイブリッド同期ワークフローのシミュレーション手順について解説します。

主なアーキテクチャの特徴

💡 WASM駆動のPostgreSQLエンジン: WebAssemblyにコンパイルされた実際のPostgreSQLエンジンを実行するため、SQL構文の互換性が維持されます。

🛠️ 環境に応じたストレージ抽象化: Node.js環境ではローカルファイルシステムを自動的に利用してデータを永続化し、ブラウザ環境ではIndexedDBにフォールバックします。

⚡ ネットワークオーバーヘッドの排除: データベースクエリがインプロセスで実行されるため、従来のデータベース接続に伴うネットワーク遅延が発生しません。

プロジェクトのセットアップと環境設定

ES Modulesを使用するように構成されたNode.js環境を構築し、必要なPGlite依存関係をインストールします。

# 1. プロジェクトディレクトリの作成と移動
mkdir pglite-demo
cd pglite-demo

# 2. package.jsonの初期化とES Modulesの 有効化
npm init -y
npm pkg set type="module"

# 3. PGliteライブラリのインストール
npm install @electric-sql/pglite

実装コード (`index.js`)

プロジェクトのルートディレクトリに index.js ファイルを作成し、データベースの初期化、トランザクションを使用した一括挿入ベンチマーク、標準的なCRUD操作、およびオフラインファーストの同期サイクルのシミュレーションを実行するロジックを実装します。

import { PGlite } from "@electric-sql/pglite";

// PGliteインスタンスの初期化
// ローカルの "./pgdata" ディレクトリに永続的なPostgreSQLデータベースを作成またはロードします。
// Node.js環境ではローカルファイルシステムを対象とし、ブラウザ環境ではIndexedDBがデフォルトとなります。
const db = new PGlite("./pgdata");

async function main() {
 console.log("🚀 PGlite (Postgres in WASM) 起動中...\n");

 // 1. テーブルの初期化 (DDLの実行)
 await db.exec(`
 CREATE TABLE IF NOT EXISTS notes (
 id SERIAL PRIMARY KEY,
 title TEXT NOT NULL,
 content TEXT,
 synced BOOLEAN DEFAULT false,
 created_at TIMESTAMP DEFAULT NOW()
 );
 `);
 console.log("✅ 'notes' テーブル準備完了 (Postgres Engine 稼働)\n");

 // ---------------------------------------------------------
 // 2. パフォーマンスベンチマーク: バルクデータの挿入
 // ---------------------------------------------------------
 console.log("📊 [ベンチマーク] メモ100件の挿入テスト開始...");
 const start = performance.now();

 // トランザクションブロックを使用して操作をバッチ処理します。
 // ネットワークオーバーヘッドがないため、メモリ内のWASM実行は高速です。
 await db.transaction(async (tx) =&gt; {
 for (let i = 0; i &lt; 100; i++) {
 await tx.query(
 "INSERT INTO notes (title, content) VALUES ($1, $2)",
 [`メモ #${i}`, `これは ${i} 回目のテストメモです。`]
 );
 }
 });

 const end = performance.now();
 console.log(`⚡ 完了! 所要時間: ${(end - start).toFixed(2)}ms`);
 console.log(` (1件あたりの平均処理速度: ${((end - start) / 100).toFixed(2)}ms)\n`);

 // ---------------------------------------------------------
 // 3. CRUDシナリオの実行
 // ---------------------------------------------------------
 console.log("📝 [CRUD シナリオ] 実行");

 // [Create] - 単一レコードを挿入し、作成された行を返す
 const newNote = await db.query(
 "INSERT INTO notes (title, content) VALUES ($1, $2) RETURNING *",
 ["重要ミーティング", "午後2時: Q3ロードマップ議論"]
 );
 console.log("1. メモ作成:", newNote.rows[0]);

 // [Update] - 作成されたレコードの内容を更新
 const updatedNote = await db.query(
 "UPDATE notes SET content = $1 WHERE id = $2 RETURNING *",
 ["午後3時に変更: Q3ロードマップ議論", newNote.rows[0].id]
 );
 console.log("2. メモ修正:", updatedNote.rows[0]);

 // [Read] - 直近のレコードを3件取得
 const list = await db.query("SELECT * FROM notes ORDER BY created_at DESC LIMIT 3");
 console.log("3. 直近のメモ参照 (Top 3):");
 console.table(list.rows.map(n =&gt; ({ id: n.id, title: n.title, content: n.content })));

 // ---------------------------------------------------------
 // 4. ハイブリッド同期のシミュレーション
 // ---------------------------------------------------------
 console.log("\n🔄 [同期] バックエンド同期シミュレーション...");

 // 未同期のローカルレコード (synced = false) を取得
 const unsyncedParams = await db.query("SELECT * FROM notes WHERE synced = false");
 const unsyncedCount = unsyncedParams.rows.length;

 if (unsyncedCount &gt; 0) {
 console.log(` -&gt; 同期対象: ${unsyncedCount}件検出`);
 
 // リモートサーバーへのデータ送信を模したネットワーク遅延 (500ms) のシミュレーション
 await new Promise(r =&gt; setTimeout(r, 500));
 console.log(" -&gt; ☁️ バックエンド送信完了 (Mock Server)");

 // ローカルデータベースの状態を更新し、同期済みとしてマーク
 const ids = unsyncedParams.rows.map(n =&gt; n.id);
 await db.query("UPDATE notes SET synced = true WHERE id = ANY($1)", [ids]);
 console.log(" -&gt; ✅ ローカルDBステータスを 'Synced' に更新完了");
 } else {
 console.log(" -&gt; 同期するデータはありません。");
 }

 // ---------------------------------------------------------
 // 実行終了
 // ---------------------------------------------------------
 console.log("\n🎉 すべてのデモが正常に完了しました。");
}

main().catch((err) =&gt; {
 console.error("❌ エラー発生:", err);
});

実行手順と期待される出力

スクリプトを実行するには、ターミナルで以下のコマンドを実行します。

node index.js

期待されるコンソール出力例

🚀 PGlite (Postgres in WASM) 起動中...

✅ 'notes' テーブル準備完了 (Postgres Engine 稼働)

📊 [ベンチマーク] メモ100件の挿入テスト開始...
⚡ 完了! 所要時間: 42.50ms
 (1件あたりの平均処理速度: 0.43ms)

📝 [CRUD シナリオ] 実行
1. メモ作成: { id: 101, title: '重要ミーティング', ... }
2. メモ修正: { id: 101, title: '重要ミーティング', content: '午後3時に変更...', ... }
3. 直近のメモ参照 (Top 3):
┌─────────┬──────────────┬────────────────────────────┐
│ (index) │ id │ title │
├─────────┼──────────────┼────────────────────────────┤
│ 0 │ 101 │ '重要ミーティング' │
│ 1 │ 100 │ 'メモ #99' │
│ 2 │ 99 │ 'メモ #98' │
└─────────┴──────────────┴────────────────────────────┘

🔄 [同期] バックエンド同期シミュレーション...
 -&gt; 同期対象: 101件検出
 -&gt; ☁️ バックエンド送信完了 (Mock Server)
 -&gt; ✅ ローカルDBステータスを 'Synced' に更新完了

🎉 すべてのデモが正常に完了しました。

アーキテクチャおよび性能の検証ポイント

この実装により、PGliteの3つの重要な機能特性が実証されます。

1. インプロセス実行による低遅延

トランザクションブロック内で100件のレコードを順次挿入する処理は、数十ミリ秒（例: 約42.50ms、1レコードあたり約0.43ms）で完了します。従来のクライアント・サーバー型データベース構成では、ネットワークの往復、TCPハンドシェイク、およびコネクションプーリングのオーバーヘッドにより、同様の処理に秒単位の時間を要することがあります。PGliteは、データベースエンジンをインプロセスで実行することで、極めて低いオーバーヘッドを実現します。

2. PostgreSQL構文との互換性

軽量なキーバリューストアや簡易的なSQL風エンジンとは異なり、PGliteは実際のPostgreSQLエンジンを動作させています。そのため、以下を含む標準的なPostgreSQLのSQL構文をそのままサポートします。

・複雑なDDL (CREATE TABLE IF NOT EXISTS)

・トランザクション制御 (db.transaction)

・ RETURNING句を伴うデータ操作 (INSERT ... RETURNING *)

・配列パラメータを用いた高度なクエリ演算 (WHERE id = ANY($1))

3. データの永続性

このスクリプトを複数回実行すると、データが ./pgdata ディレクトリ内に永続化されていることが確認できます。自動インクリメントされる主キー（id）は1にリセットされず、実行をまたいで増加し続けます（例: 2回目以降の実行では101から開始）。これにより、PGliteが単なるメモリ内の一時的なモックではなく、永続的で信頼性の高いデータベースエンジンとして機能していることが証明されます。

Operational Notes

💡 ストレージの選択: Node.js環境ではファイルシステムが使用されますが、ブラウザ環境で動作させる場合は、自動的にIndexedDBが選択されます。環境ごとのストレージアダプタの挙動に留意してください。

⚠️ リソース消費: WASM上でフル機能のPostgreSQLを実行するため、メモリ消費量は一般的なキーバリューストアよりも大きくなります。リソース制限の厳しいエッジ環境や古いモバイル端末に展開する場合は、実機でのメモリプロファイリングを推奨します。

⚠️ 同時実行制御: PGliteはシングルプロセス指向の設計となっています。同一 of データディレクトリに対して複数のNode.jsプロセスから同時に書き込みアクセスを行うと、ロック競合やデータ破損の原因となるため、適切なアクセス制御の設計が必要です。

Postgresql on K-Life Hack | システムアーキテクチャ & DevOps

Spring Boot 3.3とReact 18を用いた画像共有SNSのMVP実装設計

Instagramクローン開発におけるシステムアーキテクチャと実装ロードマップ

1. プロジェクトの定義とMVPスコープ

MVP機能マトリクス

2. 技術スタックの選定理由：Decoupled Architecture

3. データモデリングとERD設計

主要テーブル構造

フィード生成ロジック（MVP版）

4. バックエンド実装仕様 (Spring Boot 3.3)

プロジェクト構造

セキュリティと認証 (JWT)

5. パフォーマンスと運用の最適化

JPA N+1問題の回避

画像ストレージの管理

6. 開発ロードマップ (6週間)

Operational Notes

WASMベースPostgreSQL PGliteのNodejs組み込みと検証

概要とアーキテクチャの特徴

主なアーキテクチャの特徴

プロジェクトのセットアップと環境設定

実装コード (index.js)

実行手順と期待される出力

期待されるコンソール出力例

アーキテクチャおよび性能の検証ポイント

1. インプロセス実行による低遅延

2. PostgreSQL構文との互換性

3. データの永続性

Operational Notes

実装コード (`index.js`)