シンプルチャットアプリケーション

GCP上のSupabase MCPを利用したシンプルなWebチャットアプリケーションです。

機能

• シンプルな白黒デザインのチャットインターフェース
• Supabase MCPを使用したデータベース連携
• 自然言語によるデータベース情報抽出機能
• リアルタイムメッセージ更新

技術スタック

• フロントエンド: Next.js, React, TailwindCSS
• バックエンド: Supabase (PostgreSQL)
• インフラ: Google Cloud Platform (GCP)
• その他: Supabase MCP (Machine Communication Protocol)

プロジェクト構成

chat-app/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── chat/
│   │   │   │   └── route.ts
│   │   │   └── messages/
│   │   │       └── route.js
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── ChatInterface.tsx
│   ├── context/
│   │   └── ChatContext.tsx
│   └── lib/
│       └── supabase.ts
├── public/
├── .gitignore
├── next.config.js
├── package.json
├── tailwind.config.js
└── Dockerfile

セットアップ方法

前提条件

• Node.js 20.x以上
• npm 10.x以上
• GCPアカウント
• Supabaseプロジェクト

ローカル開発環境のセットアップ

1. リポジトリをクローン

   git clone <repository-url>
   cd chat-app
   

2. 依存関係のインストール

   npm install
   

3. 環境変数の設定 .env.localファイルを作成し、以下の内容を追加：

   NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
   

4. 開発サーバーの起動

   npm run dev
   

データベーススキーマのセットアップ

Supabaseプロジェクトで以下のSQLを実行してデータベーススキーマを作成します：

-- メッセージテーブルの作成
CREATE TABLE messages (
  id SERIAL PRIMARY KEY,
  content TEXT NOT NULL,
  user_id TEXT,
  is_ai BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- リアルタイム更新の有効化
ALTER TABLE messages REPLICA IDENTITY FULL;

-- 行レベルセキュリティポリシーの設定
ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow public read access" ON messages FOR SELECT USING (true);
CREATE POLICY "Allow authenticated insert access" ON messages FOR INSERT WITH CHECK (true);

-- 自然言語によるDB情報抽出のための関数
CREATE OR REPLACE FUNCTION get_ai_response(query TEXT)
RETURNS TEXT AS $$
DECLARE
  result TEXT;
BEGIN
  -- クエリに基づいて適切な応答を生成
  IF query ILIKE '%データベース%情報%' THEN
    SELECT 'データベースには現在' || COUNT(*) || '件のメッセージがあります。' INTO result FROM messages;
  ELSIF query ILIKE '%最新%メッセージ%' THEN
    SELECT 'データベースの最新メッセージは「' || content || '」です。' INTO result FROM messages ORDER BY created_at DESC LIMIT 1;
  ELSE
    result := 'すみません、その質問にはお答えできません。データベースに関する質問をしてください。';
  END IF;
  
  RETURN result;
END;
$$ LANGUAGE plpgsql;

GCPへのデプロイ方法（詳細）

このセクションでは、GCPを使用してアプリケーションをデプロイするための詳細な手順を説明します。複数のデプロイオプションを提供し、それぞれの利点と設定方法を詳しく解説します。

1. GCPプロジェクトの準備

1.1 GCPプロジェクトの設定

# GCPプロジェクトの設定
gcloud config set project <your-gcp-project-id>

# プロジェクト情報の確認
gcloud config list project

1.2 必要なAPIの有効化

# 必要なAPIを有効化
gcloud services enable storage-api.googleapis.com \
                       containerregistry.googleapis.com \
                       cloudbuild.googleapis.com \
                       run.googleapis.com \
                       appengine.googleapis.com \
                       firebase.googleapis.com

1.3 サービスアカウントの権限設定

Cloud Buildサービスアカウントに必要な権限を付与します：

# プロジェクト番号の取得
PROJECT_NUMBER=$(gcloud projects describe <your-gcp-project-id> --format='value(projectNumber)')

# Cloud Buildサービスアカウントに権限を付与
gcloud projects add-iam-policy-binding <your-gcp-project-id> \
    --member="serviceAccount:$PROJECT_NUMBER@cloudbuild.gserviceaccount.com" \
    --role="roles/storage.admin"

gcloud projects add-iam-policy-binding <your-gcp-project-id> \
    --member="serviceAccount:$PROJECT_NUMBER@cloudbuild.gserviceaccount.com" \
    --role="roles/run.admin"

# サービスアカウントにサービスアカウントユーザーロールを付与
gcloud projects add-iam-policy-binding <your-gcp-project-id> \
    --member="serviceAccount:$PROJECT_NUMBER@cloudbuild.gserviceaccount.com" \
    --role="roles/iam.serviceAccountUser"

2. デプロイオプション1: Cloud Run（推奨）

Cloud Runは、コンテナ化されたアプリケーションをサーバーレスで実行できるGCPのサービスです。スケーラビリティが高く、使用した分だけの課金体系が特徴です。

2.1 Dockerfileの準備

プロジェクトルートに以下の内容のDockerfileが既に含まれています：

# ビルドステージ
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 実行ステージ
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

2.2 Dockerイメージのビルドとプッシュ

# Dockerイメージのビルドとプッシュ
gcloud builds submit --tag gcr.io/<your-gcp-project-id>/chat-app

# イメージの確認
gcloud container images list --repository=gcr.io/<your-gcp-project-id>

2.3 Cloud Runサービスのデプロイ

# Cloud Runサービスのデプロイ
gcloud run deploy chat-app \
  --image gcr.io/<your-gcp-project-id>/chat-app \
  --platform managed \
  --region us-central1 \
  --allow-unauthenticated \
  --set-env-vars="NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>,NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>"

# デプロイされたサービスの確認
gcloud run services list

2.4 トラブルシューティング

権限エラーが発生する場合：

1. GCPコンソールで「IAMと管理」→「IAM」に移動
2. Cloud Buildサービスアカウント（<project-number>@cloudbuild.gserviceaccount.com）を見つける
3. 編集ボタンをクリックし、以下のロールを追加：
   • Storage 管理者
   • Cloud Run 管理者
   • サービスアカウントユーザー

ビルドエラーが発生する場合：

# ビルドログの確認
gcloud builds list
gcloud builds log <build-id>

3. デプロイオプション2: App Engine

App Engineは、フルマネージドのアプリケーションプラットフォームで、インフラストラクチャの管理が不要です。

3.1 app.yamlの作成

プロジェクトルートにapp.yamlファイルを作成：

runtime: nodejs20

instance_class: F1

env_variables:
  NEXT_PUBLIC_SUPABASE_URL: "<your-supabase-url>"
  NEXT_PUBLIC_SUPABASE_ANON_KEY: "<your-supabase-anon-key>"

handlers:
  - url: /.*
    script: auto
    secure: always

3.2 App Engineへのデプロイ

# App Engineアプリケーションの作成（初回のみ）
gcloud app create --region=us-central

# アプリケーションのデプロイ
gcloud app deploy

3.3 デプロイされたアプリケーションの確認

# アプリケーションURLの表示
gcloud app browse

4. デプロイオプション3: Firebase Hosting（静的サイト）

Next.jsアプリケーションを静的サイトとしてエクスポートし、Firebase Hostingにデプロイする方法です。

4.1 静的サイトのエクスポート設定

next.config.jsファイルに以下の設定を追加：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  // その他の設定...
};

module.exports = nextConfig;

4.2 Firebaseの設定

# Firebase CLIのインストール
npm install -g firebase-tools

# Firebaseへのログイン
firebase login

# Firebaseプロジェクトの初期化
firebase init hosting

# 静的ファイルのビルド
npm run build

# Firebaseへのデプロイ
firebase deploy --only hosting

5. 環境変数の管理

5.1 本番環境用の環境変数の設定

Cloud Runの場合：

gcloud run services update chat-app \
  --set-env-vars="NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>,NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>"

App Engineの場合：

# app.yamlファイルの環境変数セクションを編集
env_variables:
  NEXT_PUBLIC_SUPABASE_URL: "<your-supabase-url>"
  NEXT_PUBLIC_SUPABASE_ANON_KEY: "<your-supabase-anon-key>"

5.2 シークレット管理（オプション）

機密性の高い環境変数の場合、Secret Managerを使用することをお勧めします：

# シークレットの作成
echo -n "<your-secret-value>" | gcloud secrets create supabase-anon-key --data-file=-

# Cloud Runサービスにシークレットをマウント
gcloud run services update chat-app \
  --add-secret="SUPABASE_ANON_KEY=supabase-anon-key:latest"

6. カスタムドメインの設定（オプション）

6.1 Cloud Runにカスタムドメインを設定

# ドメインのマッピング
gcloud run domain-mappings create --service=chat-app \
  --domain=<your-domain.com> --region=us-central1

6.2 DNSレコードの設定

Cloud Runが提供するDNSレコードをドメインプロバイダーのDNS設定に追加します。

7. CI/CDパイプラインの設定（オプション）

7.1 Cloud Buildを使用した自動デプロイ

cloudbuild.yamlファイルをプロジェクトルートに作成：

steps:
  # Dockerイメージのビルド
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/chat-app', '.']
  
  # イメージのプッシュ
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/chat-app']
  
  # Cloud Runへのデプロイ
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args:
      - 'run'
      - 'deploy'
      - 'chat-app'
      - '--image'
      - 'gcr.io/$PROJECT_ID/chat-app'
      - '--platform'
      - 'managed'
      - '--region'
      - 'us-central1'
      - '--allow-unauthenticated'

images:
  - 'gcr.io/$PROJECT_ID/chat-app'

7.2 GitHubとの連携

Cloud BuildトリガーをGitHubリポジトリに接続して、コードがプッシュされるたびに自動的にデプロイするように設定できます。

8. モニタリングとロギング

8.1 Cloud Loggingの設定

# ログの表示
gcloud logging read "resource.type=cloud_run_revision AND resource.labels.service_name=chat-app" --limit=10

8.2 Cloud Monitoringのアラート設定

GCPコンソールで「Monitoring」→「Alerting」に移動し、エラー率やレイテンシーに基づいたアラートを設定します。

実装詳細

フロントエンド

• ChatInterface.tsx: メインのチャットUIコンポーネント。メッセージの表示と入力フォームを提供。
• ChatContext.tsx: Reactコンテキストを使用したメッセージ状態管理。Supabaseとの連携機能を含む。

バックエンド

• supabase.ts: Supabaseクライアントの設定と接続関数。
• route.ts (api/chat): チャットメッセージを処理するAPIエンドポイント。
• route.js (api/messages): メッセージの取得と保存を行うAPIエンドポイント。

Supabase MCP

Supabase MCPは、AIアシスタントとSupabaseプロジェクトを接続するためのプロトコルです。このプロジェクトでは、自然言語によるデータベース情報抽出機能を実装するために使用しています。

ライセンス

MIT

作者

[Your Name]