petty09190/ai-showcase-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增偵測 aws ec2 的 ip

Browse Source
This commit is contained in:
吳佩庭
2025-09-21 03:08:41 +08:00
parent b6356ed237
commit 8b3af6608e
5 changed files with 1012 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
app/vercel-ip-debug/page.tsx Normal file
View File

@@ -0,0 +1,313 @@
'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>
);
}