314 lines
11 KiB
TypeScript
314 lines
11 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||
import { Loader2, Database, Eye, RefreshCw, AlertTriangle, CheckCircle } from 'lucide-react';
|
||
|
||
interface VercelIPInfo {
|
||
smartDetection: {
|
||
detectedIP: string;
|
||
confidence: 'high' | 'medium' | 'low';
|
||
source: string;
|
||
isPublicIP: boolean;
|
||
allCandidates: string[];
|
||
isInfrastructureIP?: boolean;
|
||
isUserRealIP?: boolean;
|
||
infrastructureIPs?: string[];
|
||
userRealIPs?: string[];
|
||
};
|
||
headers: Record<string, string | null>;
|
||
nextRequestIP: string | undefined;
|
||
env: Record<string, string | undefined>;
|
||
allHeaders: Record<string, string>;
|
||
}
|
||
|
||
export default function VercelIPDebugPage() {
|
||
const [ipInfo, setIpInfo] = useState<VercelIPInfo | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [message, setMessage] = useState<string>('');
|
||
const [error, setError] = useState<string>('');
|
||
|
||
// 獲取 IP 調試信息
|
||
const fetchIPInfo = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const response = await fetch('/api/debug-ip');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
setIpInfo(data.data);
|
||
|
||
if (data.data.smartDetection) {
|
||
const smartDetection = data.data.smartDetection;
|
||
setMessage(`Vercel IP 偵測結果: ${smartDetection.detectedIP} (可信度: ${smartDetection.confidence}, 來源: ${smartDetection.source})`);
|
||
} else {
|
||
setMessage('IP 調試信息更新成功');
|
||
}
|
||
setError('');
|
||
} else {
|
||
setError(data.error || '獲取 IP 調試信息失敗');
|
||
}
|
||
} catch (err) {
|
||
setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
// 組件載入時獲取 IP 信息
|
||
useEffect(() => {
|
||
fetchIPInfo();
|
||
}, []);
|
||
|
||
// 檢查是否為基礎設施 IP
|
||
const isInfrastructureIP = (ip: string): boolean => {
|
||
if (!ip) return false;
|
||
return ip.includes('ec2-') && ip.includes('.amazonaws.com');
|
||
};
|
||
|
||
// 檢查是否為用戶真實 IP
|
||
const isUserRealIP = (ip: string): boolean => {
|
||
if (!ip || ip === 'unknown') return false;
|
||
return !isInfrastructureIP(ip) && ip !== '::1' && ip !== '127.0.0.1';
|
||
};
|
||
|
||
return (
|
||
<div className="container mx-auto p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">Vercel IP 調試工具</h1>
|
||
<p className="text-muted-foreground">
|
||
專門用於調試 Vercel 部署環境中的 IP 偵測問題
|
||
</p>
|
||
</div>
|
||
<Button
|
||
onClick={fetchIPInfo}
|
||
disabled={loading}
|
||
variant="outline"
|
||
>
|
||
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
|
||
重新整理
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 智能偵測結果 */}
|
||
{ipInfo?.smartDetection && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Eye className="h-5 w-5" />
|
||
智能 IP 偵測結果
|
||
</CardTitle>
|
||
<CardDescription>
|
||
系統智能偵測的客戶端 IP 地址（已過濾基礎設施 IP）
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center gap-4">
|
||
<Badge
|
||
variant={
|
||
isUserRealIP(ipInfo.smartDetection.detectedIP) ? "default" :
|
||
isInfrastructureIP(ipInfo.smartDetection.detectedIP) ? "destructive" : "secondary"
|
||
}
|
||
className="text-lg px-3 py-1"
|
||
>
|
||
{ipInfo.smartDetection.detectedIP}
|
||
</Badge>
|
||
<Badge
|
||
variant={
|
||
ipInfo.smartDetection.confidence === 'high' ? "default" :
|
||
ipInfo.smartDetection.confidence === 'medium' ? "secondary" : "destructive"
|
||
}
|
||
className="text-lg px-3 py-1"
|
||
>
|
||
可信度: {ipInfo.smartDetection.confidence}
|
||
</Badge>
|
||
<Badge variant="outline" className="text-lg px-3 py-1">
|
||
來源: {ipInfo.smartDetection.source}
|
||
</Badge>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<p className="text-sm font-medium mb-2">用戶真實 IP:</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{ipInfo.smartDetection.userRealIPs?.map((ip, index) => (
|
||
<Badge
|
||
key={index}
|
||
variant="default"
|
||
className="text-sm"
|
||
>
|
||
{ip}
|
||
</Badge>
|
||
)) || <span className="text-muted-foreground text-sm">無</span>}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="text-sm font-medium mb-2">基礎設施 IP (已過濾):</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{ipInfo.smartDetection.infrastructureIPs?.map((ip, index) => (
|
||
<Badge
|
||
key={index}
|
||
variant="destructive"
|
||
className="text-sm"
|
||
>
|
||
{ip}
|
||
</Badge>
|
||
)) || <span className="text-muted-foreground text-sm">無</span>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 請求標頭分析 */}
|
||
{ipInfo && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>請求標頭分析</CardTitle>
|
||
<CardDescription>
|
||
分析各種 HTTP 標頭中的 IP 信息
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{Object.entries(ipInfo.headers).map(([key, value]) => {
|
||
if (!value) return null;
|
||
|
||
const isInfra = isInfrastructureIP(value);
|
||
const isUser = isUserRealIP(value);
|
||
|
||
return (
|
||
<div key={key} className="flex items-center justify-between p-3 border rounded">
|
||
<div className="flex-1">
|
||
<span className="font-medium text-sm">{key}:</span>
|
||
<div className="mt-1">
|
||
<Badge
|
||
variant={
|
||
isUser ? "default" :
|
||
isInfra ? "destructive" : "outline"
|
||
}
|
||
className="text-sm"
|
||
>
|
||
{value}
|
||
</Badge>
|
||
<div className="flex gap-2 mt-1">
|
||
{isUser && <Badge variant="default" className="text-xs">用戶真實 IP</Badge>}
|
||
{isInfra && <Badge variant="destructive" className="text-xs">基礎設施 IP</Badge>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 環境信息 */}
|
||
{ipInfo && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>部署環境信息</CardTitle>
|
||
<CardDescription>
|
||
Vercel 部署環境相關信息
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-2">
|
||
{Object.entries(ipInfo.env).map(([key, value]) => (
|
||
<div key={key} className="flex items-center justify-between p-2 border rounded">
|
||
<span className="font-medium text-sm">{key}:</span>
|
||
<span className="text-sm text-muted-foreground">
|
||
{value || 'undefined'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* 問題診斷 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<AlertTriangle className="h-5 w-5" />
|
||
問題診斷
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{ipInfo?.smartDetection && (
|
||
<>
|
||
{isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
<strong>問題:</strong> 偵測到的是 Vercel/AWS 基礎設施 IP，不是用戶真實 IP。
|
||
<br />
|
||
<strong>解決方案:</strong> 檢查 x-forwarded-for 標頭中是否包含用戶真實 IP。
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{isUserRealIP(ipInfo.smartDetection.detectedIP) && (
|
||
<Alert>
|
||
<CheckCircle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
<strong>正常:</strong> 成功偵測到用戶真實 IP。
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{!isUserRealIP(ipInfo.smartDetection.detectedIP) && !isInfrastructureIP(ipInfo.smartDetection.detectedIP) && (
|
||
<Alert variant="destructive">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
<strong>問題:</strong> 無法偵測到有效的用戶 IP。
|
||
<br />
|
||
<strong>可能原因:</strong> 代理配置問題或網路環境限制。
|
||
</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 使用說明 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>使用說明</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2 text-sm text-muted-foreground">
|
||
<p>• <strong>基礎設施 IP:</strong> Vercel/AWS 的服務器 IP，不是用戶真實 IP</p>
|
||
<p>• <strong>用戶真實 IP:</strong> 實際訪問網站的用戶 IP 地址</p>
|
||
<p>• <strong>x-forwarded-for:</strong> 通常包含用戶真實 IP，格式為 "用戶IP,代理IP"</p>
|
||
<p>• <strong>問題排查:</strong> 如果偵測到基礎設施 IP，檢查代理配置</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 訊息顯示 */}
|
||
{message && (
|
||
<Alert>
|
||
<Database className="h-4 w-4" />
|
||
<AlertDescription>{message}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
|
||
{error && (
|
||
<Alert variant="destructive">
|
||
<Eye className="h-4 w-4" />
|
||
<AlertDescription>{error}</AlertDescription>
|
||
</Alert>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|