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

### 文章目录

• [@[toc]](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [使用工具](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1. 本地搭建web网站](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.1 下载phpstudy后解压并安装](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.2 打开默认站点，测试](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.3 下载静态演示站点](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.4 打开站点根目录](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.5 复制演示站点到站网根目录](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [1.6 在浏览器中，查看演示效果。](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [2. 将本地web网站发布到公网](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [2.1 安装cpolar内网穿透](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [2.2 映射内网端口](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)
• [2.3 实现公网访问本地web网站](#文章目录 @[toc] 使用工具 1. 本地搭建web网站 1.1 下载phpstudy后解压并安装 1.2 打开默认站点，测试 1.3 下载静态演示站点 1.4 打开站点根目录 1.5 复制演示站点到站网根目录 1.6 在浏览器中，查看演示效果。 2. 将本地web网站发布到公网 2.1 安装cpolar内网穿透 2.2 映射内网端口 2.3 实现公网访问本地web网站)

本教程为快速在本地环境下搭建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内网穿透官网：https://www.cpolar.com/

点击进入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天退款保证，详细可以参考下一篇文章教程。