​
コアコンポーネント

フロントエンド

React + Vite。Firebase Authenticationでセッションを管理し、Rest APIへBearerトークンを付与。

バックエンドAPI

Express/Node.js。PostgreSQLとGravを操作し、Gemini APIへプロンプトを送信。

AI生成エンジン

Google Gemini 2.5 Flash Lite。Function Callingで差分編集・構造化レスポンスに対応。

CMS / ホスティング

Grav CMS + Nginx + CDN。生成したMarkdownを /var/www/grav/user/pages に書き出し配信。

データストア

PostgreSQL (ユーザー/サイト/チャット/サブスクリプション)。スクリーンショットや画像はファイルシステムに保存。

決済 / 認証

Stripe サブスクリプション / Firebase Auth。REST APIのミドルウェアでトークンを検証。

​
データフロー

1

ユーザー操作

ブラウザからチャット指示・編集・メディアアップロードを送信。Firebaseトークンがヘッダーに付与されます。
2

APIゲートウェイ

Expressが authenticateUser ミドルウェアでIDトークンを検証し、サイトIDに対する所有権チェックを実施。
3

生成と永続化

GeminiでHTML/Markdownを生成 → Gravディレクトリに保存 → PostgreSQLへメタデータを記録。
4

配信

NginxがGravを配信し、Cloudflare/CDNがキャッシュ。Puppeteerがサムネイルを作成しダッシュボードで表示。

​
データストア詳細

ストア主な用途備考
PostgreSQL (hirameki_web)ユーザー、ワークスペース、サイト、チャット、サブスク情報users, sites, chat_messages など
Grav CMS (/var/www/grav/user/pages)生成されたコンテンツ、メディア、メタデータ.sitemeta.json にSEO/Analytics設定を保持
Screenshot (/var/www/hirameki-web/screenshots)ダッシュボード用サムネイルcapture-screenshot エンドポイントで更新

​
外部サービスとの統合

  • Firebase Authentication: トークン検証、Authorized domains (app.hirameki-web.com)
  • Google Gemini API: GEMINI_API_KEY により生成を実行
  • Stripe: /api/create-checkout-session でサブスクリプションを開始
  • Unsplash: 画像検索APIをメディアピッカーに組み込み

​
運用と監視

  • pm2 で ai-web-builder-backend / ai-web-builder-frontend プロセスを常駐
  • backup-config.sh により .env などの設定を /root/ai_web_builder_backup/ に退避
  • ログ確認: pm2 logs ai-web-builder-backend、tail -f /var/log/nginx/error.log
  • 障害時は pm2 restart ai-web-builder-backend でリカバリ、必要に応じてGravキャッシュを削除 (rm -rf /var/www/grav/cache/*)