GenU のフロントエンド (Vite + React) 詳細解説　①ビルドとルーティング

Last updated at 2025-03-31Posted at 2025-03-31

はじめに

皆さん、こんにちは。

私は業務でデータ利活用基盤を取り扱っていること、2024 AWS Japan Top Engineer に選出されたということから、AWS GenU およびそれに必要なデータ基盤の探求 (Snowflake, dbt, Iceberg, etc) に取り組む必要があると考えています。

本投稿では、GenU のバックエンドである CDK コードを詳細に解説します。
自身そして閲覧して頂いた皆様の GenU への理解が少しでも深まり、生成 AI の民主化につながっていければと考えています。

GenU とは

GenU は生成 AI を安全に業務活用するための、ビジネスユースケース集です。
バックエンドは AWS で、フロントエンドは Vite + React で動作します。

2025/3/10 時点の GenU のバックエンドについては、14 回に分けて解説していますので、詳しく知りたい方はお読みいただけると嬉しいです。

GenU のフロントエンド

GenU のフロントエンドは Vite + React で記述されています。フロントエンドのソースコードは CDK の中で S3 に配置され、CloudFront のオリジンとして構築されます。
利用者は CloudFront ディストリビューションの URL でアクセスできる他、CloudFront + Route 53 + ACM にて独自ドメインでアクセスできます。

Web アプリケーションの実体は packages/web 配下に格納されています。

web
├─public
│  └─images
├─src
│  ├─@types
│  ├─assets
│  ├─components
│  │  ├─useCaseBuilder
│  │  └─Writer
│  │      ├─extensions
│  │      ├─generative
│  │      ├─lib
│  │      ├─selectors
│  │      └─ui
│  ├─hooks
│  │  └─useCaseBuilder
│  ├─pages
│  │  └─useCaseBuilder
│  ├─prompts
│  │  └─diagrams
│  └─utils
└─tests
    └─use-case-builder

なお、この記事に記載のコードは、あくまでもこの記事の執筆時点（2025/3/31）のもの であることにご留意ください。

GenU フロントエンドのビルド

GenU フロントエンドのビルドは、CDK で定義します。
この記事で説明した通り、実行ディレクトリは packages/cdk/で、npm run web:build コマンドを実行します。

packages/cdk/lib/construct/web.ts

    const build = new NodejsBuild(this, 'BuildWeb', {
      /* 省略 */
      destinationBucket: s3BucketInterface,
      distribution: cloudFrontWebDistribution,
      outputSourceDirectory: './packages/web/dist',
+     buildCommands: ['npm ci', 'npm run web:build'],
      /* 省略 */
    });

web:build コマンドは VITE_APP_VERSION=${npm_package_version} npm -w packages/web run build -- を実行するため、要は packages/web/package.json の build を実行します。

以下が package.json のソースコードです。

packages/web/package.json

{
  "name": "web",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
+   "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest run"
  },
  "dependencies": {
    // 省略
  },
  "devDependencies": {
    // 省略
  }
}

tsc && vite build を実行しています。

さらに、vite build コマンドの実行結果を web.ts の outputSourceDirectory: './packages/web/dist' で指定する通り packages/web/dist に出力します。

また、web.ts の中で destinationBucket として CloudFrontToS3 が自動作成する S3 バケットを指定することで、S3 にアップロードされます。

最後に、web.ts の中で distribution として CloudFrontToS3 が自動作成する CloudFront ディストリビューションを指定することで、CloudFront + S3 でホストされます。

GenU フロントエンドのルーティング

GenU フロントエンドのルーティングを解説します。
GenU フロントエンドは SPA で構成されており、web/src/main.tsx にルーティング情報が書かれています。

GenU ユースケースページ (web/src/App.tsx)
- パス: React コンポーネント
- /: LandingPage ※デフォルトページ
- /setting: Setting
- /chat: ChatPage
- /chat/:chatId: ChatPage
- /share/:shareId: SharedChatPage
- /generate: GenerateTextPage
- /summarize: SummarizePage
- /writer: WriterPage
- /translate: TranslatePage
- /web-content: WebContent
- /image: GenerateImagePage
- /video: GenerateVideoPage
- /diagram: GenerateDiagramPage
- /optimize: OptimizePromptPage
- /transcribe: TranscribePage
- /flow-chat: FlowChatPage
- /videoAnalyzer: VideoAnalyzerPage
- /rag: RagPage
- /rag-knowledge-base: RagKnowledgeBasePage
- /agent: AgentChatPage
- /agent/:agentName: RagPage
- /rag: AgentChatPage
GenU ユースケースビルダーページ (web/src/UseCaseBuilderRoot.tsx)
- パス: React コンポーネント
- /use-case-builder: UseCaseBuilderSamplesPage
- /use-case-builder/my-use-case: UseCaseBuilderMyUseCasePage
- /use-case-builder/new: UseCaseBuilderEditPage
- /use-case-builder/edit/:useCaseId: UseCaseBuilderEditPage
- /use-case-builder/execute/:useCaseId: UseCaseBuilderExecutePage
- /use-case-builder/setting: Setting
上記以外
- NotFound

これらの URL で遷移できない場合は、該当のユースケースがデプロイされていない可能性があるため、デプロイオプションを再度確認してみてください。

今回は以上です。
次回はページごとの詳細仕様を解説していきます。

(参考) GenU のバックエンド (CDK) 詳細解説投稿一覧

(参考) GenU のデプロイオプション詳細解説投稿一覧

GenU のデプロイオプション詳細解説

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

GenU のフロントエンド (Vite + React) 詳細解説 ①ビルドとルーティング