如何使用固定公网地址远程访问内网Axure RP生成的网站原型web页面

news2024/11/26 20:43:56

文章目录

    • 前言
    • 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.coloradmin.cn/o/1558704.html

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

相关文章

开源翻译大模型

开源翻译大模型 1 简介 在开发过程中,会遇到定制化翻译工具的需要,开源的翻译模型可以解决相应的问题。其中英语转中文的比较好的开源项目有: 序号组织模型地址备注1赫尔辛基大学语言技术研究小组(Language Technology Researc…

debug: 解决typora两侧留白过大问题

问题如下图:解决办法:打开: 文件 -> 偏好设置 -> -> 外观 -> 看主题选择的是哪一个, 我选择的是GitHub * 点击打开主题设置 -> 选择你对应主题的.css文件 -> CTRL cv 备份一份, 然后打开 在文件中找到max-width : 修改对应的值 , 我改成了1920px * 改好以后…

安装即启动?探索流氓App的自启动“黑科技” (Android系统内鬼之ContentProvider篇)

前段时间发现了一个神奇的app,它居然可以在安装之后立即自启动: 看到没有,在提示安装成功大概1到2秒后,就直接弹出Toast和通知了! 好神奇啊,在没有第三方app帮忙唤醒的前提下,它是怎么做到首次安…

谷粒商城——RabbitMQ

0. 消息中间件 1.RabbitMQ的核心概念 2. 工作流程 整体架构: 相关细节: 上述要注意的是: 路由键包含在message的头中,其作用是用于指定该消息存储与哪个消息队列中。 信道是客户端(包括生产者和消费者)用…

WIFI驱动移植实验:WIFI从路由器动态获取IP地址与联网

一. 简介 前面两篇文章,一篇文章实现了WIFI联网前要做的工作,另一篇文章配置了WIFI配置文件,进行了WIFI热点的连接。文章如下: WIFI驱动移植实验:WIFI 联网前的工作-CSDN博客 WIFI驱动移植实验:连接WIF…

Python字符串字母大小写变换,高级Python开发技术

寻找有志同道合的小伙伴,互帮互助,群里还有不错的视频学习教程和PDF电子书! ‘’’ demo ‘tHis iS a GOod boOK.’ print(demo.casefold()) print(demo.lower()) print(demo.upper()) print(demo.capitalize()) print(demo.title()) print(dem…

什么是 SSL 证书?

SSL 证书的介绍 SSL(Secure Sockets Layer)证书是一种由数字证书颁发机构(CA)签发的加密证书,用于在 Web 浏览器和服务器之间建立安全连接。SSL 证书能够确保网站和应用程序的数据传输过程中不被窃听、篡改或伪造&…

springboot点餐平台网站

目 录 摘 要 1 前 言 2 第1章 概述 2 1.1 研究背景 3 1.2 研究目的 3 1.3 研究内容 4 第二章 开发技术介绍 5 2.1相关技术 5 2.2 Java技术 6 2.3 MySQL数据库 6 2.4 Tomcat介绍 7 2.5 Spring Boot框架 8 第三章 系统分析 9 3.1 可行性分析 9 3.1.1 技术可行性 9 3.1.2 经济可行…

初始《string》及手搓模拟实现《string》

目录 前言: 为什么学习string类? 标准库中的string类 1. string类对象的常见构造 ​编辑 2. string类对象的容量操作 ​编辑 3. string类对象的访问及遍历操作 4. string类对象的修改操作 5. string类非成员函数 vs和g下string结构的说明 vs下s…

C/C++游戏编程实例-飞翔的小鸟

飞翔的小鸟游戏设计 首先需要包含以下库&#xff1a; #include<stdio.h> #include<windows.h> #include<stdlib.h> //包含system #include<conio.h>设置窗口大小&#xff1a; #define WIDTH 50 #define HEIGHT 16设置鸟的结构&#xff1a; struct …

在线版的超级马里奥 Super Mario HTML5

原本是在csdn资源找个代码学习的&#xff0c;无奈下载了几份都是垃圾代码(下载了几份都是) 废话不多说&#xff0c;直接上干活。代码、音效、图片、样式都包含 <!doctype html> <html> <head> <meta charsetutf-8 /> <title>Super Mario HTML5 …

C语言变量存储属性

在C语言中&#xff0c;变量不仅仅是用来存储数据的容器&#xff0c;还拥有一些额外的存储属性&#xff0c;这些属性决定了变量的生命周期、作用域和存储位置等。本文将介绍C语言中常见的变量存储属性&#xff0c;包括自动存储、静态存储、寄存器存储和外部链接存储&#xff0c;…

吾空笔记本X15降温

低成本搞了个悟空笔记本&#xff0c;其实就是蓝天磨具&#xff0c;跟木叶村&#xff0c;机革一样&#xff0c;只是说机革边角改得多点&#xff0c;这两个基本没改。通病是轻薄本压不住AMD这个U&#xff0c;如果在超频模式&#xff0c;且带高刷屏&#xff0c;GPU加CPU的功耗&…

【Linux】认识线程池 AND 手撕线程池(正常版)

文章目录 0.回顾进程池1.计算机层面的池化技术2.线程池预备知识2.1介绍线程池2.2设计线程池的意义是什么&#xff1f;2.3其他知识 3.回顾C类与对象3.1cpp什么情况下成员函数必须是静态的&#xff1f;3.1可变参数列表3.2格式化输出函数3.3预定义符号 4.图解线程池运作原理4.0完整…

并查集----格子游戏

并查集中最重要的是要搞懂&#xff1a; 不明白的可以拿纸自己先演示一番&#xff0c;find函数不仅能找到他们的祖先数&#xff0c;而且同时也能更新路径的子结点都等于祖先&#xff0c;然后以后寻找时会更加的方便&#xff01;

P3817 小A的糖果(贪心)

思路&#xff1a;真绝了&#xff0c;开了longlong从80分到了100分。因为一个特判st值影响我AC&#xff0c;那个单独的特判竟然有问题。我想的是如果有a[i] a[i1]则将状态值st标为true。最后在输出结果之前先看st的值&#xff0c;如果他为false&#xff0c;则说明没有两盒子的和…

网络编程套接字 (一)

本专栏内容为&#xff1a;Linux学习专栏&#xff0c;分为系统和网络两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握Linux。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;网络 &#x1f69a;代码仓库&#xff1a;小小unicorn的代…

InnoDB支持哪几种行格式?

一、问题解析 数据库表的行格式决定了一行数据是如何进行物理存储的&#xff0c;进而影响查询和DML操作的性能。 在InnoDB中&#xff0c;常见的行格式有4种&#xff1a; 1COMPACT &#xff1a;是MySQL 5.0之前的默认格式&#xff0c;除了保存字段值外&#xff0c;还会利用空值…

沃通国密SSL根证书入根赢达信国密浏览器

近日&#xff0c;沃通CA国密SSL根证书正式入根赢达信国密安全浏览器&#xff0c;携手推动国产密码技术应用、完善国密应用生态体系&#xff0c;也标志着沃通国密SSL证书兼容性再次得到提升&#xff0c;进一步夯实国密应用根基。 密码算法的安全性是信息安全保障的核心&#xff…

时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测

时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现OOA-BP鱼鹰算法优化BP神经网络时间序列预测&#xff08;完整源码和数据…