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

本文涉及的产品
.cn 域名,1个 12个月
简介: 使用PHPStudy搭建本地web网站并实现任意浏览器公网访问

使用工具

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

1. 本地搭建web网站

1.1 下载phpstudy后解压并安装

官网下载:https://www.xp.cn/download.html

安装后的效果,如图:

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

1.2 打开默认站点,测试

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

如下图,说明安装成功。


1.3 下载静态演示站点

下载:https://www.cpolar.com/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://www.cpolar.com/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天退款保证,详细可以参考下一篇文章教程。

相关文章
|
4天前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
42 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
16天前
|
缓存 监控 测试技术
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
59 7
|
1月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
99 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
18天前
|
Web App开发 监控 前端开发
如何确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示?
【10月更文挑战第24天】通过以上这些措施,可以最大程度地确保使用 DPR 进行响应式设计的网站在各种浏览器上都能正常显示。同时,不断的优化和改进也是保持网站兼容性的关键。
|
18天前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
24 1
|
1月前
|
Web App开发 前端开发 JavaScript
为什么浏览器兼容性在开发网站时很重要?
浏览器兼容性在网站开发中确实非常重要。
WK
|
18天前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
26 0
|
JavaScript 前端开发 C#
VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置
前言    重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了。这两天一直在试终于搞定了。这里查找的问题当然主要是VS里面调式JavaScript代码了。 第一种方式设置VS2010默认浏览器 第一种方式中直接通过设置Web项目属性就行设置: 这样有一个弊端对于我自己来说,就是无法直接在VS里面调试JavaScript源代码。
821 0
|
1月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
101 3
|
17天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
103 45