使用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页面并实现公网访问,懒大王就先分享到这里了,如果你认为这篇文章对你有帮助,请给懒大王点个赞点个关注吧,如果发现什么问题,欢迎评论区留言!!💕💕

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

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

相关文章

自制数据库迁移工具-C版-03-HappySunshineV1.2-(支持Gbase8a)

目录 一、环境信息 二、简述 三、升级点 四、支持功能 五、安装包下载地址 六、配置参数介绍 七、安装步骤 1、配置环境变量 2、生效环境变量 3、检验动态链接是否正常 4、修改配置文件MigrationConfig.txt 八、运行效果 一、环境信息 名称值CPUIntel(R) Core(TM) i…

ML流程标准规范汇总

1. 机器学习简介 机器学习是从数据中自动分析获得模型,并利用模型对未知数据进行预测。它是一个流程性很强的工作,包括数据采集、数据清洗、数据预处理、特征工程、模型调优、模型融合、模型验证、模型持久化、在线服务等模块。 而在这些基本的步…

8位LED流水灯设计

一、实验目的 本实验为设计性实验,要求理解和掌握触发器、译码器、时序脉冲、LED显示单元的工作原理与功能,通过设计和制作8位的LED流水灯电路,综合运用触发器和译码器等逻辑器件及显示单元进行功能性时序逻辑电路的设计和制作,掌握时序逻辑电路的基本设计和调试方法。 二、…

SpringBoot的web开发

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 web开发1 web场景1.1 自动配置1.2 默认效果 &#x1f48e;总结 web开发 SpringBoot的web开发能力是由SpringMVC提供的 1 web场景 1.1 自动配置 整合web场景 <dependency><groupId>org.springframewo…

北斗三号短报文+4G的低功耗太阳能船载报位监控方案

国内海洋船舶群体长期在海上航行&#xff0c;多数海员由于海面无信号覆盖、个人卫星通信费用昂贵、无法自由使用船载公用卫星通信设备等原因&#xff0c;无法与家人和朋友保持联系&#xff0c;甚至在遇到危险的时候也无法及时向外界发出求救信号&#xff0c;管理单位难以掌握船…

docker-harbor的私有仓库

目录 harbor的特性 harbor的组件 docker-harbor部署 Docker1 页面访问 ​编辑 上传镜像 创建项目 创建用户 给项目创建成员 上传私有仓库 docker2(远程主机上传) 如何实现仓库之间进行同步 docker3 实现远程仓库同步 仓库 保存镜像 私有&#xff0c;自定义用户…

WPF仿网易云搭建笔记(1):项目搭建

文章目录 前言项目地址动态样式组合样式批量样式覆盖Prism新建UserControler修改Material Design 笔刷收放列表可以滚动的StackPanel列表点击展开或折叠 实现效果 前言 今天接着继续细化代码&#xff0c;把整体框架写出来 项目地址 WPF仿网易云 Gitee仓库 动态样式 【WPF】C#…

企业微信模板卡片消息

投票选择型和多项选择型卡片仅企业微信3.1.12及以上版本支持 文本通知型、图文展示型和按钮交互型三种卡片仅企业微信3.1.6及以上版本支持&#xff08;但附件下载功能仍需更新至3.1.12&#xff09; 微工作台&#xff08;原企业号&#xff09;不支持展示模板卡片消息 文本通知型…

C#函数(方法)

C# 函数&#xff08;Method&#xff09; 函数也被称为方法&#xff08;在对象内部叫方法&#xff0c;不隶属于对象的时候叫函数&#xff09;。 方法是一段可重复使用的代码块&#xff0c;用于执行特定的操作&#xff0c;也可以有返回的值。 函数分为两大类&#xff1a;静态函数…

知识库SEO:提升网站内容质量与搜索引擎排名的策略

随着搜索引擎算法的不断更新和优化&#xff0c;单纯依靠关键词堆砌和外部链接的时代已经过去。现在的SEO&#xff08;搜索引擎优化&#xff09;已经转向了以提供高质量、有价值内容为核心的阶段。知识库SEO便是这个新阶段的重要策略之一。 | 一、知识库SEO的概念与意义 1.定义…

【隐私计算】tf-encrypted隐私计算框架/库基础

tf-encrypted介绍 TF Encrypted是TensorFlow中一个用于加密机器学习的框架&#xff0c;它看起来和感觉上都很像TensorFlow&#xff0c;利用了Keras API 的易用性&#xff0c;同时通过安全多方计算和同态加密实现了对加密数据的训练和预测。TF Encrypted的目标是使保护隐私的机器…

Shell 脚本 基础 学习 笔记 (超详细,适合新手观看学习)

Shell脚本语言 Shell关键字Shell变量命名规则使用变量赋值变量自定义变量命令行交互read定义变量类型declare预定义变量环境变量 Shell字符串Shell中的集合类型数组&#xff08;array&#xff09;数组定义和赋值数组元素访问获取数组长度 map Shell运算算数运算符关系运算符布尔…

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

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

Ubuntu22下源码编译CEF(branch=6045)+mp4+mp3笔记

前段时间编译了win版本&#xff0c;最近捣鼓一下Ubuntu版本。 配置网络,Ubuntu在网络配置填写了代理&#xff0c;在终端还是要输入 set http_proxyxxxx:xx set https_proxyxxxx:xx 这样避免大部分的git代码下载 为了减少下载代码和避免git那个几G内存的坑&#xff0c;我直接…

Python 标准库SYS

标准库sys引入及方法介绍和示例。 简介 sys 模块主要负责与 Python 解释器进行交互&#xff0c;该模块提供了一系列用于控制 Python 运行环境的函数和变量。 命令行参数 可以获取传递给python 执行文件的命令行参数&#xff0c;命令行参数是由sys模块存储在名为argv的列表中&…

通信子网在计算机网络中的地位和作用

一、通信子网是计算机网络的核心组成部分 通信子网是计算机网络的核心组成部分&#xff0c;它负责为计算机网络中的各种设备提供通信支持。无论是主机之间的数据传输&#xff0c;还是主机与终端之间的数据通信&#xff0c;都需要通过通信子网来实现。通信子网是连接各个设备的关…

严世芸龟法养生经

文章目录 严世芸理念荤素搭配&#xff0c;不偏嗜动静结合心平气和 龟息法 严世芸 严世芸&#xff0c;出生于1940年&#xff0c;现任上海中医药大学的主任医师&#xff0c;教授。他父亲是近代上海有名的中医&#xff0c;他又是著名医家张伯臾的亲传弟子。 从小就在父亲诊室里长…

leetCode算法—3.无重复字符的最长子串

1.给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 示例 2: 输入: s “bbbbb” 输出: 1 解释: 因为无重复字符的最长子串是 …

PO 对象被锁定

问题描述 在创建PO对象的时候&#xff0c;由于上次电脑断网导致PO连接中断&#xff0c;但服务器中登录用户还在占用PO对象&#xff0c;需要手动在POD中删除锁对象才可编辑 解决方案 登录到POD页面&#xff0c;点击右上角Administration 点击Lock Overview&#xff0c;查看…

营销投放下半场,游戏行业如何寻觅进化空间?

摘要&#xff1a;微博&#xff0c;游戏行业突围市场新利器 游戏行业&#xff0c;格局永远在变。 从2017年互联网大厂集体盯上游戏大蛋糕&#xff0c;到2021年行业收缩&#xff0c;再到今年上半年实际销售收入继去年首次出现同比下滑…几经过山车式行情的游戏行业&#xff0c;…