使用PHPStudy在本地快速建立网站并实现局域网外访问（无公网IP）

心已赠人 2024-02-23 04:19 10阅读 0赞

#### 文章目录 ####

*   *   *  使用工具
         *  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][https_www.xp.cn_download.html]

安装后的效果，如图：

![1][]

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

![2][]

##### 1.2 打开默认站点，测试 #####

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

![3][]

如下图，说明安装成功。

![4][]

##### 1.3 下载静态演示站点 #####

下载:[https://www.cpolar.com/static/downloads/meditation-app-master.zip][https_www.cpolar.com_static_downloads_meditation-app-master.zip]

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

![5][]

##### 1.4 打开站点根目录 #####

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

![6][]

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

![7][]

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

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

![8][]

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

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

![9][]

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

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

##### 2.1 安装cpolar内网穿透 #####

> cpolar内网穿透官网：[https://www.cpolar.com/][https_www.cpolar.com]

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

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

> linux系统以及macOS系统安装cpolar可参考官网文档教程————→[https://www.cpolar.com/docs][https_www.cpolar.com_docs]

###### 2.2 映射内网端口 ######

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

![web ui][]

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

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

然后点击`创建`

![在这里插入图片描述][03fb9fef954568904b6f294f6167bd6c.png]

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

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

![在这里插入图片描述][19aaf7ac93188a6f8ab49c1ca37ff652.png]

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

![13][]

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

> **转载自cpolar极点云文章：[phpstudy本地快速搭建网站，并外网访问【无公网IP】][phpstudy_IP]**

[https_www.xp.cn_download.html]: https://www.xp.cn/download.html
[1]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/39d9b8f8ff2349f88725f6e11bb4ab60.png
[2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/c9fa0f94ee4c446da510e602766b4b3e.png
[3]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/bf26818d448944448873183cef11c818.png
[4]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/5a91be14e8b04c03ba9c50f99ac325d6.png
[https_www.cpolar.com_static_downloads_meditation-app-master.zip]: https://www.cpolar.com/static/downloads/meditation-app-master.zip
[5]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/a9f1f0429a5247bc877f628b169fb7fd.png
[6]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/27388ff2b8cc40f8bdbd98022ee20b52.png
[7]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/e3a31e2301dd4ac5aac5287c4239fe56.png
[8]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/4ece164d3acb40d4a11cfefdc9974946.png
[9]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/89053c69e3a44d8587beba45871e323b.png
[https_www.cpolar.com]: https://www.cpolar.com/
[https_www.cpolar.com_docs]: https://www.cpolar.com/docs
[web ui]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/8edd6f45cf644e3aa79d5bb6792b55f4.png
[03fb9fef954568904b6f294f6167bd6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/9b3d2cc1b59c4d9dae93e81e727c8a7c.png
[19aaf7ac93188a6f8ab49c1ca37ff652.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/c44bd9735db34bc592215a6a391b62d0.png
[13]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/fe27aa3e2eb948e58d08503fa98420a3.png
[phpstudy_IP]: https://www.cpolar.com/blog/quickly-build-a-website-locally-on-photostudy