roop

Haruki UESHIMA
Bachelor 3

セットアップ手順書

前提条件

  • Azureアカウント・サブスクリプションあり
  • GitHubアカウントあり
  • Node.js 22以上インストール済み
  • VSCode等のエディタ

1. Azureリソース作成

リソースグループ

  • リージョン：Japan East

VNet

  • アドレス空間：10.0.0.0/16
  • サブネット1：App Service用（10.0.1.0/24）プライベートサブネット有効
  • サブネット2：DB用（10.0.2.0/24）プライベートサブネット有効

App Service

  • ランタイム：Node.js 22 LTS / Linux
  • リージョン：Japan East
  • プラン：Premium V3 P0V3（B1はクォータ不足になる場合あり）
  • ネットワーク → VNet統合 → App Service用サブネットを選択
  • スタートアップコマンド：node server.js

Azure Database for PostgreSQL フレキシブルサーバー

  • リージョン：Japan East
  • バージョン：16
  • ワークロード：Dev/Test
  • コンピューティング：B1ms
  • 認証：PostgreSQLとMicrosoft Entra認証
  • ネットワーク：プライベートアクセス（VNet統合）→ DB用サブネットを選択
  • 注意：ネットワーク接続方法は作成後変更不可

2. GitHubリポジトリ・Next.jsプロジェクト作成

  • GitHubでPrivateリポジトリ作成（.gitignore：Node）
  • Next.jsプロジェクトを作成（TypeScript・ESLint・Tailwind・src/・App Router・Import Alias有効、React Compiler無効）
  • next.config.ts に output: 'standalone' を追加
  • .env を .gitignore に追加
  • GitHubにpush

3. GitHub Actionsデプロイ設定

  • App Serviceの発行プロファイルをダウンロード
  • GitHubシークレットに AZUREAPPSERVICE_PUBLISHPROFILE として登録
  • ワークフローファイルを作成：
    • Node.js 22でビルド
    • standaloneフォルダに static・public・prismaをコピー
    • .next/standalone をApp Serviceにデプロイ
  • pushして動作確認

4. Prisma設定

  • prisma@6 と @prisma/client@6 をインストール（7系は設定方法が異なるため6系固定）
  • npx prisma init でschema.prismaを生成
  • schema.prismaにSummaryモデルを定義（id・company・role・product・summary・createdAt）
  • App Serviceの環境変数に DATABASE_URL を設定

5. DBの初期化

  • src/app/api/seed/route.ts を作成
    • POSTリクエストでテーブル作成（CREATE TABLE IF NOT EXISTS）とテストデータ投入を行う
  • pushしてデプロイ後にcurlでPOSTリクエストを送信
  • 成功確認後、seedファイルを削除してpush

6. API・ライブラリ作成

  • src/lib/db.ts：Prismaクライアントのシングルトン
  • src/app/api/summaries/route.ts：company・role・productでDB検索するGETエンドポイント
  • src/app/page.tsx：会社名・役職・商品を入力して検索するフォーム画面

注意点・ハマりポイント

  • npx create-next-app はリポジトリのルートで . を指定して実行（入れ子に注意）
  • App ServiceはPremium V3以上でないとVNet統合が使えない場合あり（クォータ申請が必要なこともある）
  • Prismaは必ず6系を使う（7系はschema.prismaの書き方が変わる）
  • standaloneビルドでは node_modules/.bin/prisma が含まれないため、スタートアップコマンドでのマイグレーション自動化は工夫が必要
  • .env は絶対にGitHubにpushしない
  • seedエンドポイントは使用後すぐに削除する

タスク一覧

✅ 比較的簡単に実現可能なタスク

  •  seedエンドポイントの削除
  •  Entra認証の設定（App Service → 認証 → IDプロバイダー追加）
  •  OpenAI APIキーをApp Serviceの環境変数に登録
  •  /api/session エンドポイント作成（エフェメラルキー発行）
  •  WebRTCの実装（useWebRTCフック）
  •  フロント画面の改善（ロールプレイ開始ボタンの実装）
  •  TanStack Queryの導入

⚠️ 要注意タスク

  • VPN Gateway (P2S) の設定
    • GatewaySubnetは作成済み
    • VPN Gateway作成中（30〜45分かかる）
    • 完成後にPoint-to-Site設定・証明書作成・クライアント設定が必要
    • 完成すればローカルから直接DB操作可能
  • DBマイグレーションの自動化
    • 現状：seedエンドポイント経由で手動
    • VPN Gateway完成後はローカルから npx prisma migrate deploy で実行可能
    • 将来的にはSelf-hosted Runner経由での自動化が理想
  • 環境変数の管理
    • 現状：App Serviceの環境変数に直接設定
    • DATABASE_URL と OPENAI_API_KEY が対象
    • 将来的にはAzure Key Vaultでの管理が理想