Linux使用宝塔面板搭建网站，并内网穿透实现公网访问

文章目录

      • 前言
      • 1. 环境安装
      • 2. 安装cpolar内网穿透
      • 3. 内网穿透
      • 4.固定http地址
      • 5. 配置二级子域名
      • 6.创建一个测试页面

前言

宝塔面板作为简单好用的服务器运维管理面板，它支持Linux/Windows系统，我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等，通过Web端轻松管理服务器。

以下教程，我们将演示使用宝塔面板快速简单搭建本地web网站，并做内网穿透，实现不在同个局域网下的用户也可以访问到本地web站点，无需公网IP，也不用设置路由器。

1. 环境安装

安装apache服务器,在宝塔面板中我们点击网站,然后会提示安装apache服务器。

image-20230307143843485

选择极速安装

image-20230307155129355

然后等待安装完成即可,安装完成在左边消息列表会提示

image-20230307155221216

2. 安装cpolar内网穿透

https://www.cpolar.com/

打开宝塔终端命令窗口,使用cpolar一件安装脚本:

curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash

image-20230303183721806

  • token认证

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

cpolar authtoken xxxxxxx

20230111103532

  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar
  • 开放9200端口

在宝塔面板中选择安全.然后开放9200端口

image-20230303184430176

  • 登录cpolar web UI 管理界面

然后局域网ip访问9200端口即可出现cpolar管理界面，输入cpolar邮箱账号进行登陆

image-20230303184618711

3. 内网穿透

登录cpolar web UI管理界面后，我们创建一个http隧道，指向80端口,因为apache服务默认是80端口

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

点击创建

image-20230307161358154

创建成功后我们打开在线隧道列表复制创建的公网地址

image-20230307161716775

然后我们打开宝塔面板,点击网站,选择添加站点,把复制的公网地址粘贴到域名的参数框,然后点击提交

image-20230307162110990

这个时候我们可以看到站点创建成功

image-20230307162248903

然后我们再使用复制的公网地址,打开浏览器访问,出现欢迎页表示成功

image-20230307163357047

4.固定http地址

由于刚刚创建隧道使用的是随机临时地址，该地址会在24小时内发生变化，为了长期远程访问，我们接下来将这个公网地址配置为固定的。

需升级至基础套餐或以上才支持配置二级子域名

登录cpolar官网后台，点击左侧仪表盘的预留，找到保留二级子域名，为http隧道保留一个二级子域名。

  • 地区：选择服务器地区
  • 名称：填写您想要保留的二级子域名（可自定义）
  • 描述：即备注，可自定义填写

image-20230307164936590

本例保留一个名称为mywebsitegame的二级子域名。子域名保留成功后，我们将子域名复制下来，接下来需要将其配置到隧道中去。

image-20230307165346945

5. 配置二级子域名

登录cpolar web ui管理界面。点击左侧仪表盘的隧道管理——隧道列表，找到需要配置二级子域名的隧道（本例中为apache website隧道），点击右侧的编辑

image-20230307165440111

修改隧道信息，将二级子域名配置到隧道中：

  • 域名类型：改为选择二级子域名
  • Sub Domain：填写我们刚刚所保留的二级子域名（本例为mywebsitegame）

修改完成后，点击更新

image-20230307165524932

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

image-20230307165845253

然后我们打开宝塔面板,找到站点,点击设置

image-20230307170712990

添加一个我们固定的公网地址域名

image-20230307170900973

然后把之前创建的随机地址删除

image-20230307170948787

然后我们打开浏览器,使用固定的公网地址进行访问,以上我们就配置好了站点远程访问

image-20230307172031135

6.创建一个测试页面

点击站点根目录路径,直接点击

image-20230307172438126

新建一个名字为game.html页面

image-20230307172627027

然后双击文件编辑,把下面代码复制进去(贪吃蛇小游戏),然后Ctrl+S保存

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇</title>
	<meta charset="UTF-8">
	<meta name="keywords" content="贪吃蛇">
	<meta name="Description" content="这是一个初学者用来学习的小游戏">
	<style type="text/css">
	*{margin:0;}
	.map{margin:100px auto;
		height:600px;
		width:900px;
		background:#00D0FF;
		border:10px solid #AFAEB2;
		border-radius:8px;
	}
	</style>
</head>
 
<body>
<div class="map">
<canvas id="canvas" height="600" width="900">
	
</canvas>
</div>
 
<script type="text/javascript">
 //获取绘制工具
	/*
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");//获取上下文
	ctx.moveTo(0,0);
	ctx.lineTo(450,450);*/
	var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    /*ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(450,450);
    ctx.stroke();
    */
 
    var snake =[];//定义一条蛇，画蛇的身体
    var snakeCount = 6;//初始化蛇的长度
	var foodx =0;
	var foody =0;
    var togo =0;
    function drawtable()//画地图的函数
    {
 
 
    	for(var i=0;i<60;i++)//画竖线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(15*i,0);
    		ctx.lineTo(15*i,600);
    		ctx.closePath();
    		ctx.stroke();
    	}
        for(var j=0;j<40;j++)//画横线
    	{
    		ctx.strokeStyle="black";
    		ctx.beginPath();
    		ctx.moveTo(0,15*j);
    		ctx.lineTo(900,15*j);
    		ctx.closePath();
    		ctx.stroke();
    	}
    	
    	for(var k=0;k<snakeCount;k++)//画蛇的身体
			{
			ctx.fillStyle="#000";
			if (k==snakeCount-1)
			{
				ctx.fillStyle="red";//蛇头的颜色与身体区分开
			}
			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。
			
			}
			//绘制食物	
    		ctx.fillStyle ="black";
	     ctx.fillRect(foodx,foody,15,15);
	     ctx.fill();
    	
    }
 
    
    function start()//定义蛇的坐标
    {
    	//var snake =[];//定义一条蛇，画蛇的身体
        //var snakeCount = 6;//初始化蛇的长度
		
		for(var k=0;k<snakeCount;k++)
    		{
    			snake[k]={x:k*15,y:0};
    			
            }
			
		  drawtable();
          addfood();//在start中调用添加食物函数
 
    }
 
    function addfood()
	{
	foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
	foody = Math.floor(Math.random()*40)*15;
		
		for (var k=0;k<snake;k++)
		{
			if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
			{	
			addfood();
			}
		}
	
	
	}	
    		
   function move()
   {
	switch (togo)
	{
	case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
	case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
	case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
	case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
	case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
	case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
	default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
	}
    snake.shift();//删除数组第一个元素
   	ctx.clearRect(0,0,900,600);//清除画布重新绘制
   	isEat();
	isDead();
	drawtable();
   } 			
   
   function keydown(e)
   {
   switch(e.keyCode)
		{
         case 37: togo=1; break;
		 case 38: togo=2; break;
		 case 39: togo=3; break;
		 case 40: togo=4; break;
		 case 65: togo=5; break;
		 case 68: togo=6; break;
		}
   }
   
   function isEat()//吃到食物后长度加1
   {
    if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
   {
		addfood();
		snakeCount++;
		snake.unshift({x:-15,y:-15});
   }
   
   }
   //死亡函数
   function isDead()
   {
    if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
		{
        

		window.location.reload();
		}
   }
   
    document.onkeydown=function(e)
{
	keydown(e);
 
} 
window.onload = function()//调用函数
{ 
	start();
	setInterval(move,150);
	drawtable();
	
	
 
}
</script>
</body>
</html>

image-20230307172848766
然后我们浏览器使用公网地址加这个html文件访问,即可看到我们部署的小游戏。

image-20230307173606348

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/2620.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

线程安全(重点)

线程安全(重点)

文章目录一.线程安全的概念1.1 线程安全的概念1.2 线程不安全的原因1.3 解决线程不安全二.synchronized-monitor lock(监视器锁)2.1 synchronized的特性(1)互斥(2)刷新内存(3)可重入2.2 synchronied使用方法1.直接修饰普通方法:2.修饰静态方法:3.修饰代码块:三.死锁3.1死锁的情…
阅读更多...
Tomcat And Servlet (1)

Tomcat And Servlet (1)

文章目录1. Tomcat2. 下载安装3. 启动 Tomcat4. 运行 Tomcat5. Servlet5.1 创建项目5.2 引入依赖5.3 创建目录5.4 编写代码5.5 打包程序5.6 部署程序5.7 验证程序6. 安装 Smart Tomcat 插件7. 使用 SmartTomcat 插件8. 常见错误8.1 出现 4048.2 出现 4058.3 出现 5008.4 出现空…
阅读更多...
在linux上安装配置nodejs工具，设置环境变量，设置npm国内镜像源，提高下载速度。

在linux上安装配置nodejs工具，设置环境变量，设置npm国内镜像源，提高下载速度。

目录前言1&#xff0c;关于nodejs2&#xff0c;配置环境变量3&#xff0c;总结前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/details/108971807 未经博主允许不得转载。 博主CSDN地址是&#xff1a;https://blog.csdn.net/freewebsys 博主掘金地址是&…
阅读更多...
CSRF漏洞的概念、利用方式、防御方案

CSRF漏洞的概念、利用方式、防御方案

CSRF漏洞1.CSRF的概念1.1 什么是CSRF&#xff1f;1.2 基本攻击流程2.CSRF攻击实现2.1 靶场练习2.2 CSRFXSS组合拳2.2.1 攻击页面部署2.2.2 构造恶意xss语句&#xff0c;实现重复生效的CSRF3. CSRF攻击的防御**3.1 只使用JSON API****3.2 验证HTTP Referer字段****3.3 在请求地址…
阅读更多...
卫星通信1

卫星通信1

偏心率为0&#xff0c;则椭圆变成圆形 偏心率为1 则长轴相比短轴无限长 此时椭圆轨道变成一条直线 半焦距 ae 地球轨道面&#xff0c;称为黄道面 赤道面 中间有个夹角&#xff0c;就是23.5 一般是地心坐标系 沿椭圆轨道探测范围大 在近地点不能提供任何服务,因为覆盖面积太…
阅读更多...
【java】笔试强训Day3【在字符串中找出连续最长的数字串与数组中出现次数超过一半的数字】

【java】笔试强训Day3【在字符串中找出连续最长的数字串与数组中出现次数超过一半的数字】

目录 ⛳选择题 1.以下代码运行输出的是 2.以下程序的输出结果为 3.下面关于构造方法的说法不正确的是 ( ) 4.在异常处理中&#xff0c;以下描述不正确的有&#xff08; &#xff09; 5.下列描述中&#xff0c;错误的是&#xff08; &#xff09; 6.…
阅读更多...
Linux下的coredump和kdump

Linux下的coredump和kdump

目录前言coredump是什么&#xff1f;运行异常代码查看本地文件多出的core文件gdb调试带上core文件kdump机制前言 在我们之前介绍进程等待的时候&#xff0c;曾经介绍过父进程会等待子进程并且回收子进程的运行结束状态&#xff08;status输出型参数&#xff09;:参考博客 当进…
阅读更多...
【Node.js】身份认证，Cookie和Session的认证机制，express中使用session认证和JWT认证

【Node.js】身份认证，Cookie和Session的认证机制，express中使用session认证和JWT认证

Node.jsWeb开发模式如何选择Web开发模式身份认证什么是身份认证为什么要身份认证不同开发模式的身份认证Session认证机制提高身份认证的安全性Session的工作原理Express中使用Session认证Session认证机制的局限性JWT认证机制JWT的工作原理JWT的组成部分Express中使用JWT在登录成…
阅读更多...
Java - 配置中心初体验

Java - 配置中心初体验

目录 前言 配置中心介绍 什么是配置中心 Nacos配置中心 数据结构 命名空间 分组 服务 配置中心添加配置 读取配置 本地添加依赖 本地添加配置 测试 结语 前言 前文讲了ELK&#xff0c;ELK说简单也简单&#xff0c;说复杂也复杂&#xff0c;但说实话&#xff0c;微…
阅读更多...
数据库知识总结

数据库知识总结

数据库知识点总结个人向。 目录第一章 绪论第二章 关系数据库第三章 关系数据库标准语言SQL第四章 数据库安全性第五章 数据库完整性第六章 关系数据理论第七章 数据库设计第十章 数据库恢复技术第十一章 并发控制第一章 绪论 数据(data): 描述事物的符号记录。 数据库(DataB…
阅读更多...
基于注解的Spring-AOP应用实例

基于注解的Spring-AOP应用实例

1、应用场景 需求是&#xff1a;在a系统每次字典数据变更时&#xff0c;都需要给b系统同步一次数据&#xff0c;以保持两个系统字典数据相同。 字典的增、删、改、合并接口&#xff0c;都需要执行数据推送操作&#xff0c;如果不用AOP、这些接口都需要增加推送操作的代码&…
阅读更多...
Docker常规安装简介

Docker常规安装简介

总体步骤 搜索镜像拉取镜像查看镜像启动镜像,服务端口映射停止容器移除容器 案例 安装tomcat docker hub上面查找tomcat镜像&#xff0c;docker search tomcat从docker hub上拉取tomcat镜像到本地 docker pull tomcatdocker images查看是否有拉取到的tomcat 使用tomcat镜像创…
阅读更多...
【带有平移和倾斜头的DIY相机滑块–基于Arduino的项目】

【带有平移和倾斜头的DIY相机滑块–基于Arduino的项目】

【带有平移和倾斜头的DIY相机滑块–基于Arduino的项目】 1. 前言2. 总体构思3. 构建相机滑块4. 电路图5. 印刷电路板设计6. 组装电子设备7. DIY 相机滑块 Arduino 代码1. 前言 在本教程中，我们将学习如何制作带有平移和倾斜头的电动相机滑块。这个基于 Arduino 的项目是 100%…
阅读更多...
【Linux】进程概念二

【Linux】进程概念二

文章目录进程概念二1. 进程状态2. 进程状态查看3. 僵尸进程3.1 僵尸进程的危害4. 孤儿进程5. 环境变量5.1 常见环境变量5.2 查看环境变量的方法5.3 测试PATH5.4 环境变量相关的命令5.5 环境变量的组织方式5.6 通过代码获取环境变量6. 程序地址空间7. 进程地址空间8. 扩展8.1 为…
阅读更多...
如何安装nvm（nvm 安装教程）

如何安装nvm（nvm 安装教程）

如何安装nvm（nvm 安装教程） 一、nvm是什么？ nvm是一个node的版本管理工具，可以简单操作node版本的切换、安装、查看等等，与npm不同的是，npm是依赖包的管理工具。 二、安装nvm 1.nvm下载地址 https://github.com/coreybutler/nvm-windows/releases提示：1.nvm-setup.z…
阅读更多...
功能测试转型测试开发年薪27W，又一名功能测试摆脱点点点，进了大厂

功能测试转型测试开发年薪27W，又一名功能测试摆脱点点点，进了大厂

咱们直接开门见山&#xff0c;没错我的粉丝向我投来了喜报&#xff0c;从功能测试转型测试开发&#xff0c;进入大厂&#xff0c;摆脱最初级的点点点功能测试&#xff0c;拿到高薪&#xff0c;遗憾的是&#xff0c;这名粉丝因为个人原因没有经过指导就去面试了&#xff0c;否则…
阅读更多...
CCM调试的理论依据

CCM调试的理论依据

前言 很久之前在网上看到一些CCM的调试总结&#xff0c;但是没有理论依据&#xff0c;经过我本人的推理&#xff0c;以及和结果比对&#xff0c;这里总结一个我称之为色相环补色原理的调试理论。 CCM理论&#xff1a; CMOS sensor 使用颜色滤波阵列&#xff08;Color Filter…
阅读更多...
YOLOV8改进：如何增加注意力模块？（以CBAM模块为例）

YOLOV8改进：如何增加注意力模块？（以CBAM模块为例）

YOLOV8改进&#xff1a;如何增加注意力模块&#xff1f;&#xff08;以CBAM模块为例&#xff09;前言YOLOV8nn文件夹modules.pytask.pymodels文件夹总结前言 因为毕设用到了YOLO&#xff0c;鉴于最近V8刚出&#xff0c;因此考虑将注意力机制加入到v8中。 YOLOV8 代码地址&am…
阅读更多...
蓝桥杯每日一真题——[蓝桥杯 2021 省 B] 杨辉三角形（二分+规律）

蓝桥杯每日一真题——[蓝桥杯 2021 省 B] 杨辉三角形（二分+规律）

文章目录[蓝桥杯 2021 省 B] 杨辉三角形题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1提示思路&#xff1a;全部代码&#xff1a;[蓝桥杯 2021 省 B] 杨辉三角形 题目描述 下面的图形是著名的杨辉三角形: 如果我们按从上到下、从左到右的顺序把所有数排成一列&…
阅读更多...
配置Maven环境变量

配置Maven环境变量

我们现在进行项目开发时&#xff0c;项目中一般都会有依赖包的存在&#xff0c;而这些依赖包一般都是利用Maven进行下载管理的。 一. 下载&安装 下载地址 maven下载地址如下&#xff0c;各位请选择对应系统的maven版本进行下载。 https://maven.apache.org/download.cgi…
阅读更多...
最新文章

Copyright @ 2022~2023