【怎么在手机上访问部署在电脑上的网页,不在一个局域网】

其实可以使用cloudefare提供的那个,支持使用自己的域名

百度回答

方法一:使用内网穿透工具(推荐)

通过工具如贝锐蒲公英或Ngrok,将本地服务映射到公网,手机直接访问生成的公网地址即可。无需公网IP,支持跨运营商访问。

方法二:远程桌面工具

在电脑端设置远程桌面(如Windows远程桌面),手机端安装对应客户端,通过输入电脑的公网IP和凭证连接。需注意网络稳定性和流量消耗。

方法三:VPN组网

在电脑端搭建VPN服务器(如OpenVPN),手机连接后形成虚拟局域网,即可访问电脑本地服务。适合技术基础较强的用户。

注意‌:公网访问需确保电脑防火墙放行对应端口,并注意网络安全风险。

ngrok config add-authtoken $YOUR_AUTHTOKEN

ngrok http 5000

python 代码

py 复制代码
# app.py
from flask import Flask, render_template_string, Response
from datetime import datetime
import time
import threading

app = Flask(__name__)

# 首页
HTML = """
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>实时时间 + 计算器</title>
<style>
    body{font-family:Arial,Helvetica,sans-serif;text-align:center;margin-top:40px;background:#f7f7f7;}
    #clock{font-size:48px;margin-bottom:30px;}
    .calc{border-collapse:collapse;margin:0 auto 20px;}
    .calc td{padding:0;}
    .calc button{width:70px;height:60px;font-size:22px;border:1px solid #bbb;background:#fff;cursor:pointer;}
    .calc button:active{background:#ddd;}
    #display{width:100%;height:60px;font-size:28px;text-align:right;padding:0 10px;box-sizing:border-box;}
</style>
</head>
<body>

<div id="clock">--:--:--</div>

<table class="calc">
  <tr>
    <td colspan="4"><input id="display" disabled></td>
  </tr>
  <tr>
    <td><button onclick="press('7')">7</button></td>
    <td><button onclick="press('8')">8</button></td>
    <td><button onclick="press('9')">9</button></td>
    <td><button onclick="press('/')">÷</button></td>
  </tr>
  <tr>
    <td><button onclick="press('4')">4</button></td>
    <td><button onclick="press('5')">5</button></td>
    <td><button onclick="press('6')">6</button></td>
    <td><button onclick="press('*')">×</button></td>
  </tr>
  <tr>
    <td><button onclick="press('1')">1</button></td>
    <td><button onclick="press('2')">2</button></td>
    <td><button onclick="press('3')">3</button></td>
    <td><button onclick="press('-')">−</button></td>
  </tr>
  <tr>
    <td><button onclick="press('0')">0</button></td>
    <td><button onclick="press('.')">.</button></td>
    <td><button onclick="press('=')">=</button></td>
    <td><button onclick="press('+')">+</button></td>
  </tr>
  <tr>
    <td colspan="2"><button onclick="clr()">C</button></td>
    <td colspan="2"><button onclick="del()">⌫</button></td>
  </tr>
</table>

<script>
// 实时时间 SSE
const clock = document.getElementById('clock');
const evtSource = new EventSource('/time');
evtSource.onmessage = e => clock.textContent = e.data;

// 计算器
let expr = '';
function press(k){
  if(k === '='){
    try{ expr = String(eval(expr)); } catch(e){ expr = 'Error'; }
  }else{
    expr += k;
  }
  document.getElementById('display').value = expr;
}
function clr(){ expr = ''; document.getElementById('display').value = ''; }
function del(){ expr = expr.slice(0,-1); document.getElementById('display').value = expr; }
</script>

</body>
</html>
"""

@app.route('/')
def index():
    return render_template_string(HTML)

# Server-Sent Events:每秒推送一次当前时间
def time_gen():
    while True:
        yield f"data:{datetime.now().strftime('%H:%M:%S')}\n\n"
        time.sleep(1)

@app.route('/time')
def time_stream():
    return Response(time_gen(), mimetype="text/event-stream")

if __name__ == '__main__':
    # threaded=True 保证 SSE 不阻塞
    app.run(host='0.0.0.0', port=5000, threaded=True)

还有
Cloudflare Tunnel(原 Argo Tunnel) ------

要"下载一个官方软件"cloudflared,然后在本地跑一条加密隧道到 Cloudflare 边缘节点,
不需要公网 IP、不需要 ngrok、不需要开端口

再把自定义域名解析到这条隧道,任何设备都能访问。下面是最新的完整步骤(2024-2025 版)。


一、准备工作

  1. 一个已托管到 Cloudflare 的域名(NS 指向 CF 即可,免费版也行)。
  2. 本地电脑(Windows / macOS / Linux / 树莓派均可)能跑你的 Web 服务。
  3. 有管理员权限安装 cloudflared

二、安装 cloudflared

Windows(PowerShell 管理员)

powershell 复制代码
# 1. 下载
Invoke-WebRequest -Uri "https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.exe" -OutFile "C:\Windows\System32\cloudflared.exe"
# 2. 验证
cloudflared --version

macOS

bash 复制代码
brew install cloudflared

Linux(Debian/Ubuntu)

bash 复制代码
wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

三、一键登录 & 创建隧道

  1. 登录(浏览器会弹出授权)

    bash 复制代码
    cloudflared tunnel login

    成功后会在 ~/.cloudflared/ 生成 cert.pem

  2. 创建隧道(名字随便取,这里叫 my-demo

    bash 复制代码
    cloudflared tunnel create my-demo

    控制台会返回一行 Tunnel IDxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

    同时本地会生成 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json 凭证文件,别丢


四、把域名绑到隧道(CNAME 方式)

假设你想用 demo.example.com 访问本地 5000 端口:

  1. 添加 DNS 记录

    bash 复制代码
    cloudflared tunnel route dns my-demo demo

    这条命令会自动在 Cloudflare 控制台插入一条 CNAME:
    demo.example.com<Tunnel-ID>.cfargotunnel.com
    代理状态默认 ☁️橙色(开启),无需手动再点。


五、写配置文件(一次写好,以后直接 cloudflared tunnel run

新建文件 ~/.cloudflared/config.yml(Windows 路径相同):

yaml 复制代码
tunnel: <Tunnel-ID>          # 上一步生成的 ID
credentials-file: /home/你的用户名/.cloudflared/<Tunnel-ID>.json

ingress:
  - hostname: demo.example.com
    service: http://localhost:5000
  - service: http_status:404   # 默认兜底

六、启动隧道

bash 复制代码
cloudflared tunnel run my-demo

看到 Connected ... 即表示本地 5000 端口已通过加密隧道到达 Cloudflare 边缘节点。


七、手机/外网测试

  1. 电脑保持 cloudflared 运行。
  2. 手机断开 Wi-Fi(用 4G/5G)打开浏览器输入
    https://demo.example.com
    首次访问会慢 1-2 秒,之后全球任何网络都能打开,地址栏直接有小锁(Cloudflare 边缘证书自动签发)。

八、常用补充

  • 换端口/换域名:改 config.yml 后重启隧道即可。

  • 后台运行:
    Linux 用 systemd:sudo cloudflared service install
    Windows 用 NSSM 或任务计划程序。

  • 同时暴露多个服务:在 ingress 里继续加 - hostname: xxx 即可。

  • 卸载:

    bash 复制代码
    cloudflared tunnel delete my-demo

    再到 Cloudflare 控制台把对应 DNS 记录删掉即可。


cloudflaredcloudflared tunnel createcloudflared tunnel route dns → 写 config.ymlcloudflared tunnel run → 手机用你自己的域名随时随地访问本地网页,无需公网 IP、无需 ngrok、免费 SSL+CDN

相关推荐
phantom_1114 小时前
BeeAI 框架学习记录
学习·ai
范小多4 小时前
24小时学会Python Visual code +Python Playwright通过谷歌浏览器取控件元素(连载、十一)
服务器·前端·python
此生只爱蛋4 小时前
【Linux】网络层IP
服务器·网络·tcp/ip
wheelmouse77884 小时前
Maven构建配置学习笔记
笔记·学习·maven
Haooog4 小时前
微服务保护学习
java·学习·微服务·sentinel
charlie1145141914 小时前
深入理解CC++的编译与链接技术9:动态库细节
c语言·开发语言·c++·学习·动态库
TiDB 社区干货传送门4 小时前
【附操作指南】从 Oceanbase 增量数据同步到 TiDB
linux·服务器·数据库·tidb·oceanbase
红辣椒...5 小时前
安装next-ai-draw-io
linux·运维·服务器
遇见火星5 小时前
Linux性能调优:详解磁盘工作流程及性能指标
linux·运维·服务器