从内网到公网:使用Axure RP和内网穿透技术发布静态web页面的完整指南

news2024/11/27 6:34:27

文章目录

    • 前言
    • 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/1216670.html

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

相关文章

振南技术干货集:比萨斜塔要倒了,倾斜传感器快来!(1)

注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 (危楼、边坡、古建筑都是对倾斜敏感的。) 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 (如果…

JS-项目实战-新增水果库存功能实现

1、fruit.js function $(name) {if (name) {//假设name是 #fruit_tblif (name.startsWith("#")) {name name.substring(1); //fruit_tblreturn document.getElementById(name);} else {return document.getElementsByName(name); //返回的是NodeList类型}} }//当…

一言成文大模型:大模型实践落地之路

百度CEO,李彦宏指出、深度学习技术,大语言模型具备了理解、生成、逻辑、记忆等人工智能的核心基础能力,为通用人工智能带来曙光。 元宇宙_一言成文大模型 一言成文大模型:大模型实践落地之路

光伏含氟废水吸附处理

#光伏含氟废水吸附处理 氟的来源是冰晶石、萤石、氟磷灰等矿物,在钢铁、有色金属冶炼、铝、玻璃、化肥等工业领域得到广泛应用。 目前,在太阳能板生产中,一项关键工艺就是将氟化氢溶液浸泡在硅片上,以除去表面的磷硅玻璃&#xf…

小程序action-sheet结合自定义tabbar显示

要实现此效果,遇到的问题:背景在电脑端调试的情况正常的情况下,手机端点击事件工单,返回回来的时候action-sheet卡住在屏幕上,点击遮罩层都不消失。更奇怪的是 这种情况并不是每次发生,而是有时候发生&…

LeetCode34-34. 在排序数组中查找元素的第一个和最后一个位置

&#x1f517;:代码随想录:二分查找的算法讲解:有关left<right和left<right的区别 class Solution {public int[] searchRange(int[] nums, int target) {int nnums.length;int l0,hn-1;if(numsnull){return null; }if(n0){return new int[]{-1,-1}; }if(target&l…

ROS 学习应用篇(七)ROS中的坐标变换管理之tf初探

坐标变化是机器人中很重要的内容&#xff0c;但是要是概括下来无非就是旋转和平移矩阵。 小海龟跟随实验 做的是两个小海龟之间的跟随&#xff0c;其实就相当于视觉设备和本体设备见有一定的位置差在ros平台下tf坐标变化的实验 首先安装海龟tf变换包 新开终端输入 sudo apt…

杨辉三角00

题目链接 杨辉三角 题目描述 注意点 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和 解答思路 从第一行开始&#xff0c;根据前一行计算该行的值 代码 class Solution {public List<List<Integer>> generate(int numRows) {List<List<…

Mybatis的Mapper接口传递多个参数的时候必须要加@Param注解吗?

答案是&#xff1a;不一定&#xff0c;取决于mybatis的版本、jdk的版本和javac的编译选项。 测试代码 Maven依赖&#xff1a; <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId>…

经典/启发式/改进启发式算法应用于机器人路径规划

路径规划是移动机器人导航规划中的一个十分重要且关键的研究课题。 移动的机器人总是在动态、复杂和不可控的环境中工作&#xff0c;比如对核电站的检查和变电站的检查。然而&#xff0c;复杂的动态工作环境要求移动的机器人能够调整其运动路线&#xff0c;以自主完成任务。使…

【AI视野·今日Sound 声学论文速览 第三十四期】Thu, 26 Oct 2023

AI视野今日CS.Sound 声学论文速览 Thu, 26 Oct 2023 Totally 9 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Dynamic Processing Neural Network Architecture For Hearing Loss Compensation Authors Szymon Drgas, Lars Bramsl w, Archontis Poli…

多标签页文件管理器 - Win系统

多标签页文件管理器 - Win系统 前言My Files-X Free360文件夹升级Win11 前言 Win10系统自带的文件管理器不支持多标签页功能&#xff0c;本文推荐几款多标签页文件管理器&#xff0c;可以在一个文件管理器窗口中打开多个标签页。 My Files-X Free 此文件管理器支持多标签页&…

Linux友人帐之网络编程基础邮件服务器与DHCP服务器

一、邮件服务器概述 1.1邮件服务基础 邮件服务器是一种计算机程序&#xff0c;它通过电子邮件协议接收、存储、处理和发送电子邮件。邮件服务器可以与电子邮件客户端程序&#xff08;如Outlook、Thunderbird等&#xff09;或Web邮件界面&#xff08;如Gmail、Outlook.com等&am…

非常经典的一道SQL报错注入题目[极客大挑战 2019]HardSQL 1(两种解法!)

题目环境&#xff1a; 没错&#xff0c;又是我&#xff0c;这群该死的黑客竟然如此厉害&#xff0c;所以我回去爆肝SQL注入&#xff0c;这次&#xff0c;再也没有人能拿到我的flag了 做了好多这个作者出的题了&#xff0c;看来又要上强度了 判断注入类型 username&#xff1a;a…

CSAPP第四章:Y86 SEQ(指令顺序执行)的硬件结构

SEQ硬件结构的抽象表示。 程序计数器放在寄存器中(左下角&#xff0c;起点)。先向上&#xff0c;再向右 取指&#xff1a;将程序计数器寄存器作为地址&#xff0c;指令存储器读取一个指令的字节&#xff0c;PC增加器计算valP(程序计数器增加后的值)。 解码&#xff1a;寄存器…

产品经理如何独立从0-1着手甲方项目,或者负责一个产品?

作为产品经理&#xff0c;独立从0到1着手甲方项目或负责一个产品是一项重要的任务。以下是一些步骤和建议&#xff0c;可以帮助产品经理成功地完成这个任务。 1. 研究市场和竞争对手&#xff1a;在开始任何项目之前&#xff0c;产品经理应该对市场进行深入研究&#xff0c;并了…

PyTorch:GPU的使用

在深度学习领域&#xff0c;神经网络模型训练所需的计算量巨大&#xff0c;这就对计算资源提出了高要求。为了处理这一问题&#xff0c;图形处理器&#xff08;GPU&#xff09;被引入到深度学习中&#xff0c;其并行计算能力可以极大加速神经网络的训练过程。PyTorch作为一款出…

【数据分享】1961—2022年全国范围的逐日降水栅格数据

降水数据是我们在各项研究中最常用的气象指标之一&#xff01;之前我们给大家分享过来源于国家青藏高原科学数据中心发布的1901-2022年1km分辨率逐月降水栅格数据以及1901-2022年1km分辨率逐年降水栅格数据&#xff08;均可戳我跳转&#xff09;&#xff01;很多小伙伴拿到数据…

【Qt之QWizard问题】setPixmap()设置logo、background、watermark无效不显示解决方案

问题原因&#xff1a; 使用QWizard或者QWizardPage设置像素图&#xff0c;结果设置完不显示效果。 设置示例&#xff1a; setPixmap(QWizard::WatermarkPixmap, QPixmap("xxx/xxx/xxx.png"));setPixmap(QWizard::BackgroundPixmap, QPixmap("xxx/xxx/xxx.png&…

【星海出品】云存储 ceph

https://ceph.com/en/ 建议运行带有两个网络的Ceph存储集群&#xff1a;公共&#xff08;前端&#xff09;网络和集群&#xff08;后端&#xff09;网络。为了支持两个网络&#xff0c;每个Ceph节点都需要有多个NIC。 Monitor 一个Ceph集群需要多个Monitor组成的小集群&#x…