AxureRP制作静态站点发布互联网,实现公网访问【内网穿透】
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文件
,如下图所示,然后进入下一步。
在弹出下方提示框后,点击按钮本地发布(可更改页面发布路径)
随便选择一个浏览器打开即可查看该页面
页面展示效果与页面保存路径如下图:
2.配置IIS服务
目前只是利用AxureRP生成了一个静态HTML页面,但是想要在局域网内其他用户访问该页面,需要先在本地进行IIS服务配置,搭建静态web站点。
打开控制面板
–程序和功能
–打开或关闭windows功能
,选中Internet信息服务
中的IIS相关服务,点击确定。
然后打开控制面板
–管理工具
–Internet信息服务(IIS)管理器
–添加网址
在打开的界面中配置本地站点相关信息:包括网站名称
,物理路径
,端口
等。
添加好网站后,可以看到我命名为arpce的本地站点已经启动,此时在浏览器中输入:http://localhost:8080 即可本地浏览该页面。
3.添加防火墙安全策略
打开控制面板–windows防火墙,点击高级设置
,进入设置界面。
点击入站规则
,右侧新建规则
,点击端口
,下一步,输入特定本地端口
,就是上边IIS配置中你输入的端口号,一直下一步,规则就建立了。
然后,运行cmd进入命令提示符,输入ipconfig,即可获取到本机IP地址。
此时,想要让局域网内其他用户访问到你用Axure生成的静态站点,只需要发送给它这个地址,用浏览器打开即可:
http://你的IP地址:端口号(冒号要用英文)
4.使用cpolar内网穿透实现公网访问
但目前该站点只能在局域网内被访问到,其他公网用户无法访问。接下来我们使用cpolar内网穿透将该站点发布到公网,实现公网用户也可以正常访问到。
4.1 登录cpolar web ui管理界面
在浏览器上访问127.0.0.1:9200,使用注册的cpolar账号密码登录cpolar web UI管理界面。(默认为本地9200端口)
4.2 启动website隧道
由于我们的演示站点端口在8080端口下,所以我们可以直接使用website隧道。
登录进入cpolar web ui界面后,我们点击左侧仪表盘的隧道管理
——隧道列表
,找到website隧道,并点击启动
,显示状态为active
。
或者,我们也可以重新创建一个新的隧道:点击左侧仪表盘的创建隧道
:
- 隧道名称:可自定义,注意不要重复
- 协议:选择http
- 本地地址:填写8080端口
- 域名类型:选择
随机域名
(可以免费使用) - 地区:可根据实际适用地区进行选择,支持CN、HK、US、TW、EUR
隧道信息填写完成后,点击创建
即可
4.3 获取公网URL地址
点击左侧仪表盘的状态
——在线隧道列表
,可以在线隧道所生成的公网地址,可以看到website隧道的公网地址有两个,一个是http协议,一个是https协议,将公网地址复制下来。
4.4. 公网远程访问内网web站点
在浏览器上访问cpolar所生成的公网地址,本例为:https://64a3463b.r5.cpolar.top
成功将内网web站点发布到公网可访问。
4.5 配置固定二级子域名公网访问内网web站点
在上一步中,我们已经能在公网访问内网web站点,不过此时的数据隧道处于临时状态(随机域名,每24小时重置一次),大多用于测试场景。想要长期稳定的访问利用Axure制作中的站点,随时查看并提出修改意见。我们还需要进一步的设置,将临时数据隧道转为固定隧道(需要成为cpolar的VIP会员)。现在,就让我们开始吧。
4.5.1创建一条固定数据隧道
要创建一条固定数据隧道,我们需要从隧道的进口端和出口端两个方面,将漂移的端口固定下来。首先我们在cpolar web ui界面(浏览器上访问127.0.0.1:9200)点击左下角的转到cpolar官网
在cpolar官网登录进入仪表台界面后,点击左侧的“预留”按钮。
4.5.2 找到“保留二级子域名”栏位
在“预留”界面,我们找到“保留二级子域名”栏位。在这里设置的,就是数据隧道的公共互联网入口端。与cpolar客户端的设置类似,我们也要在这里进行一些简单设置。首先是“地区”栏,只要按实际使用地区填写即可(这里我们填入China VIP);“名称”则是我们对数据隧道的命名,不过与cpolar客户端不同,这里的名称会编入最终生成的URL中(这里我们选择填入NAS);而最后的“备注”,这是这条数据隧道的提示,这里我们填入test。
在各栏都填写完毕后,就可以点击右侧的“保留”按钮,将cpolar云端的数据隧道入口保留下来。
4.5.3 重新编辑之前建立的临时数据隧道
接着我们转回cpolar客户端,在客户端“隧道管理”项下的“隧道列表”页面,重新编辑我们之前建立的临时数据隧道(隧道名称:website),将cpolar云端数据隧道的入口,与cpolar本地端数据隧道的出口关联起来,这样我们才能使用重定义的数据隧道,访问位于内网的Axure静态站点。
点击编辑
按钮
修改隧道信息,将二级子域名配置到隧道中:
- 域名类型:改为选择
二级子域名
- Sub Domain:填写我们刚刚所保留的二级子域名(本例为
Axuretest
)
修改完成后,点击更新
隧道更新成功后,点击左侧仪表盘的状态
——在线隧道列表
,可以看到website隧道的公网地址,已经更新为二级子域名了,将公网地址复制下来。
打开浏览器,我们来测试一下访问配置成功的二级子域名。
测试成功,可以正常访问。现在,我们全网唯一的私有二级子域名,就创建好了。
转载自cpolar极点云文章:AxureRP制作静态站点发布互联网,内网穿透实现公网访问
相关文章:
![](https://img-blog.csdnimg.cn/img_convert/dd7aef911a756a7820a4b459efea4be9.png)
AxureRP制作静态站点发布互联网,实现公网访问【内网穿透】
AxureRP制作静态站点发布互联网,内网穿透实现公网访问 文章目录 AxureRP制作静态站点发布互联网,内网穿透实现公网访问前言1.在AxureRP中生成HTML文件2.配置IIS服务3.添加防火墙安全策略4.使用cpolar内网穿透实现公网访问4.1 登录cpolar web ui管理界面4…...
![](https://img-blog.csdnimg.cn/img_convert/bbc95a39f4befa023915b9cb4c6467fe.jpeg)
【好文推荐】openGauss 5.0.0 数据库安全——全密态探究
前言 写此文章的目的,主要是验证: openGauss 5.0.0 数据库能够实现哪种加密方式的全密态全密态数据库的特点 一、全密态介绍 全密态数据库意在解决数据全生命周期的隐私保护问题,使得系统无论在何种业务场景和环境下,数据在传…...
![](https://img-blog.csdnimg.cn/8826fdcb48bf4a2d8709e6e006cd8657.png)
堆的介绍与堆的实现和调整
个人主页:Lei宝啊 愿所有美好如期而遇 目录 堆的介绍: 关于堆的实现及相关的其他问题: 堆的初始化: 堆的销毁: 插入建堆: 堆向上调整: 交换两个节点的值: 堆向下调整&a…...
![](https://img-blog.csdnimg.cn/f9d254ad15d847f5b5125849e683d6c9.png)
【广州华锐互动】马属直肠检查3D虚拟仿真课件
随着科技的发展,医疗行业也在不断地进行创新。其中,广州华锐互动开发的马属直肠检查3D虚拟仿真课件,为医学教育和实践操作带来了新的可能性。它不仅可以帮助医生提高诊断准确率,还可以让医学生在没有真实病人的情况下进行实践操作…...
![](https://img-blog.csdnimg.cn/img_convert/764fcede2cc623b2128ebe3ef35a65f2.png)
Nuxt 菜鸟入门学习笔记:路由
文章目录 路由 Routing页面 Pages导航 Navigation路由参数 Route Parameters路由中间件 Route Middleware路由验证 Route Validation Nuxt 官网地址: https://nuxt.com/ 路由 Routing Nuxt 的一个核心功能是文件系统路由器。pages/目录下的每个 Vue 文件都会创建一…...
![](https://www.ngui.cc/images/no-images.jpg)
C++基本语法和注释
C程序介绍 C 程序可以定义为对象的集合,这些对象通过调用彼此的方法进行交互。现在让我们简要地看一下什么是类、对象,方法、即时变量。 对象 - 对象具有状态和行为。例如:一只狗的状态 - 颜色、名称、品种,行为 - 摇动、叫唤、吃…...
![](https://img-blog.csdnimg.cn/4093b225fe9a420fa0c592ad741a775d.png)
CSRF攻击
防御策略 过滤判断换referer头,添加tocken令牌验证,白名单 CSRF攻击和XSS比较 相同点:都是欺骗用户 不同点: XSS有攻击特征,所有输入点都要考虑代码,单引号过滤 CSRF没有攻击特征,利用的点…...
![](https://img-blog.csdnimg.cn/a240ddd3b2f748f28e22ae53bf55d4de.png)
2023 “华为杯” 中国研究生数学建模竞赛(D题)深度剖析|数学建模完整代码+建模过程全解全析
问题一:区域碳排放量以及经济、人口、能源消费量的现状分析 思路: 定义碳排放量 Prediction 模型: CO2 P * (GDP/P) * (E/GDP) * (CO2/E) 其中: CO2:碳排放量 P:人口数量 GDP/P:人均GDP E/GDP:单位GDP能耗 CO2/E:单位能耗碳排放量 2.收集并统计相关…...
![](https://img-blog.csdnimg.cn/bdf4ba456d63498fa0f07591321226a2.png)
【Proteus仿真】【STM32单片机】基于单片机的智能晾衣架控制系统
文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后,LCD1604显示传感器检测的温湿度、光线强度和风速,工作模式,以及相应阈值,系统工作状态等;系统默认为自动模式, 可通过K4…...
![](https://img-blog.csdnimg.cn/5b599c14e6814260b301008b10d08539.png)
C/C++代码静态检测工具PC-Lint常见错误总结
目录 1、PC-Lint 概述 2、PC-lint 常见错误列举 3、PC-Lint报告的语法错误 4、总结 VC常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585C软件异常排查从入门到…...
![](https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8)
概率深度学习建模数据不确定性
https://zhuanlan.zhihu.com/p/568912284理解论文 What uncertainties do we need in Bayesian deep learning for computer vision? (NeurIPS 2017) [1]中的数据不确定性建模,并给出公式推导。论文[1]指出不确定性uncertainty分为随机不确定性(aleator…...
![](https://img-blog.csdnimg.cn/f4acfea6767b4c7e8475fe13f6d63fd7.png)
Jenkins自动化部署前后端分离项目 (svn + Springboot + Vue + maven)有图详解
1. 准备工作 本文的前后端分离项目,技术框架是: Springboot Vue Maven SVN Redis Mysql Nginx JDK 所以首先需要安装以下: 在腾讯云服务器OpenCLoudOS系统中安装jdk(有图详解) 在腾讯云服务器OpenCLoudOS系统…...
![](https://img-blog.csdnimg.cn/0ce38284fa3241af92295092054b33ab.png)
【ELK】日志系统部署
一、ELK日志分析系统 1、ELK的组成 ElasticSearchLogStashKibana ELK基于这三个开源日志的收集、存储、检索和可视化的解决方案;可帮助用户快速定位和分析应用程序的故障,监控应用程序性能和安全,以及提供丰富的数据分析和展示功能。 2、完…...
![](https://img-blog.csdnimg.cn/713de93a61f74b2b813666c3e6c32683.gif)
【算法挨揍日记】day08——30. 串联所有单词的子串、76. 最小覆盖子串
30. 串联所有单词的子串 30. 串联所有单词的子串 题目描述: 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如,如果 words ["…...
![](https://img-blog.csdnimg.cn/img_convert/2b6e247434f915e4cfc54f9485a0de0e.png)
SpringCloud Gateway--网关服务基本介绍和基本原理
😀前言 本篇博文是关于SpringCloud Gateway的基本介绍,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力…...
![](https://img-blog.csdnimg.cn/7ed67728a4024652ab01528c2bb029eb.png)
使用Vue-cli构建spa项目及结构解析
一,Vue-cli是什么? 是一个官方发布的Vue脚手架工具,用于快速搭建Vue项目结构,提供了现代前端开发所需要的一些基础功能,例如:Webpack打包、ESLint语法检查、单元测试、自动化部署等等。同时,Vu…...
![](https://img-blog.csdnimg.cn/999212284f2243068cf6273157d2c945.png)
自定义Unity组件——AudioManager(音频管理器)
需求描述 在游戏开发中,音频资源是不可或缺的,通常情况下音频资源随机分布,各个音频的操作和管理都是各自负责,同时对于音频的很多操作逻辑都是大同小异的,这就造成了许多冗余代码的堆叠,除此之外在获取各类…...
![](https://www.ngui.cc/images/no-images.jpg)
leetcode 558 设计内存文件系统
题目 Design an in-memory file system to simulate the following functions: ls: Given a path in string format. If it is a file path, return a list that only contains this files name. If it is a directory path, return the list of file and directory namesin th…...
![](https://img-blog.csdnimg.cn/df0f8b98e8f2402db9150ce443c2a0f5.png)
Haproxy负载均衡群集
HAproxy搭建Web群集一、Web集群调度器1、常见的Web集群调度器2、常用集群调度器的优缺点(LVS ,Nginx,Haproxy)2.1 Nginx2.2 LVS2.3 Haproxy 3、LVS、Nginx、HAproxy的区别 二、Haproxy1、简介2、Haproxy应用分析3、HAProxy的主要特性4、Haproxy调度算法(…...
![](https://www.ngui.cc/images/no-images.jpg)
什么是面包屑导航?
面包屑导航(Breadcrumb Navigation)这个概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。 在网站应用中࿰…...
![](https://img-blog.csdnimg.cn/4d5f8b2a044a4e8d9f10a2619b0d0732.png)
VS2019创建GIt仓库时剔除文件或目录
假设本地有解决方案“SomeSolution” 1、首先”团队资源管理器“-“创建Git存储库”,选择“仅限本地”、“创建” VS会在解决方案目录下自动生成.gitattributes、.gitignore 2、编辑gitignore,直接拖到VS里或者用记事本打开。添加要剔除的文件或文件夹…...
![](https://img-blog.csdnimg.cn/08513f325abd489ea832ee272e6174d7.png)
计算机等级考试—信息安全三级真题六
目录 一、单选题 二、填空题 三、综合题 一、单选题...
![](https://www.ngui.cc/images/no-images.jpg)
vue循环滚动字幕
在Vue.js中创建一个循环滚动字幕的效果通常需要使用一些CSS和JavaScript来实现。以下是一个简单的示例,展示如何使用Vue.js创建一个循环滚动字幕的效果: 首先,在HTML中创建一个Vue实例,并添加一个包含滚动字幕的容器元素ÿ…...
![](https://img-blog.csdnimg.cn/f16529809b544e619efad382ae515adc.gif)
扩展pytest接口自动化框架-MS数据解析功能
【软件测试行业现状】2023年了你还敢学软件测试?未来已寄..测试人该何去何从?【自动化测试、测试开发、性能测试】 开篇 MeterSphere的数据源通过html页面上传后,需要将请求方式进行拆分。 get接口的参数,常以params的方式进行传…...
![](https://img-blog.csdnimg.cn/74cbd8308b9d4026a0d772c50279e70d.png)
docker容器安装MongoDB数据库
一:MongoDB数据库 1.1 简介 MongoDB是一个开源、高性能、无模式的文档型数据库,当初的设计就是用于简化开发和方便扩展,是NoSQL数据库产品中的一种。是最 像关系型数据库(MySQL)的非关系型数据库。 它支持的数据结构…...
![](https://img-blog.csdnimg.cn/607103b7cd9e4acb8f13ddb4d14d4342.png)
Python机器学习实战-特征重要性分析方法(3):迭代删除法:Leave-one-out(附源码和实现效果)
实现功能 迭代地每次删除一个特征并评估准确性 实现代码 from sklearn.datasets import load_breast_cancer from sklearn.model_selection import train_test_split from sklearn.ensemble import RandomForestClassifier from sklearn.metrics import accuracy_score impo…...
![](https://img-blog.csdnimg.cn/img_convert/8918fb19e63472c55aebbcbbff8b978b.png)
Go的error接口
从本书的开始,我们就已经创建和使用过神秘的预定义error类型,而且没有解释它究竟是什么。实际上它就是interface类型,这个类型有一个返回错误信息的单一方法: type error interface { Error() string } 创建一个error最简单的方…...
![](https://img-blog.csdnimg.cn/0870fdbc56104b5da6c6bc79306c1809.gif)
RabbitMQ 集群 - 普通集群、镜像集群、仲裁队列
目录 一、RabbitMQ 集群 1.1、前言 1.2、普通集群 1.3、镜像集群 1.4、仲裁队列 一、RabbitMQ 集群 1.1、前言 前面我们已经解决了消息可靠性问题,以及延迟消息问题 和 消息堆积问题. 这最后一章,我们就来解决以下 mq 的可用性 和 并发能力. 1.2、…...
![](https://img-blog.csdnimg.cn/52952e784d86464590857dabc4db3e62.png)
高项新版教程(第四版)解读+学习指导
第四版主要内容 技术部分 信息化教程、软件工程、网络技术是原来的,学习原来的录播。 新基建、工业互联网、车联网、农业现代化、数字化转型、元宇宙等是新增,以直播讲。 管理部分 变化不是太大 。 整合管理、人力变为资源管理、风险管理新增内容。 …...
![](https://www.ngui.cc/images/no-images.jpg)
【Debian】Debian10.0.0安装选项问答
debian的LXQT是什么? LXQT是一套轻量级的桌面环境,主要基于Qt框架开发。 LXQT在debian中的具体特点包括: - 使用Openbox作为窗口管理器,提供平铺式窗口布局。 - 文件管理器为PCManFM-Qt。 - 设置中心集成 debconf 配置界面。 - 支持GTK和Qt应用程序。 - 资源消耗较低…...
![](/images/no-images.jpg)
做网站賺钱/网站免费网站免费
Message:消息,其中包含了消息ID,消息处理对象以及处理的数据等,由MessageQueue 统一队列,终由Handler处理。 Handler:处理者,负责Message的发送及处理。使用Handler时,需要实现 handlerMessage(Message msg…...
![](http://s2.51cto.com/wyfs02/M00/8E/F3/wKiom1jPmCjC0eveAACg4z3bkBA323.jpg-wh_651x-s_3719362189.jpg)
网站建设有什么理论依据/人工智能培训心得
我们先来看看几种常见的退出方法(不优雅的方式) 一、容器式 建立一个全局容器,把所有的Activity存储起来,退出时循环遍历finish所有Activity import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundl…...
![](/images/no-images.jpg)
今日招聘/上海快速优化排名
理解Java泛型最简单的方法是把它看成一种便捷语法,能节省你某些Java类型转换(casting)上的操作:List box ...;Apple apple box.get(0);上面的代码自身已表达的很清楚:box是一个装有Apple对象的List。get方法返回一个Apple对象实例ÿ…...
![](https://images2015.cnblogs.com/blog/11371/201707/11371-20170716194400707-1639400264.png)
搜索引擎如何找到网站/推广app佣金平台正规
首先定位到adb所在的目录 将手机连接上电脑。 在命令行运行: adb devices 这个命令可以列出所有连上的移动设备。 在命令行运行: adb logcat 可以显示日志。 以下是例子截图: 当然logcat有更高级的过滤等命令,下一篇文章总结。…...
![](/images/no-images.jpg)
出国看病网站开发/广告代理公司
刚才顺便又把二分默写了一遍,还好,这次比较顺利。算法这一块,一直是自己一块痛处,有时感觉自己的脑瓜子怎么就这么笨,后一想觉得肯定是锈逗了,确实啊,这么长时间不思考的脑子能机灵到哪呢&#…...
![](/images/no-images.jpg)
智恒企业网站管理系统/网站是怎么优化推广的
闪黑屏的原因主要是我们启动Activity的时候,需要跑完onCreate和onResume才会显示界面闪黑屏的原因主要是我们启动Activity的时候,需要跑完onCreate和onResume才会显示界面。也就是说需要处理一些数据后,才会显示。按照这种思路,是…...