🌐 IP Insight

高级 IP 地址智能分析平台

一个基于 React + Vite + Cloudflare Workers 构建的现代化 IP 地址情报查询 Web 应用。
拥有精美玻璃态 UI、交互式地图、完整安全威胁分析，并支持 浅色 / 深色主题切换。

🔗 在线演示 · 🐛 报告问题 · 💡 功能建议

🌏 英文文档

---

📋 目录

• ✨ 功能特性
• 🏗️ 技术栈
• 📁 项目结构
• 🔧 本地开发
• 🚀 部署到 Cloudflare Workers
• 🔒 安全设计
• 📡 API 文档
• 📜 许可证
• 🙏 致谢

---

✨ 功能特性

🌍 IP 地理定位 🔄 支持 IPv4 / IPv6 双栈查询 📡 自动检测访客 IP 地址 📍 精确到 洲 → 国家 → 地区 → 城市 → 邮编 🗺️ Leaflet 交互式地图展示，支持浅色 / 深色地图切换 📐 经纬度坐标实时显示	🔌 网络与连接 🏷️ ASN（自治系统号）查询 🏢 ISP / 组织名称识别 📶 连接类型判定（hosting / residential 等） 🔗 反向 DNS（Hostname）解析
🛡️ 安全威胁分析 🔒 VPN 使用检测 🔄 代理服务器检测 🧅 Tor 出口节点检测 ⚠️ 已知威胁 IP 实时标记 🟢🔴 直观的安全状态指示器	🎨 UI / UX 设计 🌗 精美 Glassmorphism 设计，支持浅色 / 深色主题 ✨ 流畅入场动画 & 微交互效果 📱 完全响应式布局，移动端友好 🔤 Google Fonts Inter 字体 🎭 动态渐变背景光球
🕐 时区信息 🌐 时区 ID 与缩写 ⏱️ UTC 偏移量精确计算	💰 货币信息 💱 所在国家对应的货币代码 📛 货币名称与符号展示

---

🏗️ 技术栈

🏷️ 类别	🛠️ 技术	📌 版本
⚛️ 前端框架	React + TypeScript	19.x
⚡ 构建工具	Vite + vinext	7.x
🗺️ 地图引擎	Leaflet	1.9.x
☁️ 运行平台	Cloudflare Workers	Edge
📊 数据源	dklyIPdatabase	REST API
🎨 样式方案	Vanilla CSS	浅色 / 深色主题设计系统

---

📁 项目结构

IPs/
├── 📂 app/
│   ├── 📂 api/
│   │   └── 📂 ipinfo/
│   │       └── 📄 route.ts           # 🔌 服务端 API（代理 + 限流 + 验证）
│   ├── 📂 components/
│   │   └── 📄 IPDashboard.tsx        # 📊 主仪表盘组件
│   ├── 🎨 globals.css                # 🎨 全局样式与主题设计系统
│   ├── 📄 layout.tsx                 # 📐 根布局（字体、Leaflet CSS）
│   ├── 📄 page.tsx                   # 🏠 首页
│   └── 🖼️ favicon.ico
├── 📄 worker-entry.js                # ☁️ Cloudflare Worker 入口
├── 📦 package.json
├── 📄 tsconfig.json
├── ⚡ vite.config.ts                 # Vite + vinext 配置
├── ☁️ wrangler.jsonc                 # Cloudflare Workers 配置
└── 📄 next.config.js

---

🔧 本地开发

📋 前置条件

工具	最低版本	说明
	18+	JavaScript 运行时
	9+	包管理器
🔑 API Key	—	免费注册

📝 步骤

1️⃣ 克隆项目

git clone https://github.com/hiing/IPs.git
cd IPs

2️⃣ 安装依赖

npm install

3️⃣ 配置环境变量

创建 .env.local 文件：

IPINFO_API_KEY=你的_API_Key

Warning

🔐 请勿将 API Key 提交到版本控制中！

4️⃣ 启动开发服务器

npm run dev

5️⃣ 打开浏览器

访问 http://localhost:3000 🎉

---

🚀 部署到 Cloudflare Workers

📌 方式一：CLI 部署（推荐）

1️⃣ 登录 Cloudflare

npx wrangler login

2️⃣ 设置 API Key Secret

npx wrangler secret put IPINFO_API_KEY
# 在提示中输入你的 dklyIPdatabase API Key

3️⃣ 构建并部署

npx vinext build
npx wrangler deploy

Tip

🔁 后续更新只需重复第 3 步即可完成重新部署

📌 方式二：Cloudflare Dashboard

1. 🔑 登录 Cloudflare Dashboard

2. 📂 进入 Workers & Pages → Create

3. 🔗 连接你的 Git 仓库

4. ⚙️ 设置构建命令：

   配置项	值
   Build command	npm run build
   Build output	dist

5. 🔐 在 Settings → Environment Variables 中添加 IPINFO_API_KEY

6. 🚀 触发部署

---

🔒 安全设计

🛡️ 安全措施	📝 说明
🔐 API Key 保护	Key 仅存于服务端环境变量，前端完全不可见
⏱️ 速率限制	每 IP 每分钟最多 30 次请求，防止滥用
✅ 输入验证	严格的 IPv4/IPv6 正则格式校验，防止注入
💾 响应缓存	Cache-Control 策略降低上游 API 调用频率
🌐 CORS 隔离	通过服务端代理转发，避免跨域暴露 API 凭证

---

📡 API 文档

🔀 请求流程

🖥️ 客户端 → 📡 /api/ipinfo → 🔒 服务端（限流 + 验证） → 🌐 dklyIPdatabase API → 📦 返回结果

📥 请求示例

# 🔍 查询指定 IP
curl https://ips.away.workers.dev/api/ipinfo?ip=8.8.8.8

# 📡 查询访客自身 IP
curl https://ips.away.workers.dev/api/ipinfo

📤 响应示例

{
  "ip": "8.8.8.8",
  "type": "IPv4",
  "hostname": "dns.google",
  "connection": {
    "asn": 15169,
    "organization": "Google LLC",
    "type": "hosting"
  },
  "location": {
    "continent": { "code": "NA", "name": "North America" },
    "country": { "code": "US", "name": "United States", "flag": { "emoji": "🇺🇸" } },
    "region": { "code": "CA", "name": "California" },
    "city": "Mountain View",
    "postal": "94043",
    "latitude": 37.4056,
    "longitude": -122.0775
  },
  "time_zone": {
    "id": "America/Los_Angeles",
    "abbreviation": "PST",
    "offset": -28800
  },
  "currency": {
    "code": "USD",
    "name": "United States Dollar",
    "symbol": "$"
  },
  "security": {
    "is_vpn": false,
    "is_proxy": false,
    "is_tor": false,
    "is_threat": false
  }
}

📊 状态码

状态码	🏷️ 含义
✅ 200	请求成功
❌ 400	IP 格式无效
🚫 429	请求频率超限
💥 500	服务端配置错误（如 API Key 缺失）
🔌 502	上游 API 无响应

---

📜 许可证

本项目基于 MIT 许可证开源 📄

---

🙏 致谢

项目	说明
📊 dklyIPdatabase	IP 地理定位与安全分析数据 API
🗺️ Leaflet	开源轻量交互式地图库
⚡ vinext	Cloudflare 出品的 Vite + Next.js 框架
☁️ Cloudflare Workers	全球边缘计算运行平台
⚛️ React	用户界面组件库

---

由 hiing 用 ❤️ 制作