如何使用固定公网地址远程访问内网Axure RP生成的网站原型web页面

文章目录

    • 前言
    • 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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

StructStreaming Batch mode和Continuous mode

StructStreaming Batch mode和Continuous mode 让我们把目光集中到 Structured Streaming,也就是流处理引擎本身。Structured Streaming 与 Spark MLlib 并列,是 Spark 重要的子框架之一。值得一提的是,Structured Streaming 天然能够享受 S…

C语言刷题总结

1.网购问题 (1)这道题目需要分多种情况进行考虑:双11还是双12,有无优惠券,是否会出现优惠券的面值大于购买商品的单价(这个时候直接按0元进行处理); (2)在对于优惠券的分…

Ansible-3

block任务块:可以通过block关键字,将多个任务组合到一起;将整个block任务组一起控制是否要执行。 如果test组中的主机系统发行版是Redhat则安装并启动httpd。原本这是需要两个任务安装和执行,通过block整合为一个任务执行。 rescu…

PyLMKit(9):ChatTable与你的表格聊天,表格问答

功能介绍 与你的结构化数据聊天:支持主流数据库、表格型excel等数据! ChatDB:支持数据库问答ChatTable:支持txt,excel,csv等pandas dataframe表格的问答 1.下载安装 pip install pylmkit -U pip install pandasql2.ChatTable实…

阿里云ECS服务器经济型e实例详解,CPU性能测评

阿里云服务器ECS经济型e系列是阿里云面向个人开发者、学生、小微企业,在中小型网站建设、开发测试、轻量级应用等场景推出的全新入门级云服务器,CPU处理器采用Intel Xeon Platinum架构处理器,支持1:1、1:2、1:4多种处理器内存配比&#xff0c…

STM32——超声测距HC_SR04记录

一、HC_SR04简述 HC-SR04超声波测距模块可提供 2cm-400cm的非接触式距离感测功能,测距精度可达高到 3mm;模块包括超声波发射器、接收器与控制电路。 基本工作原理: (1)采用IO 口TRIG 触发测距,给最少10us 的高电平信呈。 (2)模块…

C/C++函数字符串和数字的互相转化(比赛超实用)

字符串和数字相互转化: 1 数字转字符串: 实现方法:to_string函数 存在头文件: string 实现代码: #include<iostream> #include<string> using namespace std; int main() {int a 114514;string s to_string(a);cout << s[0] << endl;cout <<…

Spring Web MVC的入门学习(一)

目录 一、什么是 Spring Web MVC 1、MVC 定义 二、学习Spring MVC 1、项目准备 2、建立连接 2.1 RequestMapping 注解的学习 2.2 RequestMapping 使用 3、请求 3.1 传递单个参数 3.2 传递多个参数 3.3 传递对象 3.4 后端参数重命名&#xff08;后端参数映射&#xf…

【LeetCode: 331. 验证二叉树的前序序列化 + DFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

我的创作纪念日-一周年

&#x1f600;前言 不知不觉过了一年了很感慨也很期待未来 &#x1f3e0;个人主页&#xff1a;尘觉主页 文章目录 我的创作纪念日-一周年机缘收获(荣誉)日常成就憧憬 我的创作纪念日-一周年 机缘 在我开始在 CSDN 上发布文章之前&#xff0c;我对这个平台几乎一无所知。随着时…

[创业之路-102] :结构化思考:产学研人才联合创业公司的特点、优点与困境

目录 前言&#xff1a; 一、什么是产学研 1.1 什么是产学研 1.2 什么是产学研人才联合创业 二、产、学、研的区别、各自的特点 2.1 产业&#xff08;产&#xff09;特点 2.2 其次&#xff0c;学术&#xff08;学&#xff09;特点 2.3 科学研究&#xff08;研&#xff0…

VS Code常用前端开发插件和基础配置

VS Code插件安装 VS Code提供了非常丰富的插件功能&#xff0c;根据你的需要&#xff0c;安装对应的插件可以大大提高开发效率。 完成前端开发&#xff0c;常见插件介绍&#xff1a; 1、Chinese (Simplified) Language Pack 适用于 VS Code 的中文&#xff08;简体&#xff…

PostCSS的安装及使用 (2):使用及问题解决

PostCSS是一个CSS处理器&#xff0c;它通过插件系统可以转换CSS代码&#xff0c;使其具备更多的功能或符合特定规范。 PostCSS的使用&#xff1a; 安装PostCSS CLI和插件 # 全局安装PostCSS CLI&#xff08;可选&#xff0c;一般在项目内安装&#xff09;npm install -g postc…

Kerberos 认证 javax.security.auth.logon.LoginException:拒绝链接 (Connection refused)

kerberos 服务重启之后异常 项目中用到了hive 和hdfs &#xff0c;权限认证使用了Kerberos&#xff0c;因为机房异常&#xff0c;导致了Kerberos 服务重启&#xff0c;结果发现本来运行正常的应用服务hive 和hdfs 认证失败&#xff0c;报错信息是 典型的网络连接异常 排查思路…

鸿蒙开发之ArkUI组件常用组件图片和文本

ArkUI即方舟开发框架是HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览工具等&#xff0c;可以支持开发者进行可视化界面开发。 开发文档地址 &…

AI大模型学习在医疗领域的应用与挑战

AI大模型学习在医疗领域的应用与挑战 文章正文&#xff1a;一、AI大模型学习在医疗领域的应用二、AI大模型学习在医疗领域面临的挑战总结&#xff1a; 文章正文&#xff1a; 随着人工智能技术的飞速发展&#xff0c;AI大模型学习在各个领域都取得了显著的成果。本文将探讨AI大…

使用Sui CLI在Sui上创建和执行PTBs

Sui命令行界面&#xff08;CLI&#xff09;中的新命令允许用户直接从终端或Bash脚本创建和执行可编程交易区块&#xff08;PTB&#xff09;。这个新命令为开发人员在实现和执行PTB方面提供了更大的灵活性。 PTB为开发人员提供了一种非常强大的编程工具&#xff0c;这在其他区块…

商务口语每天学习,柯桥英语培训

今天天气好 Its a nice day today. 今天天气真好。(搭讪) Ive heard too much about you. 久仰大名。(恭维) Remember me to... 请代我向……问好。(问候) 半个句型要记牢 Its a ~(nice/good/bad) day today. Tip: 如果你想和某人搭讪而找不着好的借口时&#xff0c;就说天气…

Macs Fan Control Pro--精准掌控Mac风扇,优化散热新选择

Macs Fan Control Pro是一款专为Mac电脑设计的高级风扇控制工具。它具备强大的温度监测能力&#xff0c;可以实时监测Mac电脑各个核心组件的温度&#xff0c;并通过直观的界面展示给用户。同时&#xff0c;用户可以根据个人需求自定义风扇速度&#xff0c;或者选择预设的自动风…

【STL】vector的模拟实现

目录 前言 vector概述 vector的数据结构 vector迭代器的运用 vector的构造和析构 vector的拷贝构造与赋值 拷贝构造 传统写法 现代写法 赋值重载 vector的扩容 reserve() resize() vector的元素操作 push_back() pop_back() insert() erase() 迭代器…