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

news2024/11/28 16:38:12

文章目录

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

转载自远程内网穿透的文章：Linux使用宝塔面板搭建网站，并内网穿透实现公网访问

前言

宝塔面板作为简单好用的服务器运维管理面板，它支持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

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

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

相关文章

数据结构与算法（Java版） | 数组模拟队列的思路分析与代码实现

数据结构与算法（Java版） | 数组模拟队列的思路分析与代码实现

思路分析 上一讲我们讲过&#xff0c;队列既可以用数组来实现&#xff0c;也可以用链表来实现&#xff0c;但由于我们比较熟悉数组这种结构&#xff0c;所以这里我会先给大家讲一下数组这种实现方式&#xff0c;至于链表这种实现方式&#xff0c;那就以后有机会再说吧&#xf…
阅读更多...
探索人工智能新纪元：Pre-Training 快速指南，轻松上手

探索人工智能新纪元：Pre-Training 快速指南，轻松上手

theme: orange 预训练 Pre-Training 已被证明是当前人工智能范式中最重要的方面之一&#xff0c;大型语言模型&#xff0c;要转变为通用引擎&#xff0c;需要预训练。 什么是预训练模型 人工智能中的预训练至少部分受到人类学习方式的启发。我们不需要从零开始学习一个主题&…
阅读更多...
肝一肝设计模式【七】-- 代理模式

肝一肝设计模式【七】-- 代理模式

系列文章目录 肝一肝设计模式【一】-- 单例模式 传送门 肝一肝设计模式【二】-- 工厂模式 传送门 肝一肝设计模式【三】-- 原型模式 传送门 肝一肝设计模式【四】-- 建造者模式 传送门 肝一肝设计模式【五】-- 适配器模式 传送门 肝一肝设计模式【六】-- 装饰器模式 传送门 文…
阅读更多...
JavaWeb：Cookie、Session、JSP、JavaBean、MVC 三层架构

JavaWeb：Cookie、Session、JSP、JavaBean、MVC 三层架构

文章目录 JavaWeb - 03一、Cookie1. Cookie 应用2. 注意点 二、Session三、JSP1. 概述2. JSP 基础语法和指令&#xff08;了解&#xff09;3. 内置对象及作用域4. JSP 标签、JSTL 标签 四、JavaBean五、MVC 三层架构1. 之前的架构2. 现在的 MVC 三层架构 注意&#xff1a; Java…
阅读更多...
Feign和OpenFeign

Feign和OpenFeign

1.Feign和OpenFeign的关系 Feign Feign是一个声明式的Web服务客户端&#xff08;Web服务客户端就是Http客户端&#xff09;&#xff0c;让编写Web服务客户端变得非常容易&#xff0c;只需创建一个接口并在接口上添加注解即可。 Feign是Spring Cloud组件中一个轻量级RESTful的H…
阅读更多...
MySQL基础学习---7、子查询

MySQL基础学习---7、子查询

子查询 子查询指的是一个查询语句嵌套在另一个查询语句内部的查询&#xff08;从MySQL4.1开始引入&#xff09;。1、子查询的基本使用 语法格式&#xff1a;select select_listfrom tablewhere expr operator(select select_listfrom table); 说明&#xff1a;1、子查询&…
阅读更多...
【终极解决方案】IDEA maven 项目修改代码不生效。

【终极解决方案】IDEA maven 项目修改代码不生效。

【终极解决方案】IDEA maven 项目修改代码不生效。 文章目录 【终极解决方案】IDEA maven 项目修改代码不生效。1、项目问题描述2、可能的解决方案3、分析原因4、解决方案5、参考文献 1、项目问题描述 遇到一个非常奇怪的问题&#xff0c;修改了一个基于maven搭建的SSM项目&am…
阅读更多...
learn_C_deep_9 (汇编角度理解return的含义、const 的各种应用场景、volatile 的基本理解与实验证明）

learn_C_deep_9 (汇编角度理解return的含义、const 的各种应用场景、volatile 的基本理解与实验证明）

目录 return 关键字 const 关键字 const 修饰的只读变量 - - - 不可直接被修改&#xff01; const修饰的变量&#xff0c;可以作为数组定义的一部分吗&#xff1f; const只能在定义的时候直接初始化&#xff0c;不能二次赋值。为什么&#xff1f; const修饰指针 volatil…
阅读更多...
opencv remap 像素重映射

opencv remap 像素重映射

remap()函数的输入是一个源图像和一个映射矩阵。映射矩阵包含了每个像素的新坐标&#xff0c;用于指定每个像素在输出图像中的位置。 假设原始图像中的一个像素的坐标为 ( x , y ) (x,y) (x,y)&#xff0c;它在输出图像中的新坐标为 ( x ′ , y ′ ) (x,y) (x′,y′)。为了计算…
阅读更多...
Linux Python Openpyxl xlsx转html

Linux Python Openpyxl xlsx转html

目录 Excel转Html 示例 函数 Openpyxl知识点 其他Excel解析库问题 Excel转Html 示例 函数 import openpyxlfrom openpyxl.styles import Border from openpyxl.styles import Font from openpyxl.styles import Side from openpyxl.styles import Alignment from openpy…
阅读更多...
ChipScope 使用问题和解决方案

ChipScope 使用问题和解决方案

背景介绍 我最近在学习FPGA开发技术&#xff0c;用杜勇老师的《Xinlinx FPGA数字信号处理设计》一书&#xff0c;按照书中的例子&#xff0c;对 CXD301 开发板进行ADC、DAC示例的调试&#xff0c;使用 ChipScope 软件进行在线逻辑分析。遇到了下面的问题&#xff0c;并给出了解…
阅读更多...
【软考数据库】第十章 系统开发与运行

【软考数据库】第十章 系统开发与运行

目录 10.1 系统实施 10.1.1 信息系统生命周期 10.1.2 能力成熟度模型 10.1.3 软件过程开发模型 10.1.4 信息系统开发方法 10.1.5 系统分析与设计 10.1.6 结构化开发 10.2 系统测试 10.2.1 测试原则和方法 10.2.2 测试阶段 10.2.3 测试用例设计 10.2.4 调试 10.2.…
阅读更多...
现代化个人博客系统 ModStartBlog v7.3.0 首页热门博客，UI优化调整

现代化个人博客系统 ModStartBlog v7.3.0 首页热门博客，UI优化调整

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用&#xff0c;支持后台一键快速安装&#xff0c;让开发者能快的实现业务功能开发。 系统完全开源&#xff0c;基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场&#xff0c;后台一键快速安装 …
阅读更多...
GETOPT函数详解

GETOPT函数详解

一、目的 相信第一次接触linux的小伙伴在使用命令行时肯定有这样的疑惑&#xff0c;命令行各种各样的选项和选项参数是怎样实现的&#xff08;各个命令的选项的含义可以通过man手册查看&#xff09;。 二、介绍 在正式介绍之前&#xff0c;我们先来看一下命令行选项的使用&…
阅读更多...
数据库原理+openGauss

数据库原理+openGauss

文章目录 0. 准备工作0.1 实验环境0.2 主要内容0.3 学习资源 1. 安装部署实验&#xff08;实验一&#xff09;1.1 下载VirtualBox1.2 安装VirtualBox1.3 镜像文件导入1.4 启动虚拟机1.5 数据库使用1.6 数据库基本操作 2 表&模式&#xff08;实验二&#xff09;2.1 创建模式…
阅读更多...
jmeter如何测试一个post请求（发送json请求报文）

jmeter如何测试一个post请求（发送json请求报文）

目录 1.配置测试计划1.1.创建POST的HTTP请求取样器&#xff08;模拟POST请求&#xff09;1.2.创建HTTP信息头管理器 2.执行压测并查看结果 jmeter如何测试一个发送json报文的post请求. 更详细的配置请参考另外一篇博文&#xff1a; jmeter如何测试一个get请求 1.配置测试计划 …
阅读更多...
独立站运营必做的6项工作内容

独立站运营必做的6项工作内容

独立站的运营工作内容比较繁琐和全面&#xff0c;主要包括以下几个方面&#xff1a; 一、网站策划和设计 定义网站目标和定位制定网站规划和设计方案确定网站主题、颜色和页面布局确定网站的核心功能和用户体验设计网站的Logo和其他品牌元素 二、网站建设和维护 选择网站主…
阅读更多...
React基础入门【一】

React基础入门【一】

官方文档&#xff1a;https://react.docschina.org/ 说明 本文总结自尚硅谷课程。学习本教程之前&#xff0c;最好具备vue的基础知识&#xff0c;明白虚拟DOM、jsx这些前置知识。接下来&#xff0c;我们通过一个简单的示例来展示react的使用。 注意&#xff1a;入门的学习不…
阅读更多...
【Atlas 200】华为昇腾Atlas 200加速模块RC场景无法启动卡在Start to jump Linux kernel

【Atlas 200】华为昇腾Atlas 200加速模块RC场景无法启动卡在Start to jump Linux kernel

问题现象 RC场景下&#xff0c;装有华为昇腾Atlas 200加速模块的开发板无法启动系统。 将制作好系统的SD卡插入开发板&#xff0c;0号串口输出的日志卡在Start to jump Linux kernel&#xff0c;之后没有更多输出。 可能原因 一种比较大的可能是——在制作系统时&#xff0c…
阅读更多...
Mac终端代理

Mac终端代理

1.打开代理查看代理端口号 打开设置&#xff0c;点击网络&#xff0c;点击详细信息&#xff0c;点击代理查看代理端口号。 2.修改环境变量 1&#xff09;终端输入下面命令 vim .zshrc 2&#xff09;在.zshrc文件里添加下面两段内容&#xff08;注意&#xff1a;7980为端口号…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023