位置: 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全栈开发实战〗(哈士奇新手礼包)

  • QQ 群推广的8个常用方法(qq群适合推广什么)

    QQ 群推广的8个常用方法(qq群适合推广什么)

  • 评论被折叠是什么意思(评价被折叠是违规吗)

    评论被折叠是什么意思(评价被折叠是违规吗)

  • 转发别人的抖音会怎么样(转发别人的抖音别人会知道吗)

    转发别人的抖音会怎么样(转发别人的抖音别人会知道吗)

  • iphone激活失败怎么回事(苹果激活失败是什么意思)

    iphone激活失败怎么回事(苹果激活失败是什么意思)

  • 荣耀30散热方式(荣耀30散热方式怎么样)

    荣耀30散热方式(荣耀30散热方式怎么样)

  • 手机淘宝怎么没有退款申请(手机淘宝怎么没有直播入口)

    手机淘宝怎么没有退款申请(手机淘宝怎么没有直播入口)

  • 华为手机网络不稳定是什么原因(华为手机网络不可用是什么原因)

    华为手机网络不稳定是什么原因(华为手机网络不可用是什么原因)

  • 手机可以注册淘宝店铺吗(手机可以注册淘宝卖家吗)

    手机可以注册淘宝店铺吗(手机可以注册淘宝卖家吗)

  • tf电脑什么牌子(tf属于什么档次的品牌)

    tf电脑什么牌子(tf属于什么档次的品牌)

  • 拼多多sku编码怎么填(拼多多sku编码怎么看)

    拼多多sku编码怎么填(拼多多sku编码怎么看)

  • 华为p40pro灭屏显示耗电吗(华为p40pro灭屏显示)

    华为p40pro灭屏显示耗电吗(华为p40pro灭屏显示)

  • 智伴机器人连不上WiFi(智伴机器人连不上wifi)

    智伴机器人连不上WiFi(智伴机器人连不上wifi)

  • 微信恢复到初始状态要紧吗(微信恢复到初始状态会删除好友吗)

    微信恢复到初始状态要紧吗(微信恢复到初始状态会删除好友吗)

  • 阿里实人认证有风险吗(阿里实人认证单在哪里接)

    阿里实人认证有风险吗(阿里实人认证单在哪里接)

  • oppo浏览器记录怎么恢复(OPPO浏览器记录在什么文件)

    oppo浏览器记录怎么恢复(OPPO浏览器记录在什么文件)

  • 小米9怎么看电池损耗(小米9怎么看电池健康百分比)

    小米9怎么看电池损耗(小米9怎么看电池健康百分比)

  • 为什么手机页面上会出现HD(为什么手机页面频繁出来小广告?)

    为什么手机页面上会出现HD(为什么手机页面频繁出来小广告?)

  • 回收站清空的文件能恢复吗(回收站清空的文件怎么恢复)

    回收站清空的文件能恢复吗(回收站清空的文件怎么恢复)

  • 华为怎样关闭抬起唤醒(华为怎样关闭抬手就亮)

    华为怎样关闭抬起唤醒(华为怎样关闭抬手就亮)

  • 苹果手机怎么隐私照片(苹果手机怎么隐藏联系人)

    苹果手机怎么隐私照片(苹果手机怎么隐藏联系人)

  • 小米的语音助手叫什么(小米的语音助手怎么打开)

    小米的语音助手叫什么(小米的语音助手怎么打开)

  • 荣耀20s上市时间(荣耀20s上市时间和基本参数)

    荣耀20s上市时间(荣耀20s上市时间和基本参数)

  • m1822是什么手机(m12是啥手机)

    m1822是什么手机(m12是啥手机)

  • 苹果无线耳机二代和一代区别(苹果无线耳机二代多少钱)

    苹果无线耳机二代和一代区别(苹果无线耳机二代多少钱)

  • 苹果微信后台收不到消息怎么办(苹果手机微信收取中怎么解决)

    苹果微信后台收不到消息怎么办(苹果手机微信收取中怎么解决)

  • Win10 LTSC 2021(长期服务频道)正式版发布: 附MSDN官方ISO纯净镜像下载

    Win10 LTSC 2021(长期服务频道)正式版发布: 附MSDN官方ISO纯净镜像下载

  • 高手养成计划基础篇-Linux第一季(高手成长礼包)

    高手养成计划基础篇-Linux第一季(高手成长礼包)

  • SpringMVC执行流程(springmvc执行流程简单)

    SpringMVC执行流程(springmvc执行流程简单)

  • 关税减免形式主要包括
  • 增值税应纳税额是什么意思
  • 商誉 会计
  • 企业所得税缴纳时计提可以吗
  • 税金及附加可以为负数吗
  • 旅行社给游客买保险的步骤是什么
  • 企业改制重组增值税优惠政策
  • 必须开具增值税专用发票
  • 铁路运费印花税税率
  • 收到外国客户的祝福怎么回复
  • 工人受伤医药费计入什么科目
  • 转出未交增值税借方余额怎么处理
  • 餐费可以入成本吗
  • 药店可以开具专票吗
  • 转让合同债权
  • 增值税发票不小心撕坏了怎么办
  • 反倾销税税率查询
  • 一般纳税人有哪些费用
  • 其他应付款转营业外收入说明
  • 工会经费 管理费用
  • 出差住宿费普票可以抵扣进项税吗为什么
  • 公积金超过本地怎么办
  • 中小企业货币资金内部控制案例
  • 劳务分包可以开劳务费吗
  • 政府购买缴纳社保吗
  • vmware11安装win10
  • 增值税专用发票和普通发票的区别
  • 手机cpu性能排行榜2023最新天梯图
  • 查账补缴的税的账怎么做
  • if.else
  • 搭建小技巧
  • 谷歌插件下载网址
  • 前端可以用jsp写吗
  • 文件不知道在哪怎么找
  • 其他权益工具是什么会计科目
  • 饲料加工企业可以转让吗
  • 印花税怎么填申报表
  • 个人转帐多少不引起注意
  • 预付款项为什么这么多
  • 用友t3的操作流程
  • 投资性房地产出售
  • 企业信息联网核查系统的意义
  • 长期股权投资成本法转权益法的处理
  • 社会保险中断后还可以续保吗
  • 收到赞助费怎么回复客户
  • 应交税费期初数调整
  • 库存商品暂估入库是什么意思
  • 机动车经销企业开具机动车发票
  • 跨月发票作废怎么做会计分录
  • 款已付未收到发票
  • 基本账户可以转私人账户吗
  • 分支机构属于小型微利企业吗?
  • Linux环境下mysql5.7.13安装教程
  • sql判断是否存在记录
  • windows 2003 r2
  • ubuntu选择语言
  • windows7 设置
  • linux安装atop
  • c盘里面放什么
  • iis搭建php环境
  • winxp升级win7教程图文
  • Linux下通过script 命令记录(数据库)操作步骤
  • linux ids
  • WIN7系统还原
  • Perl实现高水线算法(解决多值比较问题方法)
  • jquery实现
  • 链接符怎么删除
  • 从零开始学什么好
  • javascript操作文件
  • mac安装nodejs的权限问题
  • python开发环境有
  • python如何编写
  • js文字滚动代码
  • javascript学习指南
  • jQuery插件AjaxFileUpload实现ajax文件上传
  • jquery获取table指定的行列
  • jquery使用方法
  • 江苏国税增值税退税怎么操作
  • 购房发票的发票代码是哪个
  • 亳州契税补贴如何领取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设