位置: IT常识 - 正文

Ubuntu搭建web站点并发布公网访问【内网穿透】(ubuntu搭建web服务器流程)

编辑:rootadmin
Ubuntu搭建web站点并发布公网访问【内网穿透】 文章目录前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名前言

推荐整理分享Ubuntu搭建web站点并发布公网访问【内网穿透】(ubuntu搭建web服务器流程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ubuntu搭建个人网站,ubuntu搭建个人网站,ubuntu搭建web服务器流程,ubuntuserver搭建网站,ubuntu搭建个人网站,ubuntu20.04搭建web服务器,ubuntu20.04搭建web服务器,ubuntu搭建web服务器流程,内容如对您有帮助,希望把文章链接给更多的朋友!

网:我们通常说的是互联网;站:可以理解成在互联网上的一个房子。把互联网看做一个城市,城市里面的每一个房子就是一个站点,房子里面放着你的资源,那如果有人想要访问你房子里面的东西怎么办?

在现实生活中,去别人家首先要知道别人的地址,某某区某某街道,几号,在互联网中也有地址的概念,就是ip。通过ip我们就能找到在互联网上面的站点,端口可以看做是这个房子的入口,不同的入口所看到的东西也就不一样,如从大门(80端口)进是客厅,从窗户(8080端口)进是书房。

接下来我们将通过简单几步来在ubuntu搭建一个web站点 html小游戏,并使用cpolar内网穿透将其发布到公网上,使得公网用户也可以正常访问到本地web站点的小游戏。

1. 本地环境服务搭建

apach2是一个服务,也可以看做一个容器,也就是上面说的房子,运行在ubuntu里,这个服务可以帮助我们把我们自己的网站页面通过相应的端口让除本机以外的其他电脑访问。

下载apach2

sudo apt install apache2 php -y

下载好后启动apache2

sudo service apache2 restart

然后打开Ubuntu 浏览器,输入:http://localhost 即可看到我们apache 默认的页面,此时说明本地站点已经搭建好了。

进入Apache默认服务器主目录路径,这个目录放的是想要让别人看到的资源,如一张图片,一个html页面等

cd /var/www/html

进入后删掉index.html这个文件,由于apache默认页面并不是我们自己想要的页面,我们想要换成自己喜欢的页面,所以需要删掉.执行以下命令:

sudo rm -rf index.html

为了达到测试效果,我们设置一个html页面小游戏,创建名称为game.html的页面

sudo vim game.html

按i键 进入编辑模式,复制以下html代码进去(复制全部)

<!DOCTYPE html><html> <head><h4>Take it Easy!Please playing Game</h4></head> <body><div></div> <!-- 4个board --> <div id="board1" style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cadetblue;"></div> <div id="board2" style="position: absolute; width:80px; height:10px; left:520px; top:555px; background-color: cadetblue;"></div> <div id="board3" style="position: absolute; width:80px; height:10px; left:620px; top:555px; background-color: cadetblue;"></div> <div id="board4" style="position: absolute; width:80px; height:10px; left:720px; top:555px; background-color: cadetblue;"></div> <!-- 小球 --> <div id="ball" class="circle" style="width:20px; height:20px; background-color:crimson; border-radius: 50%; position:absolute; left:600px; top:100px"></div> <!-- 框 --> <div id="box" style="border: 5px solid #555555; width:400px; height:550px; display=hide"></div> <!-- 分数 过的board越多,分数越高 --> <div id="score" style="width:200px; height:10px; position:absolute; left:900px; font-family:'隶书'; font-size: 30px;">score: 0</div> <!-- 游戏结束 --> <div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px; font-family:'隶书'; font-size: 30px; display: none;">Game Over</div> <script> // 设置box的样式 var box = document.getElementById("box"); box.style.position = "absolute"; box.style.left = "400px"; // 设置board的样式 var board1 = document.getElementById("board1"); var board2 = document.getElementById("board2"); var board3 = document.getElementById("board3"); var board4 = document.getElementById("board4"); // 声音 var shengyin = new Audio(); shengyin.src = "声音2.mp3"; shengyinFlag = 0; // 用来表示小球在第几块board上 // 键盘事件函数 var ball = document.getElementById("ball"); document.onkeydown = f; function f(e){ var e = e || window.event; switch(e.keyCode){ case 37: // 按下左键,小球左移,但不要超过左边框 if(ball.offsetLeft>=box.offsetLeft + 10) ball.style.left = ball.offsetLeft - 8 + "px"; break; case 39: // 按下右键,小球右移,但不要超过由边框 if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10) ball.style.left = ball.offsetLeft + 8 + "px"; break; case 32: } } // 定义一个分数变量 var fenshu = 0; // 定义一个函数,移动给定的一个board function moveBoard(board) { var t1 = board.offsetTop; if(t1<=0) { // 如果board移到最上面了,就随机换个水平位置,再移到最下面 t2 = Math.floor(Math.random() * (720- 420) + 420); board.style.left = t2 + "px"; board.style.top = "555px"; fenshu += 1; //分数增加1 document.getElementById("score").innerHTML = "score " + fenshu; } // else board.style.top = board.offsetTop - 1 + "px"; } // 定义小球的速度变量 var startSpeed = 1; var ballSpeed =startSpeed; // step函数是游戏界面的单位变化函数 function step() { // board直接上下隔得太近,就逐个移动,否则,同时移动 var t1 = Math.abs(board1.offsetTop - board2.offsetTop); var t2 = Math.abs(board2.offsetTop - board3.offsetTop); var t3 = Math.abs(board3.offsetTop - board4.offsetTop); // 定义一个board之间的间隔距离 var t4 = 140; if(t1<t4) { moveBoard(board1); } else if(t2<t4) { moveBoard(board1); moveBoard(board2); } else if(t3<t4) { moveBoard(board1); moveBoard(board2); moveBoard(board3); } else { moveBoard(board1); moveBoard(board2); moveBoard(board3); moveBoard(board4); } // 定义小球的垂直移动规则,1、向下匀加速运动,2、如果碰到board就被board持续抬上去, // 直到按左右键离开了该board // 如果小球的纵坐标等于某个board的纵坐标,就被抬起 var t5 = Math.abs(ball.offsetTop - board1.offsetTop); var t6 = Math.abs(ball.offsetTop - board2.offsetTop); var t7 = Math.abs(ball.offsetTop - board3.offsetTop); var t8 = Math.abs(ball.offsetTop - board4.offsetTop); if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth) { ball.style.top = board1.offsetTop - ball.offsetHeight + "px"; ballSpeed = startSpeed; if(shengyinFlag != 1) { shengyin.play(); shengyinFlag = 1; } } else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth) { ball.style.top = board2.offsetTop - ball.offsetHeight + "px"; ballSpeed = startSpeed; if(shengyinFlag != 2) { shengyin.play(); shengyinFlag = 2; } } else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth) { ball.style.top = board3.offsetTop - ball.offsetHeight + "px"; ballSpeed = startSpeed; if(shengyinFlag != 3) { shengyin.play(); shengyinFlag = 3; } } else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth) { ball.style.top = board4.offsetTop - ball.offsetHeight + "px"; ballSpeed = startSpeed; if(shengyinFlag != 4) { shengyin.play(); shengyinFlag = 4; } } else { ballSpeed = ballSpeed + 0.01; // 数字相当于加速度 ball.style.top = ball.offsetTop + ballSpeed + "px"; } // ballSpeed = ballSpeed + 0.01; // 数字相当于加速度 // ball.style.top = ball.offsetTop + ballSpeed + "px"; // 如果小球跑出来box,就结束游戏 if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight) { clearInterval(gameover); ball.style.display = 'none'; board1.style.display = 'none'; board2.style.display = 'none'; board3.style.display = 'none'; board4.style.display = 'none'; var gg = document.getElementById("gg"); //显示游戏结束 gg.style.display = 'block'; } } var gameover = setInterval("step();", 8); </script> </body></html>

复制完后按Esc键退出编辑,接着输入冒号:wq保存退出即可

2. 局域网测试访问

接着浏览器输入http://localhost/game.html,即可看到html页面的小游戏站点,由于部署的是静态站点,不需要重启服务。

3. 内网穿透

由于这个站点目前只能在本地被访问到,为了使所有人都可以访问,我们需要将这个本地基础站点发布到公网。这里我们可以通过cpolar内网穿透工具来实现,它支持 http/https/tcp协议,无需公网IP ,也不用设置路由器,可以很容易将本地站点发布到公网供所有人访问。

3.1 ubuntu本地安装cpolar

cpolar官网:https://i.cpolar.com/m/4jCo

cpolar支持一键自动安装脚本curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bashtoken认证

登录cpolar官网后台,点击左侧的验证,查看自己的认证token,之后将token贴在命令行里:

cpolar authtoken xxxxxxx

简单穿透测试,穿透成功有正常生成公网地址,按ctrl+c退出cpolar http 8080向系统添加服务,将cpolar配置为开机自启sudo systemctl enable cpolar启动cpolar服务sudo systemctl start cpolar查看服务状态,正常显示为active表示启动成功,为正常在线状态sudo systemctl status cpolar3.2 创建隧道Ubuntu搭建web站点并发布公网访问【内网穿透】(ubuntu搭建web服务器流程)

cpolar安装成功之后,在浏览器上访问本地9200端口,登录cpolar web UI管理界面。

点击左侧仪表盘的隧道管理——创建隧道:

隧道名称:可自定义,注意不要重复协议:http本地地址:80端口类型:随机域名地区:China vip

点击创建

隧道创建成功后,点击左侧的状态——在线隧道列表,可以看到刚刚创建的隧道已经有生成了相应的公网地址,将其复制下来,接下来测试访问一下。

3.3 测试公网访问

打开浏览器访问刚刚所复制的公网地址,注意,后面要加上路径/game.html,出现游戏界面即成功。

游戏控制使用:键盘上下左右键

4. 配置固定二级子域名

由于以上所创建的隧道选择的是随机域名,所生成的公网地址会在24小时内随机变化,对于需要长期访问的用户来讲较为不方便。不过我们可以为其配置一个固定的二级子域名来进行访问,改地址不会随机变化。

注意:配置固定二级子域名功能需要升级至基础版套餐或以上才支持。

4.1 保留一个二级子域名

登录cpolar官网后台,点击左侧的预留,找到保留二级子域名:

地区:选择China VIP二级域名:可自定义填写描述:即备注,可自定义填写

点击保留

提示子域名保留成功,复制所保留的二级子域名

4.2 配置二级子域名

访问本地9200端口登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

修改隧道信息,将保留成功的二级子域名配置到隧道中

域名类型:选择二级子域名Sub Domain:填写保留成功的二级子域名,本例为test01

点击更新

提示更新隧道成功,点击左侧仪表盘的状态——在线隧道列表,可以看到公网地址已经更新为保留成功的二级子域名,将其复制下来。

4.3 测试访问公网固定二级子域名

我们使用任意浏览器,输入刚刚配置成功的公网固定二级子域名+/game.html即可看到我们创建的站点小游戏

本文链接地址:https://www.jiuchutong.com/zhishi/299240.html 转载请保留说明!

上一篇:睿智的目标检测65——Pytorch搭建DETR目标检测平台(睿智目标检测yolov8)

下一篇:【哈士奇赠书活动 - 18期】-〖Flask Web全栈开发实战〗(哈士奇新手礼包)

  • 支付宝多少分可以借充电宝

    支付宝多少分可以借充电宝

  • rtx是a卡还是n卡

    rtx是a卡还是n卡

  • 腾讯会议如何关闭声音(腾讯会议如何关闭镜像)

    腾讯会议如何关闭声音(腾讯会议如何关闭镜像)

  • 电脑打字英文怎么转换中文(电脑打字英文怎么变汉字)

    电脑打字英文怎么转换中文(电脑打字英文怎么变汉字)

  • 苹果8p重启键在哪里(苹果8plus重启快捷键)

    苹果8p重启键在哪里(苹果8plus重启快捷键)

  • 苹果11微信听语音黑屏后不亮怎么处理(苹果11微信听语音听筒没声音)

    苹果11微信听语音黑屏后不亮怎么处理(苹果11微信听语音听筒没声音)

  • 苹果手机日版美版国行的区别(苹果手机日版美版哪个贵)

    苹果手机日版美版国行的区别(苹果手机日版美版哪个贵)

  • 华为屏幕边缘显示不全(华为屏幕边缘显示不清晰)

    华为屏幕边缘显示不全(华为屏幕边缘显示不清晰)

  • vivox20隐藏软件功能在哪里(vivox20a隐藏软件功能)

    vivox20隐藏软件功能在哪里(vivox20a隐藏软件功能)

  • 4g手机可以用5g路由器吗(4g手机可以用5g卡么)

    4g手机可以用5g路由器吗(4g手机可以用5g卡么)

  • 手机拨打电话自动挂断是哪里坏了(手机拨打电话自动就挂了)

    手机拨打电话自动挂断是哪里坏了(手机拨打电话自动就挂了)

  • oppor11s支持nfc吗(oppor11s有nfc吗)

    oppor11s支持nfc吗(oppor11s有nfc吗)

  • 支付宝能ipad手机同时在线吗(ipad支付宝可以跟手机同步登陆吗)

    支付宝能ipad手机同时在线吗(ipad支付宝可以跟手机同步登陆吗)

  • iphone11怎么用siri(iPhone11怎么用NFC刷校园卡)

    iphone11怎么用siri(iPhone11怎么用NFC刷校园卡)

  • ipad自带的绘画软件叫什么(ipad自带的绘画软件不小心删了怎么办)

    ipad自带的绘画软件叫什么(ipad自带的绘画软件不小心删了怎么办)

  • 桌面出版系统最初是谁提出的(桌面出版系统最好的软件)

    桌面出版系统最初是谁提出的(桌面出版系统最好的软件)

  • 魅族如何取消隐私模式(魅族怎么关闭隐藏应用)

    魅族如何取消隐私模式(魅族怎么关闭隐藏应用)

  • iphone11和xr屏幕一样吗(iPhone11和XR屏幕通用吗)

    iphone11和xr屏幕一样吗(iPhone11和XR屏幕通用吗)

  • 苹果微信怎么定位国外(苹果微信怎么定制)

    苹果微信怎么定位国外(苹果微信怎么定制)

  • 苹果8p怎么滚动截屏(苹果8plus滚动截屏怎么用)

    苹果8p怎么滚动截屏(苹果8plus滚动截屏怎么用)

  • 抖音怎么图片卡点(抖音怎么图片卡点音乐)

    抖音怎么图片卡点(抖音怎么图片卡点音乐)

  • 怎样看手机型号(苹果手机怎样看手机型号)

    怎样看手机型号(苹果手机怎样看手机型号)

  • iphone6s支持快充吗(iphone6s支持快充吗?)

    iphone6s支持快充吗(iphone6s支持快充吗?)

  • 华为p30防水等级(华为p30p防水级别)

    华为p30防水等级(华为p30p防水级别)

  • Win10一直在无限循环登录界面怎么解决?(win10开机无限werfault一直刷新)

    Win10一直在无限循环登录界面怎么解决?(win10开机无限werfault一直刷新)

  • win10专业版永久激活秘钥/激活码/序列号推荐 附激活工具(WIN10专业版永久激活)

    win10专业版永久激活秘钥/激活码/序列号推荐 附激活工具(WIN10专业版永久激活)

  • 人脸检测5种方法(人脸检测5种方式)

    人脸检测5种方法(人脸检测5种方式)

  • 太阳能发电税收优惠政策
  • 残保金滞纳金能超过本金吗
  • 小规模公司交税时间
  • 银行取钱需要签协议吗
  • 工程检测单位
  • 境外增值税代扣代缴
  • 经营活动现金净流量在报表上怎么看
  • 外币资产汇兑损益计算
  • 小规模纳税人按月申报还是按季申报
  • 营改增后房地产企业如何开票
  • 公司给自然人咨询怎么说
  • 餐饮发票税钱
  • 固定资产分期抵扣怎么申报增值税?
  • 票据结算包括哪几项
  • 主营业务收入如何确认
  • 小规模企业核定征收
  • 接受捐赠后会引起
  • 金税三期啥意思
  • 批量删除 超链接
  • 开机自动连接宽带怎么设置w11
  • 企业出售产品前,预收客户一笔货款
  • macbook直接显示桌面
  • 工程审计需要什么条件
  • 土地承包费收入怎么做账务处理
  • php流程引擎
  • nodejs安装教程
  • php _dir_
  • 个体工商户筹集资金的难易程度
  • 找潜水员
  • 不合格的设备怎么处理
  • 锡特f8
  • yolov5训练自己的模型配置到单片机
  • vue过滤器可以异步吗
  • php手机验证码验证
  • 固定资产的原价包括增值税吗
  • 法人股东分红要缴纳多少税
  • mongodb主备
  • 如何用织梦在本地搭建网站
  • 银行手续费和利息会计分录
  • 汽车车票增值税税率
  • 工程施工新科目
  • 资产减值损失应在计算()时扣除
  • Windows Server 2003下修改MySQL 5.5数据库data目录
  • 小规模纳税人补开发票如何申报
  • 人力资源社保代缴
  • 事业单位会计的特点
  • 转出未交增值税最终怎么转平
  • 税控盘全额抵减如何填写申报表
  • 应交税费附加税明细科目
  • 公司向个人借款的会计分录怎么做
  • 企业给加盟店的钱怎么算
  • 跨年度暂估成本的账务处理
  • 小规模纳税人标准500万是含税吗
  • 收到支票如何去银行兑现
  • 购车怎么做会计分录
  • 建账的要点
  • 系统存储过程以什么为前缀
  • ubuntu14.04升级
  • windows7可以打开多个窗口
  • win7系统点击桌面图标闪退
  • Windows Update XP SP3官方下载地址
  • windows 8怎么样
  • windows10粘滞键
  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
  • Ubuntu 16.04 64位中搭建Node.js开发环境教程
  • Android游戏开发读后感
  • linux如何启动tomcat
  • linux安装unixodbc
  • unity3d状态机
  • 浏览器复制插件在哪
  • 简述ajax
  • python迭代类型
  • gridlayout动态添加view
  • 广东省广州市税务局分数线
  • 残疾人就业有哪些选择
  • 小规模开票税金怎么算
  • 云南省税务干部学校是干什么的
  • 国税 地税比例
  • 汽车契税和购置税一样吗
  • 江苏地税网站查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设