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

文章目录

    • 前言
    • 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内网穿透工具实现在公网访问内网的本地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,使用注册的cpolar账号密码登录cpolar web UI管理界面。(默认为本地9200端口)

20221117173937

4.2 启动website隧道

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

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

-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)点击左下角的转到cpolar官网

image-20230825153319388

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

img

img

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制作静态站点发布互联网,内网穿透实现公网访问

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python生成的报告中绘制了多张图,但最后都混合到一起了

问题来源: 用python生成的报告中,存在三张图,第一个张图是正常的, 后面的图都是不正常的,全都是多张图混合而成的,这是为什么呢? 三段代码均是下述调用方式 import matplotlib.pyplot as plt pl…

【Linux】操作系统的认识

操作系统 1. 冯诺依曼体系结构2. 操作系统 1. 冯诺依曼体系结构 冯诺依曼体系结构的介绍 冯.诺依曼结构消除了原始计算机体系中,只能依靠硬件控制程序的状况(程序作为控制器的一部分,作为硬件存在),将程序编码存储在…

JUC并发编程笔记2

省流: 自己笔记,划走~~~~ 缓存更新策略

mybatis-plus自动填充

前言 这是我在这个网站整理的笔记,关注我,接下来还会持续更新。 作者:神的孩子都在歌唱 mybatis-plus自动填充 大家做设计数据表的时候,基本上都会有del_flag,create_time, update_time,这三个字段,这也是…

【Java】迭代器的next方法

Collection 集合的遍历 概述&#xff1a;Iteration&#xff1a;迭代器&#xff0c;集合的专用遍历方式 Iterator<E> Iterator() 返回在此 collection 的元素上进行迭代的迭代器boolean hasNext() 如果返回仍有元素可以迭代&#xff0c;则返回 trueE next() 返回迭代的下一…

计算机视觉基础(5)——特征点及其描述子

前言 本文我们将学习到特征点及其描述子。在特征点检测中&#xff0c;我们将学习角点检测和SIFT关键点检测器&#xff0c;角点检测以哈里斯角点检测器为例进行说明&#xff0c;SIFT将从高斯拉普拉斯算子和高斯差分算子展开。在描述子部分&#xff0c;我们将分别学习SIFT描述子和…

【软考】软件开发中不同对象之间的关系

1. 关联&#xff08;Association&#xff09;&#xff1a; 关联表示两个或多个对象之间的关系。这种关系可以是双向的&#xff0c;也可以是单向的。关联关系通常用于描述两个对象之间的连接&#xff0c;但不涉及对象之间的所有权或整体-部分的关系。 例子&#xff1a; 考虑一…

UE4 小知识【不断更新中】

最近在实习的时候发现 UE 真的好多东西不太会&#xff0c;比较杂&#xff0c;此篇文章记录一下一些 UE 小知识。 请移步我的博客&#xff1a;UE4 小知识 ps&#xff1a;还有很多其他的模块&#xff0c;后续会整理后单独发博客。

内置式永磁同步电机复矢量电流调节器设计

导读&#xff1a;本期主要介绍永磁同步电机复矢量电流调节器。针对内置式永磁同步电机d、q轴电流存在动态耦合的问题&#xff0c;在基于有效磁链概念得到IPMSM的复矢量数学模型&#xff0c;设计出相应的复矢量电流调节器&#xff0c;实现了d、q轴电流的动态解耦。通过仿真验证所…

vue集成钉钉单点登录

初始环境判断 判断是否是来自钉钉环境的访问&#xff0c;返回&#xff1a;boolean类型值 window.navigator.userAgent.includes("DingTalk")前端引入vue中钉钉相关的依赖&#xff0c;并获取钉钉的临时授权码 import * as dingtalk from dingtalk-jsapi; let that …

No171.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

Linux-git

文章目录 git简介git常用命令配置初始化仓库将文件添加到暂存区将暂存区文件加入版本库对比工作区某文件和暂存区中的区别将暂存区的文件移除但git仍管理将文件移除暂存区并且git不再管理查看版本库切换到之前的版本恢复文件持久化 云端将本地的项目推送到远程仓库将远程仓库的…

深度强化学习 第 5 章 SARSA 算法

上一章介绍了 Q 学习的表格形式和神经网络形式&#xff08;即 DQN&#xff09;。 TD 算法是一大类算法的总称。上一章用的 Q 学习是一种 TD 算法&#xff0c; Q 学习的目的是学习最优动作价值函数 Q ⋆ Q_⋆ Q⋆​ 本章介绍 SARSA&#xff0c;它也是一种 TD 算法&#xff0c; S…

车载视频如何转换视频格式

当你收集了多种视频想在车内进行播放&#xff0c;它们可能不会自动播放。你有可能会在屏幕上看到一条消息&#xff0c;显示“文件格式不受支持”&#xff0c;这是因为这些视频可能采用了你的汽车无法识别的格式。 那我们如何才可以转换为车载播放器上运行的最重要且最广泛使用…

使用数组方法打印出 1 - 10000 之间的所有对称数。例如:121、1331等

&#xff08;我从别的人那复制的&#xff0c;原文章请点击此处&#xff09; 源代码&#xff1a; function getNum (start, end) {var arr [];for(var i start; i < end; i) {if (i.toString() i.toString().split().reverse().join() && i.toString().length &…

算法设计作业

7-8 python def quicksort(arr):if len(arr) < 1:return arrpivot arr[len(arr) // 2]left [x for x in arr if x < pivot]middle [x for x in arr if x pivot]right [x for x in arr if x > pivot]return quicksort(left) middle quicksort(right)# 测试代码…

leetcode 739. 每日温度、496. 下一个更大元素 I

739. 每日温度 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 示例 1: …

网络协议--IP:网际协议

3.1 引言 IP是TCP/IP协议族中最为核心的协议。所有的TCP、UDP、ICMP及IGMP数据都以IP数据报格式传输&#xff08;见图1-4&#xff09;。许多刚开始接触TCP/IP的人对IP提供不可靠、无连接的数据报传送服务感到很奇怪。 不可靠&#xff08;unreliable&#xff09;的意思是它不能…

Qt Designer生成ui文件,如何转py文件,如何运行

下面将逐步介绍ui文件如何转py文件&#xff0c;怎么运行的具体操作步骤 ui文件转py文件 1.使用Qt Designer生成ui文件&#xff0c;保存到本地 2.输入 cmd &#xff0c;打开命令行窗口 3.进入ui文件的目录下&#xff0c;文件路径使用你本地存放ui文件的位置 cd /d ui文件路径…

安卓富文本部分高亮及点击事件

安卓富文本部分高亮及点击事件 前言一、富文本是什么&#xff1f;二、实现方法1.使用html2.使用SpannableString 总结 前言 富文本其实不是很常用&#xff0c;但有遇到了过后使用很方便的场景&#xff0c;例如免责声明。这时候就很重要了&#xff0c;前段时间遇到了&#xff0…