使用Axure RP结合内网穿透工具制作本地静态web页面并实现公网访问

作者简介: 懒大王敲代码,正在学习嵌入式方向有关课程stm32,网络编程,数据结构C/C++等

今天给大家讲解使用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

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

关于使用Axure RP结合内网穿透工具制作本地静态web页面并实现公网访问,懒大王就先分享到这里了,如果你认为这篇文章对你有帮助,请给懒大王点个赞点个关注吧,如果发现什么问题,欢迎评论区留言!!💕💕

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

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

相关文章

ubuntu下搜索文件的几种方法

一、whereis命令: whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b)、man说明文件(参数-m)和源代码文件(参数-s)。如果省略参数,则返回所有信息。 whereis的命令格式: whereis [-bmsu] [BMS 目录名 -f ] 文…

浅析:智能化视频安全监管系统的设计与实现步骤

关于智能化视频监管方案,小编已经和大家分享了很多,今天就和大家来探讨一下关于智能化视频安全监管系统的设计与实现步骤。 首先需要分析需求。要与使用者和业务部门合作,明确系统的功能和需求,例如,确定监控区域、安…

机器学习---KNN最近邻算法

1、KNN最近邻算法 K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一,有监督算法。该方法的思路是:如果一个样本在特征空间中的k个最相似的样本中的大多数属于某一个…

【加法减法选择计数器_2023.12.15】

功能 计数器位宽为 4;可以实现同步清零,及同步置数的功能;通过一个输入信号来选择,实现加法计数和减法计数: 如果加到最大值后继续加,或减到0后继续减时,计数器不变; 实现 sel端口…

关东升老师从小白到大牛系列丛书(由清华大学出版社出版)

助力技术成长,成就大牛之路 在这个科技日新月异的时代,掌握一门编程语言或专业技能已是必备,不再是奢侈。清华大学出版社出版的“从小白到大牛”的系列丛书,涵盖Python、Java、Kotlin、Android和SQL,助你快速在技术之…

python读取csv文件

在Python中,你可以使用pandas库来读取CSV文件。以下是一个基本的例子: import pandas as pd# 读取CSV文件data pd.read_csv(filename.csv)# 显示前几行数据print(data.head()) 这里,filename.csv应该被替换为你的CSV文件的实际路径和名称。…

PETS渗透测试标准流程

PTES组织 PETS渗透测试标准流程原文 http://www.pentest-standard.org/index.php/Main_Page学习一下渗透测试国际规范流程 英文不好的师傅可以使用浏览器插件沙拉查词或者整页翻译。 浏览器扩展中添加划词翻译 非常好用

Qt 中文处理

windows下 Qt显示中文的几种方式: 1, 环境:Qt 5.15.2 vs2019 64位 win11系统 默认用Qt 创建的文件使用utf-8编码格式,此环境下 中文没有问题 ui->textEdit->append("中文测试"); 2, 某些 低于…

missingno——缺失数据可视化

【说明】文章内容来自《机器学习入门——基于sklearn》,用于学习记录。若有争议联系删除。 数据处理中,缺失数据可视化。missingno提供了一个灵活且易于使用的缺少数据可视化工具和实用程序的小型工具集,可以快速直观地概述数据集的完整性。 …

关于set和map的简单理解

1. 关于搜索 1.1 set和map的引入 Map和set是一种专门用来进行搜索的容器或者数据结构,其搜索的效率与其具体的实例化子类有关。以前常见的搜索方式有: 1. 直接遍历,时间复杂度为O(N),元素如果比较多效率会非常慢 2. 二分查找&…

verilog语法进阶-分布式ram

概述: FPGA的LUT查找表是用RAM设计的,所以LUT可以当成ram来使用,也并不是所有的LUT都可以当成ram来使用,sliceM的ram可以当成分布式ram来使用,而sliceL的ram只能当成rom来使用,也就是只能读,不能写&#x…

JS的箭头函数this:

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。 具体看实例: //以前:谁调用的这个函数 this就指向谁// console.log(this);//window// function fn(){// console.log(this);//window 因为这个函数也是window调用…

python学习1

大家好,这里是七七,今天开始又新开一个专栏,Python学习。这次思考了些许,准备用例子来学习,而不是只通过一大堆道理和书本来学习了。啊对,这次是从0开始学习,因此大佬不用看本文了,小…

【Lidar】基于Python格网法计算点云体积(eg.树木体积)

这两天一直不在状态,不是特别想分享文章,所以也没怎么更新。但是代码放在文件里始终不是它的归宿,只有被不断使用它才能进步,才能诠释它的意义。所以今天抽空给大家分享一下如何基于Python利用格网法计算点云的体积,我…

Spring+SpringMVC+SpringBoot

Spring bean bean基础配置 bean别名配置 注意事项: 获取bean无论是通过id还是name获取。如果无法获取到,将抛出异常NoSuchBeanDefinitionException bean的作用范围配置 适合交给容器进行管理的bean 表现层对象、业务层对象、数据层对象、工具对象 不…

jmeter调试错误全集(入门必备)

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题,但是无从下手,不知道从哪里开始找起,对于初学者而言这是一个非常头痛的事情。这里结合笔者的经验,总结出以下方法。 二、通过查看运行日志调试问题 写好脚…

UE4/UE5 日志插件(基于spdlog)

1 解决问题 对于高频日志序列化到本地的需求,spdlog肯定完美满足。 源码地址:https://github.com/gabime/spdlog 博主下载的版本为 spdlog-1.12.0,各位大佬可以根绝自己爱好选择。 2 过程介绍 大概目录: SpdlogLibC目录下是对…

WGAN 优势小结

我在上一篇博文为什么 GAN 不好训练中,分析了原始 GAN 难以训练的原因,本篇博文将分析下 WGAN 的优势。 1. Wasserstein 距离 W 是指 Wasserstein,Wasserstein 距离又叫Earth-Mover(EM)距离。Wasserstein距离相比KL散…

2024年企业和个人都在备考的权威性 AI人工智能工程师培训类证书

给大家推荐个2024年企业和个人都在备考的权威性 AI人工智能工程师培训类证书,看能否帮到大家的: 由工业和信息化部电子工业标准化研究院颁发的关于以下两类证书: 计算机自然语言及语音处理设计开发工程师(中级) 计算机…

软件设计师——信息安全(二)

📑前言 本文主要是【信息安全】——软件设计师——信息安全的文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 &#x1f304…