相关推荐recommended
【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问
作者:mmseoamin日期:2023-12-02

目录

前言

1. 本地环境服务搭建

2. 局域网测试访问

3. 内网穿透

3.1 ubuntu本地安装cpolar

3.2 创建隧道

3.3 测试公网访问

4. 配置固定二级子域名

4.1 保留一个二级子域名

4.2 配置二级子域名

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


前言

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

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

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

1. 本地环境服务搭建

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

下载apach2

sudo apt install apache2 php -y

【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171101,第1张

下载好后启动apache2

sudo service apache2 restart

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

【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,第2张

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

cd /var/www/html

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

sudo rm -rf index.html

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

sudo vim game.html

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



    

Take it Easy!Please playing Game

score: 0 Game Over

【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,第3张

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

2. 局域网测试访问

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

【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171104,第4张

3. 内网穿透

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

3.1 ubuntu本地安装cpolar

如何在ubuntu上安装cpolar内网穿透,请参考这篇文章教程

  • Ubuntu用户安装Cpolar内网穿透

    3.2 创建隧道

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

    【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,第5张

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

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

      点击创建

      【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171105,第6张

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

      【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171106,第7张

      3.3 测试公网访问

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

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

      【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171107,第8张

      4. 配置固定二级子域名

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

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

      4.1 保留一个二级子域名

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

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

        点击保留

        【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171108,第9张

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

        【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171109,第10张

        4.2 配置二级子域名

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

        【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171110,第11张

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

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

          点击更新

          【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171111,第12张

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

          【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171112,第13张

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

          我们使用任意浏览器,输入刚刚配置成功的公网固定二级子域名+/game.html就可看到我们创建的站点小游戏了,且该地址不会再随机变化了。

          【内网穿透】在Ubuntu搭建Web小游戏网站,并将其发布到公网访问,20230215171113,第14张