本稿は、前回作成した Vite + React + TypeScript の Auth0 SPA を「コンテナ化 → Kubernetes（ローカル環境） デプロイ → Ingress で公開」し、Auth0 側のコールバックURL設定までをまとめたものです。
なお、ローカル環境のKubernetesはOrbStack(2.0.4)を使用して起動しています。
1. コンテナ化（Dockerfile でマルチステージ）
ビルドは Node、配信は Nginx の2段構成にしました。
17:/Users/tarouco/train/tratin2/orbstack/auth0-train/Dockerfile
# --- Build stage -------------------------------------------------------------
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --prefer-offline --no-audit --no-fund
COPY . .
RUN npm run build
# --- Runtime stage (nginx) ---------------------------------------------------
FROM nginx:1.27-alpine AS runtime
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
-
COPY --from=builder /app/dist/ ...が重要。ビルド成果物だけを最終イメージにコピーし、Node やnode_modulesは持ち込まないため軽量・安全。 -
.dockerignoreでnode_modules,dist,.git等を除外。
ビルド:
cd auth0-train
docker build -t auth0-train:local .
TypeScript で import.meta.env 型エラーが出たら、src/vite-env.d.ts に次を用意（済み）。
/// <reference types="vite/client" />
2. Kubernetes マニフェスト
Deployment と Service はシンプルに port 80 を公開。Ingress で外部から到達させます。
Ingress は学習用に HTTP の localhost をホスト名として使用。
22:/Users/tarouco/train/tratin2/orbstack/auth0-train/k8s/ingress.yml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
name: auth0-train
annotations:
kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/ssl-redirect: "false" # 学習用: HTTPでアクセス
spec:
rules:
- host: localhost
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: auth0-train
port:
number: 80
適用とアクセス:
kubectl apply -f k8s/deployment.yml -f k8s/service.yml -f k8s/ingress.yml
kubectl get pods,svc,ingress -l app=auth0-train
# ブラウザ: http://localhost
3. Auth0 側の URI 設定（ローカル学習）
Auth0 アプリ（SPA）の設定で、以下を追加（既存の http://localhost:5173 は残してOK）。
- Allowed Callback URLs:
http://localhost - Allowed Logout URLs:
http://localhost - Allowed Web Origins:
http://localhost
ポイント: localhost 以外の任意ドメイン（例: hello.k8s.orb.local）を使う場合、Auth0 は HTTPS を要求します。そのため今回はでは TLS 準備を省くために http://localhost を採用しています。
4. ログイン時のリクエスト経路
- ブラウザ
http://localhost→ Ingress → Service → Pod(Nginx) →index.html - SPA の
Auth0Providerが Auth0 のauthorizeにリダイレクト - Universal Login で認証 → 同意（Consent/Authorize App）
-
http://localhost/?code=...&state=...に戻る - SPA が PKCE でトークン交換 → ログイン完了（
isAuthenticated=true）
シーケンス図（Mermaid）:
同意画面をスキップしたい場合は、Tenant Settings → OAuth で「Skip Consent for First-Party Applications」を有効化。
なお、本画面は以下の条件のため表示されました。
- 既定スコープ（openid/profile/email）へのアクセス許可をユーザーに確認している
- テナント設定で「First-Party の同意スキップ」が無効だと表示されます