Axure RP静态站点的发布与内网穿透结合实现远程访问本地原型页面

骑猪看日落 2024-03-27 18:38 7阅读 0赞

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

*   *  前言
     *  1.在AxureRP中生成HTML文件
     *  2.配置IIS服务
     *  3.添加防火墙安全策略
     *  4.使用cpolar内网穿透实现公网访问
     *   *  4.1 登录cpolar web ui管理界面
         *  4.2 启动website隧道
         *  4.3 获取公网URL地址
         *  4.4. 公网远程访问内网web站点
         *  4.5 配置固定二级子域名公网访问内网web站点
         *   *  4.5.1创建一条固定数据隧道
             *  4.5.2 找到“保留二级子域名”栏位
             *  4.5.3 重新编辑之前建立的临时数据隧道

### 前言 ###

AxureRP对于产品经理来说，是一款经常使用的网站原型设计工具。它可以用来创建和设置图表样式，为图表页面和元素添加交互性和注释，并能将正在设计中或设计完成的页面随时发布到HTML，使用Web浏览器查看。但除了在局域网中访问，很多时候也会有出差在外，需要使用公网访问的需求，这时候可以利用[cpolar内网穿透工具][cpolar]实现在公网访问内网的本地web展示站点，方便随时查看并提出修改意见。

### 1.在AxureRP中生成HTML文件 ###

简单设计好页面后，点击上方导航中的`发布`\-`生成HTML文件`，如下图所示，然后进入下一步。

![1692336390395][]

在弹出下方提示框后，点击按钮本地发布（可更改页面发布路径）

![image-20230818134258461][]

随便选择一个浏览器打开即可查看该页面

![image-20230818133325635][]

页面展示效果与页面保存路径如下图：

![1692337520863][]

### 2.配置IIS服务 ###

目前只是利用AxureRP生成了一个静态HTML页面，但是想要在局域网内其他用户访问该页面，需要先在本地进行IIS服务配置，搭建静态web站点。

打开`控制面板`–`程序和功能`–`打开或关闭windows功能`，选中`Internet信息服务`中的IIS相关服务，点击确定。

![0][]

然后打开`控制面板`–`管理工具`–`Internet信息服务（IIS）管理器`–`添加网址`

![1][]

在打开的界面中配置本地站点相关信息：包括`网站名称`，`物理路径`，`端口`等。

![2][]

![image-20230818145818576][]

添加好网站后，可以看到我命名为arpce的本地站点已经启动，此时在浏览器中输入：http://localhost:8080 即可本地浏览该页面。

![1692343235633][]

### 3.添加防火墙安全策略 ###

打开控制面板–windows防火墙，点击`高级设置`，进入设置界面。

![3][]

点击`入站规则`，右侧`新建规则`，点击`端口`，下一步，输入`特定本地端口`，就是上边IIS配置中你输入的端口号，一直下一步，规则就建立了。

![4][]

![5][]

然后，运行cmd进入命令提示符，输入ipconfig，即可获取到本机IP地址。

![7][]

此时，想要让局域网内其他用户访问到你用Axure生成的静态站点，只需要发送给它这个地址，用浏览器打开即可：

**http://你的IP地址:端口号**（冒号要用英文）

![6.1][]

### 4.使用cpolar内网穿透实现公网访问 ###

但目前该站点只能在局域网内被访问到，其他公网用户无法访问。接下来我们使用cpolar内网穿透将该站点发布到公网，实现公网用户也可以正常访问到。

#### 4.1 登录cpolar web ui管理界面 ####

在浏览器上访问[127.0.0.1:9200][127.0.0.1_9200]，使用注册的cpolar账号密码登录cpolar web UI管理界面。（默认为本地9200端口）

![20221117173937][]

#### 4.2 启动website隧道 ####

由于我们的演示站点端口在8080端口下，所以我们可以直接使用website隧道。

登录进入cpolar web ui界面后，我们点击左侧仪表盘的`隧道管理`——`隧道列表`，找到website隧道，并点击`启动`，显示状态为`active`。

![\-windows20221117173943][-windows20221117173943]

或者，我们也可以重新创建一个新的隧道：点击左侧仪表盘的`创建隧道`：

*  *隧道名称：可自定义，注意不要重复*
 *  *协议：选择http*
 *  *本地地址：填写8080端口*
 *  *域名类型：选择`随机域名`（可以免费使用）*
 *  *地区：可根据实际适用地区进行选择，支持CN、HK、US、TW、EUR*

隧道信息填写完成后，点击`创建`即可

![image-20230825152958595][]

#### 4.3 获取公网URL地址 ####

点击左侧仪表盘的`状态`——`在线隧道列表`，可以在线隧道所生成的公网地址，可以看到website隧道的公网地址有两个，一个是http协议，一个是https协议，将公网地址复制下来。

![image-20230825152826367][]

#### 4.4. 公网远程访问内网web站点 ####

在浏览器上访问cpolar所生成的公网地址，本例为：https://64a3463b.r5.cpolar.top

成功将内网web站点发布到公网可访问。

![image-20230825153106520][]

#### 4.5 配置固定二级子域名公网访问内网web站点 ####

在上一步中，我们已经能在公网访问内网web站点，不过此时的数据隧道处于临时状态（随机域名，每24小时重置一次），大多用于测试场景。想要长期稳定的访问利用Axure制作中的站点，随时查看并提出修改意见。我们还需要进一步的设置，将临时数据隧道转为固定隧道（需要成为cpolar的VIP会员）。现在，就让我们开始吧。

##### 4.5.1创建一条固定数据隧道 #####

要创建一条固定数据隧道，我们需要从隧道的进口端和出口端两个方面，将漂移的端口固定下来。首先我们在cpolar web ui界面（浏览器上访问[127.0.0.1:9200][127.0.0.1_9200]）点击左下角的转到[**cpolar官网**][cpolar]

![image-20230825153319388][]

在cpolar官网登录进入仪表台界面后，点击左侧的“预留”按钮。

![img][]

![img][img 1]

##### 4.5.2 找到“保留二级子域名”栏位 #####

在“预留”界面，我们找到“保留二级子域名”栏位。在这里设置的，就是数据隧道的公共互联网入口端。与cpolar客户端的设置类似，我们也要在这里进行一些简单设置。首先是“地区”栏，只要按实际使用地区填写即可（这里我们填入China VIP）；“名称”则是我们对数据隧道的命名，不过与cpolar客户端不同，这里的名称会编入最终生成的URL中（这里我们选择填入NAS）；而最后的“备注”，这是这条数据隧道的提示，这里我们填入test。

![image-20230825154659616][]

在各栏都填写完毕后，就可以点击右侧的“保留”按钮，将cpolar云端的数据隧道入口保留下来。

![image-20230825154836525][]

##### 4.5.3 重新编辑之前建立的临时数据隧道 #####

接着我们转回cpolar客户端，在客户端“隧道管理”项下的“隧道列表”页面，重新编辑我们之前建立的临时数据隧道（隧道名称：website），将cpolar云端数据隧道的入口，与cpolar本地端数据隧道的出口关联起来，这样我们才能使用重定义的数据隧道，访问位于内网的Axure静态站点。

![image-20230825155112010][]

点击`编辑`按钮

修改隧道信息，将二级子域名配置到隧道中：

*  *域名类型：改为选择`二级子域名`*
 *  *Sub Domain：填写我们刚刚所保留的二级子域名（本例为`Axuretest`）*

修改完成后，点击`更新`

![image-20230825160140639][]

隧道更新成功后，点击左侧仪表盘的`状态`——`在线隧道列表`，可以看到website隧道的公网地址，已经更新为二级子域名了，将公网地址复制下来。

![image-20230825160555666][]

打开浏览器，我们来测试一下访问配置成功的二级子域名。

![image-20230825161103001][]

测试成功，可以正常访问。现在，我们全网唯一的私有二级子域名，就创建好了。

> **转载自cpolar极点云文章：[AxureRP制作静态站点发布互联网，内网穿透实现公网访问][AxureRP]**

[cpolar]: https://www.cpolar.com/
[1692336390395]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/97e00d81a97840fc8de9b36e99b811bc.png
[image-20230818134258461]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/bbf236a1dee34076a62038bd0d6322b3.png
[image-20230818133325635]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/982c52c8d1cb49cf905a93ff4da33342.png
[1692337520863]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/a73a558e2acc46a2a4a49e74a17f7c46.png
[0]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9ed531e524dc49789422939190cd6aa6.png
[1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b6d47b491d04459cad60a7861bacd50e.png
[2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b1418c4b340d40ee9b4e65cb1a7f0aff.png
[image-20230818145818576]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/bfac2877ccf243b4b0f18fae7db71c81.png
[1692343235633]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/38075685fc114fbe8f4b91077bfd0a46.png
[3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/0d7631d8b8a94366b56fc33b0c8dcf3a.png
[4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/772d5a151566490ca0a707f289cef841.png
[5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ed5b6829aa014afd86512e8070b0b6fc.png
[7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/513d5c686351442f8e8f1bf6472eb22d.png
[6.1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/6476cd907ec449bf9b834f081f896202.png
[127.0.0.1_9200]: http://127.0.0.1:9200/#/dashboard
[20221117173937]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/0c8aa93a86264b95b584b53fb8ff7d4b.png
[-windows20221117173943]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f06611ec633f40d4b94b4947959414ca.png
[image-20230825152958595]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ba0cb12366a5434ba817bd2b0db775fc.png
[image-20230825152826367]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e1196fd659754e3c9298cdd1bdd0292d.png
[image-20230825153106520]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/41210bb1a8214730aea0062139eff4f7.png
[image-20230825153319388]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1d497237a70d4e7ab1105480c28098f4.png
[img]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b41e13adbb204a40bc18a70d08c02b40.png
[img 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5246842c7a39413bbedf1d9117acb243.png
[image-20230825154659616]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5b1f1c8d56eb4ad68ec16afcd9aafc84.png
[image-20230825154836525]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9e4881e149fd497085d149cb42b2df91.png
[image-20230825155112010]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/13b36b68cb2a43ec8de711650c767371.png
[image-20230825160140639]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7cdee23cd10143ebb97e7a771b44bfdb.png
[image-20230825160555666]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e8a47f9d5f8a4770b477321e7e523c28.png
[image-20230825161103001]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/44bc205f4d23491a8aa0972a7b3f96ec.png
[AxureRP]: https://www.cpolar.com/blog/axurerp-makes-static-sites-to-publish-the-internet-and-the-intranet-penetrates-to-achieve-public-network-access