infra(web): web/ ディレクトリ雛形(Bootstrap 5 + 認証 JS)

[win2cot]

Phase 1 Setup 1-5: web/ ディレクトリ雛形(Bootstrap 5 + 認証 JS)

概要

Phase 1 Sprint 0/1 で実装する Frontend(Bootstrap 5 + 素 JS の軽量 SPA)の skeleton を web/ 配下に作成する。index.html + Keycloak OIDC ログイン → API 呼び出し のミニマム雛形までを目標とする。

詳細仕様: docs/architecture/infrastructure-plan.md v5 §2 #3(Frontend Bootstrap 5 + 素 JS SPA、D 案)、§3.3。

背景

infrastructure-plan v5 で Frontend は Bootstrap 5 + 素 JS の軽量 SPA(D 案)に確定。S3 + CloudFront 配信(dev 環境では Phase 1 Sprint 2 Infra S2Infra-3 で構築)。

本 Issue は ローカルで動く skeleton までを作る。実装は Sprint 1 App 以降で機能拡張する。

実装内容

A. web/ ディレクトリ構造

web/
├── index.html          # ランディング / ログイン状態判定
├── js/
│   ├── auth.js         # Keycloak OIDC ログイン処理(keycloak-js 等)
│   └── api.js          # tasks-webapi 呼び出しラッパー(fetch + JWT)
├── css/
│   └── app.css         # アプリ固有の追加スタイル(最小)
└── vendor/
    └── bootstrap/      # Bootstrap 5 CSS/JS(CDN 参照 or local 配置)

B. index.html の最小実装

• Bootstrap 5 を CDN(or local)から読み込み
• ログイン状態判定 → 未ログインなら Keycloak へリダイレクト → ログイン後コールバック処理
• ログイン済みなら「Hello, ${user.name}」+ GET /api/auth/me 呼び出し結果を表示

C. auth.js の OIDC ログイン処理

• Keycloak JavaScript Adapter(keycloak-js)を使用、または直接 OIDC Authorization Code Flow を実装
• token 取得 → localStorage / sessionStorage 保存(Native 対応 + テナント切替で要設計、本 Issue では minimal)
• /api/auth/me 呼び出し時に Authorization: Bearer <token> を付与

D. ローカル配信方式

開発者は以下のいずれかで動作確認:

• index.html を直接 file:// で開く(CORS で動かない場合あり、推奨しない)
• 軽量 HTTP サーバ(python3 -m http.server 5500 等)で http://localhost:5500/index.html から開く

E. application.yml の CORS 設定(必要なら)

Sprint 0 で webapi/ 側の CORS を許可する設定が必要(本 Issue 範囲では task 化のみ、実装は Sprint 0 で)。

受入条件

• web/ 配下に index.html / js/auth.js / js/api.js / css/app.css の skeleton が存在
• Bootstrap 5 が読み込まれ、画面が崩れない
• 軽量 HTTP サーバで index.html を配信し、ブラウザで開ける
• (Setup 1-1/1-2 完了後)Keycloak のログインフォームへリダイレクト → ログイン → callback 戻りまで動作
• ログイン後、JWT を取得し Authorization: Bearer <token> 付きで API call できる(API 自体は未実装でも OK、network tab で確認)

想定影響範囲

• Sprint 0 App で /api/auth/me 実装後、E2E ログインテストの client 側として使う
• Sprint 1 App でテナント切替 UI を追加
• Sprint 2 Infra S2Infra-3 で S3 + CloudFront にデプロイ

関連

• 親 tracker Issue: [Phase 1 Infra] Setup 0-2 + Sprint 0-5 Infra ストリーム横断 tracker #206
• Milestone: Phase 1 Setup 1(due 2026-06-13)
• 並行可: Setup 1-1〜1-4 と独立に進められる(ただし login 動作確認には 1-1/1-2 完了が必要)
• 詳細仕様: docs/architecture/infrastructure-plan.md v5 §3.3 / §3.4

備考

• task-type: task-type:impl
• 優先度: priority/p1
• area: area/frontend

[claude-automation-impl]

実装着手宣言

方針サマリ

Issue #217 の実装を開始します。

作成するファイル

• web/index.html — Bootstrap 5 CDN + ログイン状態判定 + /api/auth/me 結果表示
• web/js/auth.js — keycloak-js(CDN) + Authorization Code Flow + PKCE(S256) + sessionStorage
• web/js/api.js — fetch ラッパー + Authorization: Bearer 自動付与
• web/css/app.css — 最小限の追加スタイル

Keycloak realm 更新

keycloak/realm-export/tasks-realm.json の redirectUris / webOrigins に http://localhost:5500(python3 -m http.server 5500 用)を追加。

設計判断

• Bootstrap 5 / keycloak-js は CDN 参照(vendor/ ローカル配置は Sprint 2 以降、skeleton 優先)
• PKCE S256 は Keycloak クライアント設定が既に有効なため auth.js 側でも対応
• token は sessionStorage 保存(localStorage はタブ間共有になりテナント切替で問題になるため)