如何公网远程访问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

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

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

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

相关文章

❤ Uniapp使用三( 打包和发布上线)

❤ Uniapp使用三( 打包和发布上线) 一、介绍 什么是 uniapp? uniapp 是一种基于 Vue.js 的多平台开发框架,它可以同时用于开发安卓、iOS、H5 等多个平台。因此,只需要写一次代码就可以在多个平台上运行,提高了开发效率。 打包…

蓝桥杯 彩灯与任务

题目描述 输入样例 5 5 5 4 3 3 9 R 1 C 4 R 5 A 3 R 2 输出样例 5 3 3 思路 第一眼读不懂旋转是啥意思&#xff0c;根据样例连蒙带猜猜出来&#xff0c;其实就是把整个数组中的挪动几个位置。也很自然的按照题意写出来如下代码&#xff1a; #include <iostream> using…

如果你正在学自动化测试,那么请你仔细看完这篇文章

接触了不少同行&#xff0c;由于他们之前一直做手工测试&#xff0c;现在很迫切希望做自动化测试&#xff0c;其中不乏工作5年以上的人。 本人从事软件自动化测试已经近5年&#xff0c;从server端到web端&#xff0c;从API到mobile&#xff0c;切身体会到自动化带来的好处与痛楚…

kylin集群负载均衡(kylin3,hbaseRIF问题)

hbase历险记 目录 hbase历险记 寻找问题 分析原因 解决方案 方案1&#xff08;资源问题、失败&#xff09; 方案2&#xff08;成功&#xff09; 寻找问题 不知道你是不是有这样的疑惑。我kylin是个单机&#xff0c;我使用的hbase是个集群&#xff0c;但内存全在某一台机…

高并发缓存问题分析以及分布式锁的实现

一,场景概述: 在高并发的环境下,比如淘宝,京东不定时的促销活动,大量的用户访问会导致数据库的性能下降,进而有可能数据库宕机从而不能产生正常的服务,一般一个系统最大的性能瓶颈&#xff0c;就是数据库的io操作,如果发生大量的io那么他的问题也会随之而来。从数据库入手也是…

Python基础知识:整理13 利用pyecharts生成折线图

首先需要安装第三方包pyecharts 1 基础折线图 # 导包&#xff0c;导入Line功能构建折线图对象 from pyecharts.charts import Line # 折线图 from pyecharts.options import TitleOpts # 标题 from pyecharts.options import LegendOpts # 图例 from pyecharts.options im…

CSAPP阅读笔记-程序的机器级表示

程序的机器级表示 计算机执行机器代码&#xff0c;用字节序列编码低级的操作&#xff0c;包括处理数据、管理内存、读写存储设备上的数据&#xff0c;以及利用网络通信。编译器基于编程语言的规则、目标机器的指令集和操作系统遵循的惯例&#xff0c;经过一系列的阶段生成机器…

微信小程序---如何创建分包

1.在项目根目录中&#xff0c;创建分包的根目录&#xff0c;名为subpkg&#xff0c;这个名字可以自己定义 2.在 pages.json 中&#xff0c;和 pages 节点平级的位置声明 subPackages 节点&#xff0c;用来定义分包相关的结构&#xff1a; 3.在分包目录&#xff0c;点击右键新建…

进程切换和是Linux2.6内核中进程调度的算法

正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 进程切换 进程并发就需要做到进程切换&#xff0c;一个CPU一套寄存器但是需要运行的进程有很多…

发票系统对接诺诺平台

诺诺平台判断设备不在线&#xff0c;导致开票失败 代码方面优化&#xff1a;调用接口的时候&#xff1a;是否先调用在线状态检测接口&#xff0c;确认开票设备是在线的状态 &#xff0c;在调用诺诺平台&#xff0c;不在线直接拦截&#xff1b;例如&#xff1a;这个原理就类似于…

DIYgif表情包怎么做?gif表情包制作方法分享

Gif表情包是我们生活交流中必不可少的一种方式&#xff0c;能够表达自己的心情&#xff0c;也能够调节气氛。平时我们的gif表情包都是从网上下载或是别人发送的&#xff0c;那么我们怎么自己DIYgif表情包呢&#xff1f;这时候&#xff0c;用qq表情在线制作&#xff08;https://…

在IntelliJ IDEA中集成SSM项目

SSM项目&#xff1a;springMVC为控制器、spring 为事务层、 MyBatis 负责持久 首先看下集成后项目结构&#xff1a; 1、打开IntelliJ IDEA&#xff0c;点击 "File" -> "New" -> "Project"。 点击Finish&#xff0c;此时我们就已经创建了一…

图书信息管理系统

1.程序组成&#xff1a; 源文件&#xff1a;test.cpp&#xff0c;源.cpp 头文件&#xff1a;test.h 2.功能实现&#xff1a; 系统以菜单方式工作&#xff0c;图书信息录入功能&#xff0c;图书信息浏览功能&#xff0c;查询功能删除功能价格排序修改图书信息程序加密 &…

手机更换社保证照片教程来啦,速速查收!

&#x1f4cc;线上直接搞定很简单&#xff01; 没有申领社保卡的姐妹们可以自己申领&#xff01; 已有社保卡的姐妹可以先挂失然后再申领&#xff01; &#x1f64c;教程 线上更换社保证&#xff1a; 1️⃣打开「掌上12333」&#xff0c;找到电子社保卡 2️⃣点击社保卡申领&am…

关于影视字幕翻译哪个公司比较专业?

现如今&#xff0c;影视剧作为跨文化交流的重要桥梁&#xff0c;正日益受到中国观众的热爱。因此也催生了影视字幕翻译的需求。那么&#xff0c;如何做好影视作品字幕翻译&#xff0c;哪个公司在影视字幕英译中更为专业&#xff1f; 我们知道&#xff0c;字幕翻译是涉外影视作品…

接口测试用例设计 - 实战篇

一&#xff0e;接口测试流程 1&#xff0e;需求讨论 2&#xff0e;需求评审 3&#xff0e;场景设计 4&#xff0e;数据准备 5&#xff0e;执行 二&#xff0e;分析接口文档中哪些元素 1&#xff0e;接口名称 2&#xff0e;接口地址 3&#xff0e;支持格式 4&#xff0…

Spring IOC 源码分析

​ 什么是 IoC IoC &#xff08;Inversion of control &#xff09;控制反转。它是一种思想不是一个技术实现。描述的是&#xff1a;Java开发领域对象的创建以及管理的问题。 例如&#xff1a;现有类A依赖于类B。传统的开发方式 &#xff1a;往往是在类A中手动通过new关键字…

C++设计模式

目录 一.概念 1.设计模式概念 2.底层思维与抽象思维 &#xff08;1&#xff09;底层思维 &#xff08;2&#xff09;抽象思维 3.面向对象 4.软件设计复杂性 &#xff08;1&#xff09;软件设计复杂的根本原因 &#xff08;2&#xff09;解决复杂性的方法 ① 分解 ②…

C++ Webserver从零开始:基础知识(四)——I/O复用

目录 前言 select系统调用 poll系统调用 epoll系统调用 epoll_create epoll_ctl epoll_wait LT和ET模式 EPOLLONESHOT事件 epoll和select/poll的区别 事件集处理方式 实现原理和效率 其他区别 前言 在第三章中我们大概地讲解了什么是I/O复用&#xff0c;即&#xf…
最新文章