thechrisgrey

thechrisgrey.com

Christian Perez（@thechrisgrey）の個人ウェブサイト | Altivum Inc. 創業者兼 CEO | 元グリーンベレー（第18特殊部隊群 衛生軍曹）| ブロンズスター章受章者 | The Vector Podcast ホスト | 『Beyond the Assessment』著者

https://thechrisgrey.com

---

目次

• 技術スタック
• 機能
• アーキテクチャ
• AWS インフラストラクチャ
• はじめに
• テスト
• 環境変数
• デプロイ
• プロジェクト構成
• 主なインテグレーション
• デザインシステム
• ライセンス

---

技術スタック

レイヤー	技術
フロントエンド	React 19、TypeScript 5、Vite 5（Vitest 4、ESLint 10 flat config）
スタイリング	Tailwind CSS 4（CSSファーストの @theme 設定、Oxide エンジン）
ルーティング	React Router 7
CMS	Sanity.io（ブログコンテンツ）
AI チャット	Amazon Bedrock（Claude Haiku 4.5）+ RAG
認証	Amazon Cognito（管理パネル）
ホスティング	AWS Amplify
CDN／分析	Cloudflare Web Analytics
テスト	Vitest + React Testing Library + Cypress
コード品質	ESLint、厳格な TypeScript

---

機能

ページ

• ホーム：プロフィールセクションを固定表示する、スクロールベースのアニメーション
• 概要：個人の略歴と軍歴
• Altivum Inc：企業紹介とサービス
• The Vector Podcast：YouTube の埋め込み、Spotify プレーヤー、折りたたみ可能なエピソード一覧
• Beyond the Assessment：書籍情報と購入リンク
• ブログ：カテゴリー、タグ、シリーズ、読書進捗を備えた Sanity CMS 対応
• AI チャット：RAG で応答を強化する、全画面表示の対話型 AI
• Claude：AWS 認定資格と Claude の専門知識を紹介
• AWS：AWS パートナーシップと Community Builder プロフィール
• 管理：Cognito 認証によるナレッジベース管理とサイト健全性ダッシュボード
• リンク：Linktree スタイルのクイックリンク
• お問い合わせ：お問い合わせフォーム、講演トピック、ダウンロード可能なプレスキット

技術的な特徴

• SEO：JSON-LD 構造化データ、Open Graph、動的サイトマップ、RSS フィード
• RAG を使用した AI チャット：Bedrock ナレッジベースから情報を取得し、ストリーミング応答を返します
• ポッドキャストの自動同期：YouTube Data API を使用して、ビルド時にエピソードを取得します
• チャットウィジェット：すべてのページで利用できるフローティングチャットウィジェット
• メトリクスダッシュボード：CloudWatch と DynamoDB を基盤とする運用メトリクス
• エラーバウンダリ：ページ単位のエラー処理とカスタムフォールバック UI
• アクセシビリティ：フォーカストラップ、キーボード操作、ARIA ラベル、スキップリンク
• パフォーマンス：画像最適化（Sharp/SVGO）、遅延読み込み、コード分割、手動チャンク分割

---

アーキテクチャ

┌─────────────────────────────────────────────────────────────────┐
│                        FRONTEND (React)                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐           │
│  │   Home   │ │  Podcast │ │   Blog   │ │   Chat   │   ...     │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘           │
└─────────────────────────────────────────────────────────────────┘
        │               │              │              │
        ▼               ▼              ▼              ▼
┌───────────┐   ┌───────────┐   ┌───────────┐   ┌───────────────┐
│  Amplify  │   │  YouTube  │   │  Sanity   │   │    Bedrock    │
│  Hosting  │   │  Data API │   │    CMS    │   │  + RAG (KB)   │
└───────────┘   └───────────┘   └───────────┘   └───────────────┘
                (build-time)     (runtime)       (Lambda stream)

AI チャットのリクエストフロー

User Message
    │
    ▼
Lambda Function URL (streaming)
    │
    ├──> Bedrock Knowledge Base (retrieve context)
    │         │
    │         ▼
    │    S3 Vectors (autobiography chunks)
    │
    ├──> Bedrock Guardrails (content filtering)
    │
    └──> Bedrock ConverseStream API (Claude Haiku 4.5)
              │
              ▼
         Streaming Response -> Client

---

AWS インフラストラクチャ

サービス	リソース	リージョン	用途
Amplify	d3du8eg39a9peo	us-east-2	ホスティング、CI/CD
Lambda	thechrisgrey-chat-stream	us-east-1	AI チャットのストリーミング
Lambda	thechrisgrey-contact-email	us-east-2	お問い合わせフォーム
Lambda	thechrisgrey-newsletter-subscription	us-east-2	ニュースレター
Lambda	thechrisgrey-kb-sync	us-east-1	S3 の変更時に KB を自動同期
Lambda	thechrisgrey-kb-builder	us-east-1	KB の管理用 CRUD 操作
Lambda	thechrisgrey-metrics	us-east-1	メトリクスの収集とレポート
Bedrock KB	ARFYABW8HP	us-east-1	RAG ナレッジベース
Cognito	User Pool	us-east-1	管理者認証
S3	thechrisgrey-kb-source	us-east-1	KB ソースドキュメント
S3	thechrisgrey-vectors	us-east-1	ベクトル埋め込み
DynamoDB	thechrisgrey-chat-ratelimit	us-east-1	レート制限（20 req/hr/IP）
Secrets Manager	thechrisgrey/youtube-api-key	us-east-1	YouTube API キー
CloudWatch	tcg-AI-chat	us-east-1	Bedrock 呼び出しログ

---

はじめに

前提条件

• Node.js 20.x（.nvmrc を参照）
• npm
• AWS CLI（デプロイ用）

インストール

git clone https://github.com/thechrisgrey/thechrisgrey.git
cd thechrisgrey
npm install

開発

npm run dev             # Start dev server at http://localhost:5173
npm run build           # Full production build
npm run preview         # Preview production build
npm run lint            # Run ESLint

ビルドパイプライン

本番ビルドでは、以下の手順を順番に実行します。

validate-env -> podcast-episodes -> lint -> tsc -> vite build -> sitemap -> rss

---

テスト

フレームワーク	対象	コマンド
Vitest	単体テスト＋統合テスト	npm test
Vitest	ウォッチモード	npm run test:watch
Vitest	カバレッジレポート	npm run test:coverage
Cypress	E2E（ヘッドレス）	npm run cy:run
Cypress	E2E（対話型）	npm run cy:open
node:test	Lambda の単体テスト＋契約テスト	npm run test:lambda

テストスイートには、コンポーネント、フック、ユーティリティの単体テスト、ページ単位の動作に関する統合テスト、ナビゲーション、チャット、ブログ、お問い合わせのフローを対象とするエンドツーエンドテストが含まれています。

ライブ API コントラクトテスト（オプトイン）

重要な外部境界である Cognito 管理者認証、ライブ Sanity クライアント、Bedrock ナレッジベース検索、Bedrock ガードレールも、オプトイン式のコントラクトテストでカバーしており、実際のサービスをテストします（正常に動作するモックだけでは、実態とのずれが生じることがあります）。これらのテストは npm run test:lambda と CI では正常にスキップされ、フラグと AWS／Sanity の認証情報がそろっている場合にのみ実行されます。

COGNITO_CONTRACT_TESTS=1 COGNITO_CLIENT_ID=… COGNITO_TEST_EMAIL=… COGNITO_TEST_PASSWORD=… \
  node --test lambda/shared/__tests__/cognito-contract.test.mjs
SANITY_CONTRACT_TESTS=1      node --test lambda/chat-stream/__tests__/sanity-contract.test.mjs
KB_RETRIEVE_CONTRACT_TESTS=1 node --test lambda/chat-stream/__tests__/kb-retrieve-contract.test.mjs
BEDROCK_CONTRACT_TESTS=1     node --test lambda/blueprint/__tests__/guardrail-contract.test.mjs

フラグと必要な権限の全一覧は .env.example を参照してください。ユニットテストのモックでは検出できないレスポンス形式やスキーマのずれを把握するため、リリース前（または定期実行ジョブで）にこれらのテストを実行してください。

---

環境変数

AWS Amplify コンソールまたはローカルの .env ファイルで設定します。

変数	説明	必須
VITE_CHAT_ENDPOINT	AI チャット用 Lambda Function URL	はい
VITE_CONTACT_ENDPOINT	お問い合わせフォーム用 Lambda Function URL	はい
VITE_NEWSLETTER_ENDPOINT	ニュースレター用 Lambda Function URL	はい
VITE_COGNITO_USER_POOL_ID	Cognito ユーザープール ID（管理者認証）	はい
VITE_COGNITO_CLIENT_ID	Cognito アプリクライアント ID	はい
VITE_KB_BUILDER_ENDPOINT	ナレッジベース管理用 Lambda Function URL	はい
VITE_CHAT_SIGNING_KEY	チャットリクエスト用 HMAC 署名キー	はい
VITE_METRICS_ENDPOINT	メトリクス用 Lambda Function URL	はい
YOUTUBE_API_KEY	YouTube Data API v3 キー（ビルド時のみ）	はい

VITE_ が付いた変数はフロントエンドにバンドルされます。YOUTUBE_API_KEY はビルド手順中にのみ使用されます。

---

デプロイ

自動（推奨）

main にプッシュすると、Amplify のデプロイが自動的に開始されます。

git push origin main

手動での再ビルド

aws amplify start-job \
  --app-id d3btl94rm91y13 \
  --branch-name main \
  --job-type RELEASE \
  --region us-east-2 \
  --profile personal-dev   # Delta Centric 512880383078, the site's home

Lambda のデプロイ

各 Lambda 関数は、検証済みの単一スクリプトを使って個別にデプロイされます。このスクリプトはロックファイルからインストールし、lambda-shared シンボリックリンクをバンドル内で参照先に置き換え、アップロード前にモジュールグラフ全体の解決を検証します。これにより、コールドスタート時にクラッシュする Lambda がデプロイされることはありません。

# Verify the bundle builds and resolves, without uploading:
npm run deploy:lambda -- chat-stream --dry-run

# Deploy for real (runs as profile personal-dev and refuses unless the caller
# account is Delta Centric 512880383078):
npm run deploy:lambda -- chat-stream

lambda/ 配下の任意の Lambda（例：chat-stream、blueprint、kb-builder、metrics、kb-sync、mcp-server）で動作します。デフォルト（us-east-1）を上書きするには、--region <r> を渡します。function.zip を手作業で作成しないでください。手動の zip グロブでは、各ハンドラーがインポートする兄弟モジュールが除外され、破損した成果物が生成されます。

---

プロジェクト構成

thechrisgrey/
├── public/                          # Static assets (served as-is)
│   ├── assets/documents/            # Downloadable PDFs
│   ├── press-kit/                   # Press materials + archive
│   ├── .well-known/security.txt
│   ├── robots.txt
│   ├── og.png                       # Open Graph image
│   └── favicon.png
│
├── src/
│   ├── components/
│   │   ├── admin/                   # Admin panel (login, KB entries, site health)
│   │   ├── chat/                    # AI chat (message, input, suggestions, widget)
│   │   ├── ui/                      # Base UI (Button, FormInput, IconButton)
│   │   ├── Navigation.tsx
│   │   ├── Footer.tsx
│   │   ├── SEO.tsx                  # Meta tags + JSON-LD
│   │   ├── ErrorBoundary.tsx
│   │   ├── ErrorFallbacks.tsx
│   │   ├── EpisodeCard.tsx
│   │   ├── NewsletterForm.tsx
│   │   ├── ReadingProgressBar.tsx
│   │   └── ...
│   │
│   ├── pages/                       # Route-level page components
│   │   ├── Home.tsx, About.tsx, Altivum.tsx, Podcast.tsx
│   │   ├── BeyondTheAssessment.tsx, Blog.tsx, BlogPost.tsx
│   │   ├── Chat.tsx, Claude.tsx, AWS.tsx, Admin.tsx
│   │   ├── Contact.tsx, Links.tsx, Privacy.tsx
│   │   └── NotFound.tsx
│   │
│   ├── hooks/                       # Custom React hooks
│   │   ├── useAuth.ts               # Cognito authentication
│   │   ├── useChatEngine.ts         # Chat state and streaming
│   │   ├── useFocusTrap.ts          # Modal focus management
│   │   ├── useKbAdmin.ts            # KB admin operations
│   │   ├── usePageContext.ts        # Page-level context for chat
│   │   ├── useSessionStorage.ts     # Typed sessionStorage with Date revival
│   │   └── useSiteHealth.ts         # Site health monitoring
│   │
│   ├── sanity/                      # Sanity CMS client, queries, types, cache
│   ├── utils/                       # Typography, schemas, validators, web vitals
│   ├── constants/                   # Social links
│   ├── types/                       # TypeScript interfaces
│   ├── data/                        # Podcast episode data (generated + fallback)
│   ├── assets/                      # Optimized images (Vite processed)
│   │
│   ├── __tests__/
│   │   ├── integration/             # Page-level integration tests
│   │   └── setup.ts
│   │
│   ├── App.tsx                      # Routes, layout, error boundaries
│   ├── main.tsx                     # Entry point
│   └── index.css                    # Tailwind directives
│
├── lambda/
│   ├── shared/                      # Shared utilities (auth, rate limiting, response)
│   ├── chat-stream/                 # Bedrock streaming Lambda
│   ├── kb-sync/                     # Knowledge Base auto-sync
│   ├── kb-builder/                  # KB admin CRUD
│   └── metrics/                     # Metrics collection
│
├── scripts/
│   ├── validate-env.js              # Build-time env validation
│   ├── generate-podcast-episodes.js # YouTube API fetch
│   ├── generate-sitemap.js          # Sitemap from Sanity
│   └── generate-rss.js             # RSS feed from Sanity
│
├── cypress/                         # E2E tests
│   ├── e2e/                         # Test specs
│   ├── fixtures/                    # Test data
│   └── support/                     # Custom commands
│
├── docs/                            # Internal documentation and plans
├── .github/workflows/ci.yml        # GitHub Actions CI
├── amplify.yml                      # Amplify build config
├── tailwind.config.js
├── vite.config.ts
├── vitest.config.ts
├── cypress.config.ts
└── tsconfig.json

---

主な統合

Sanity CMS（ブログ）

• プロジェクト ID： k5950b3w | データセット： production
• カテゴリ、タグ、シリーズ、Portable Text 形式のリッチコンテンツを含むブログ記事を収録
• postCache.ts によるクライアント側キャッシュ（Date の復元機能付き）

YouTube Data API（ポッドキャスト）

エピソードはビルド時に @AltivumPress チャンネルから取得されます。

1. ビルド手順中に generate-podcast-episodes.js を実行
2. チャンネル、アップロード済み動画のプレイリスト、動画の詳細を取得
3. src/data/generatedEpisodes.json を生成
4. API を利用できない場合は静的データにフォールバック

Amazon Bedrock（AI チャット）

• モデル： Claude Haiku 4.5（us.anthropic.claude-haiku-4-5-20251001-v1:0）
• ナレッジベース： ARFYABW8HP（自伝のチャンク）
• ガードレール： 5kofhp46ssob（コンテンツフィルタリング）
• レート制限： IP ごとに 1 時間あたり 20 リクエスト（DynamoDB による管理）
• RAG 検索（クエリあたり 5 チャンク）を使用した、Lambda Function URL 経由のストリーミングレスポンス

Cloudflare Web Analytics

プライバシーに配慮し、Cookie を使用せず、個人データを収集しないアナリティクスです。

---

デザインシステム

カラーパレット

名前	Hex	用途
altivum-dark	#0A0F1C	背景
altivum-navy	#1A2332	カード、ナビゲーション
altivum-blue	#2E4A6B	アクセント
altivum-slate	#4A5A73	境界線、控えめな表示
altivum-silver	#9BA6B8	本文
altivum-gold	#C5A572	強調表示、CTA

タイポグラフィ

SF Pro Displayとシステムフォントのフォールバックを使用します。全体を通して極細のウェイト（200）です。src/utils/typography.tsで定義されています。

アニメーション

• animate-fade-in : ヒーローの表示（1.2s）
• animate-nav-fade-in : ナビゲーションの遅延表示（0.8s、2s delay）
• shimmer : 背景のきらめき効果
• widget-open : チャットウィジェットの展開（250ms）

---

ライセンス

Copyright 2026 Christian Perez. All rights reserved.

お問い合わせは、お問い合わせフォームをご利用いただくか、ウェブサイトからメールでご連絡ください。