利用Axure RP和cpolar内网穿透实现公网访问本地web网页

news2024/11/28 14:45:41

AxureRP制作静态站点发布互联网,内网穿透实现公网访问

文章目录

  • AxureRP制作静态站点发布互联网,内网穿透实现公网访问
    • 前言
    • 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.coloradmin.cn/o/1041937.html

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

相关文章

最详细的next国际化方案

实现效果 : 根据浏览器语言判断和手动切换(两种切换模式) 实现方法 1.下载安装包 (next-i18next react-i18next i18next) yarn add next-i18next react-i18next i18next 2.在根目录下创建文件(next-i18next.config.js) const path require("path");module.expo…

MATLAB 安装额外工具包

接下里即可搜索并安装 “额外工具包”

python多继承构造函数声明问题

前言: 嗨喽~大家好呀,这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 背景 有场景分别定义两组逻辑,随后有统一入口做基类属性的整合 其中两组逻辑的积累构造函数定义入参不同 设计类继承图如&#…

【深度学习】【Opencv】Python/C++调用onnx模型【基础】

【深度学习】【Opencv】python/C调用onnx模型【基础】 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【Opencv】python/C调用onnx模型【基础】前言Python版本OpenCVWindows平台安装OpenCVopencv调用onnx模型 C版本OpenCVWindows平…

终极策略:如何利用亮数据代理轻松、高效地突破亚马逊的反爬障碍

文章目录 前言背景📜第一步:打开亚马逊商城🛍️第二步:定位搜索框并搜索iphone15🔍第三步:定位具体数据并保存到csv文件💾第三步:多页面数据抓取📄📄&#x1…

OpenCV 基础图像处理

1、生成图像 cv2.imread是OpenCV库中的一个函数,用于读取图像文件。它接受一个参数,即要读取的图像文件的路径,返回一个多维数组, 表示图像的像素值。该函数的常用参数包括:flags:指定读取图像的方式&#…

RabbitMQ学习总结(11)—— RabbitMQ 核心概念与架构

MQ 技术概述 什么是 MQ MQ(message queue),从字面意思上看,本质是个队列,FIFO 先入先出,只不过队列中存放的内容是 message 而已,还是一种跨进程的通信机制,用于上下游传递消息。在互联网架构中,MQ 是一种非常常见的上下游 “逻辑解耦+物理解耦” 的消息通信服务。使用…

系统集成|第十三章(笔记)

目录 第十三章 干系人管理13.1 概述与相关概念13.2 主要过程13.2.1 识别干系人13.2.2 编制项目干系人管理计划13.2.3 管理干系人参与13.2.4 项目干系人参与的监控 13.3 常见问题 上篇:第十二章、沟通管理 第十三章 干系人管理 13.1 概述与相关概念 概述&#xff1a…

21-SpringSecurity

SpringSecurity从入门到精通 0. 简介 ​ Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富。 ​ 一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有…

会议剪影 | 思腾合力受邀参加2023第二届世界元宇宙大会并作主题演讲

由中国仿真学会、中国指挥与控制学会和北京理工大学共同主办,上海市嘉定区安亭镇人民政府和中国仿真学会元宇宙专业委员会承办的第二届世界元宇宙大会于2023年9月20日-22日在上海安亭举行。 大会以“虚实相生、产业赋能”为主题,聚焦元宇宙关键技术发展的…

Redis原理(一):Redis数据结构(上)

文章目录 1、 Redis数据结构-动态字符串2、 Redis数据结构-intset3、 Redis数据结构-Dict4、 Redis数据结构-ZipList5、 Redis数据结构-ZipList的连锁更新问题6、 Redis数据结构-QuickList1、 Redis数据结构-动态字符串 我们都知道Redis中保存的Key是字符串,value往往是字符串…

Mybatis 日志(Log4j2)

之前我们介绍了使用JDK Log、Apache Commons Logging打印Mybatis运行时的日志;本篇我们介绍使用Log4j2打印Mybatis运行时的日志。 如何您对Mybatis中使用JDK Log、Apache Commons Logging打印Mybatis运行时的日志不太了解,可以参考: Mybati…

使用群晖实现Videostation电影的大容量存储及分享教程

文章目录 1.使用环境要求2.制作视频分享链接3.制作永久固定视频分享链接 李哥和他的女朋友是一对甜蜜的情侣,但不幸的是,由于工作原因,他们目前分隔两地,无法常常亲密相伴。 这个距离让李哥特别怀念和女朋友一起在电影院观看电影的…

zabbix6.0监控磁盘IO

客户端配置 配置参数 [rootora19c zabbix]# pwd /usr/local/zabbix/etc/ [rootora19c zabbix]# vim zabbix_agentd.conf UnsafeUserParameters1配置UI监控conf文件 [rootora19c zabbix_agentd.d]# pwd /usr/local/zabbix/etc/zabbix_agentd.d/ [rootora19c zabbix_agentd.d…

大数据Flink(八十六):DML:Group 聚合和Over 聚合

文章目录 DML:Group 聚合和Over 聚合 一、DML:Group 聚合

CasaOS:一个docker容器应用的可视化Portal

CasaOS 官网声称他是一个家庭云操作系统,但我实际使用后感觉称之为“docker容器的可视化Portal”更合适。因为它本身不具备IAAS、PAAS、或SAAS的开箱即用能力,更像是一个把OS上的docker Container集中管理并展示的索引目录,各个docker Contai…

点成分享丨水浴设备在食品理化特性研究中的应用

木薯粉拯救“一麦难求” 近年来,随着全球人口增长、城市化进程的加快及人们饮食习惯的改变,以小麦为原料的食品成为了人们的“热门主食”,但实际每年产出的小麦不足以满足人们与日俱增的需求。为了解决这一问题,人们开始寻找小麦…

CTF_BUUCTF_Reverse解题_04内涵的软件

题目地址:BUUCTF在线评测 拿到文件,运行,狗!!! 不管回答Y还是N,程序都最终会一闪而过 上PE 32位C没壳 上IDA 32 F5反汇编一下: 直接发现Y和N, 看到有if判断语…

安科瑞医用隔离电源系统在江苏某医院项目中的应用

安科瑞 崔丽洁 江苏摘要:介绍该三级乙等综合医院采用安科瑞医用隔离电源系统,使用分体配电柜安装方式,从而实现将TN系统转化为IT系统,以及系统绝缘情况监测。 1、概述 该医院占地面积4.2万平方米,建筑面积7.14万平方米…

【C语言】通讯录

目录 一、关于通讯录 二、代码逻辑 三、通讯录实现 1.菜单设计 2.逻辑主要功能设计 3.增加联系人功能实现 4.显示全部联系人信息 5.删除联系人 6.查找联系人 7.修改联系人信息 8.对联系人进行排序 9.一键清空所有联系人 四、完整源码 test.c contact.c contact.…