该项目是一个简单的前端界面,基于IP-Query-BackEnd后端api自建的ip查询单页面应用
ip查询api后端部署参考: https://linux.do/t/topic/232947
代码:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
function getIPAddress() {
if(!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
}
elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}
else{
$ip = $_SERVER['REMOTE_ADDR'];
}
return $ip;
}
function isValidIP($ip) {
return filter_var($ip, FILTER_VALIDATE_IP) !== false;
}
function getIPInfo($ip) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://替换IP-Query-BackEnd地址,xxx.hf.space/".$ip);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);
return $response;
}
$ip = '';
if (isset($_GET['ip'])) {
$ip = $_GET['ip'];
} else {
$ip = getIPAddress();
}
if (isValidIP($ip)) {
$ipInfo = getIPInfo($ip);
echo $ipInfo;
} else {
$errorip = getIPAddress();
$erroripInfo = getIPInfo($errorip);
echo $erroripInfo;
}
?>
vercel部署需要配置环境变量NEXT_PUBLIC_IPQUERYURL,详情参考vercel部署
- 首先fork该项目,按上述内容部署好IP查询api,并修改
app/page.tsx内的api地址为你部署的api地址 - 访问vercel官网选择Github注册或登陆
- 在vercel内的管理面板导入该项目,需要配置环境变量
NEXT_PUBLIC_IPQUERYURL,NEXT_PUBLIC_IPQUERYURL值说明:如果你是抱脸部署,不使用php反代,则直接填写https://xxx.hf.space/注意末尾带/,如果是使用php代理,则填写https://your-domain/your-php-file-name.php?ip=,然后即可点击部署,部署完成后到setting内环境变量检查NEXT_PUBLIC_IPQUERYURL是否添加成功,如果没有添加可以手动添加完成后再redeploy - 等待部署完成,绑定自己的域名即可enjoy