当前位置: 首页 > news >正文

使用宝塔面板在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

转载自cpolar极点云文章:Linux服务使用宝塔面板搭建网站,并发布公网访问

相关文章:

使用宝塔面板在Linux上搭建网站,并通过内网穿透实现公网访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…...

Unity可视化Shader工具ASE介绍——6、通过例子说明ASE节点的连接方式

大家好&#xff0c;我是阿赵。继续介绍Unity可视化Shader编辑插件ASE的用法。上一篇已经介绍了很多ASE常用的节点。这一篇通过几个小例子&#xff0c;来看看这些节点是怎样连接使用的。   这篇的内容可能会比较长&#xff0c;最终是做了一个遮挡X光的效果&#xff0c;不过把这…...

VUE3基础知识梳理

VUE3基础知识梳理 一、vue了解和环境搭建1.vue是什么&#xff1a;cn.vuejs.org/vuejs.org2.渐进式框架3.vue的版本4.vueAPI的风格5.准备环境5.1.创建vue项目5.2.vue的目录结构 二、vue3语法1.干净的vue项目2.模板语法2.1 文本插值2.2属性绑定2.3条件渲染2.4列表渲染2.5通过key管…...

Java架构师缓存通用设计方案

目录 1 采用多级缓存2 缓存数据尽量前移3 静态化4 数据平衡策略5 jvm缓存的问题6 redis存放数据解决7 redis垂直拆分8 总结1 采用多级缓存 在实际应用中需要考虑的实际问题。首先,前端页面可以做缓存,虽然图上没有显示,但在现实应用中这是提高性能的一个重要方面。前端页面缓…...

2023年【危险化学品生产单位安全生产管理人员】及危险化学品生产单位安全生产管理人员模拟考试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位安全生产管理人员考前必练&#xff01;安全生产模拟考试一点通每个月更新危险化学品生产单位安全生产管理人员模拟考试题题目及答案&#xff01;多做几遍&#xff0c;其实通过危险化学品生产单位安…...

微信小程序 在bindscroll事件中监听scroll-view滚动到底

scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部 但是 总有不太一样的情况 公司的项目 scroll-view 内部 最下面有一个 类名叫 bottombj 的元素 我希望 滚动到这个 bottombj 上面的时候就开始加载滚动分页 简单说 bottombj这…...

收银系统商品定价设计思考

一、背景 因为门店系统里商品总共也就几万款&#xff0c;一直以来都是根据条码由总部统一定价销售&#xff0c;现在有加盟店&#xff0c;各门店也有进行各自促销活动的需求&#xff0c;这就需要放开门店自主定价权&#xff0c;所以近段时间系统在商品定价上做了扩展。 二、商…...

Kotlin函数作为参数指向不同逻辑

Kotlin函数作为参数指向不同逻辑 fun sum(): (Int, Int) -> Int {return { a, b -> (a b) } }fun multiplication(): (Int, Int) -> Int {return { a, b -> (a * b) } }fun main(args: Array<String>) {var math: (Int, Int) -> Intmath sum()println(m…...

读书笔记—《如何阅读一本书》

读书笔记—《如何阅读一本书》 一、阅读的层次1、主动阅读的基础一个阅读者要提出的四个基本问题 2、基础阅读&#xff08;第一层&#xff09;3、检视阅读&#xff08;第二层&#xff09;4、分析阅读&#xff08;第三层&#xff09; 二、阅读不同读物的方法三、阅读的最终目标1…...

Kafka数据同步原理详解

Kafka数据同步原理详解 Kafka是一种分布式的消息队列系统&#xff0c;它具有高吞吐量、可扩展性和分布式特性等优势。在Kafka中&#xff0c;数据按照主题进行分区&#xff0c;每个主题都有一组分区。每个分区都有自己的生产者和消费者&#xff0c;生产者负责向分区中写入消息&…...

C++课程总复习

一、c的第一条程序 1.cout cout >输出类对象&#xff0c;用来输出的&#xff0c;可以自动识别类型&#xff0c;所以不需要加格式符号 << 插入符&#xff08;输出符号&#xff09; endl 换行>\n #include <iostream> //#预处理 //include 包含 相应的头…...

数据结构—顺序表

目录 1.线性表 2.顺序表概念 3.实现顺序表 (1)声明结构体 (2)初始化 (3)打印数据 (4) 销毁 (5)尾插&头插 尾插 判断是否扩容 头插 (6)尾删&头删 尾删 头删 (7)指定位置插入元素 (8)删除指定位置元素 (9)查找指定元素位置 (10)修改指定位置元素 完整版…...

企业服务器租用对性能有什么要求呢?

企业租用服务器租用首要的是稳定&#xff0c;其次是安全&#xff0c;稳定是为了让企业的工作能够顺利进行&#xff0c;只有性能稳定的服务器才能保证网站之类的正常工作&#xff0c;就让小编带大家看一看有什么要求吧&#xff01; 服务器简单介绍。服务器是在网络上为其它客户机…...

2731.移动机器人

2731. 移动机器人 - 力扣&#xff08;LeetCode&#xff09; 有一些机器人分布在一条无限长的数轴上&#xff0c;他们初始坐标用一个下标从 0 开始的整数数组 nums 表示。当你给机器人下达命令时&#xff0c;它们以每秒钟一单位的速度开始移动。 给你一个字符串 s &#xff0c…...

相交链表Java

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 nu11。 以下有两种解决方法: 一种是用Map,利用其key值唯一的方法去判断(也可以使用set,set在add时,已存在的元素会返回false,不存在的返回…...

第二章:OSI参考模型与TCP/IP模型

OSI参考模型与TCP/IP模型 一、OSI参考模型二、TCP/IP模型2.1 四层分法&#xff08;书上&#xff09;2.2 五层分法&#xff08;实际厂商&#xff09;2.3 数据封装和解封装2.3.1 封装2.3.2 解封装2.3.3 TCP/IP分层封装2.3.4 数据封装和解封装过程 一、OSI参考模型 1.物理层 定义电…...

知识图谱04——openGL与ubuntu22.04

跑图神经网络的时候遇到了如下问题 libGL error: failed to load driver: iris libGL error: MESA-LOADER: failed to open iris: /usr/lib/dri/iris_dri.so: 无法打开共享对象文件: 没有那个文件或目录 (search paths /usr/lib/x86_64-linux-gnu/dri:\$${ORIGIN}/dri:/usr/li…...

如何看待为了省小钱而花费时间

相信每个人都会遇到这种情况&#xff1a;购买东西时想着货比三家或者想办法领优惠券、凑单等就可以省下一些钱&#xff0c;但是需要花费不少时间和精力。这时就开始犹豫了&#xff1a;省钱是必要的&#xff0c;需要居安思危&#xff0c;等到缺钱的时候不会后悔&#xff1b;又想…...

Maven Eclipse

Eclipse 提供了一个很好的插件 m2eclipse &#xff0c;该插件能将 Maven 和 Eclipse 集成在一起。 在最新的 Eclipse 中自带了 Maven&#xff0c;我们打开&#xff0c;Windows->Preferences&#xff0c;如果会出现下面的画面&#xff1a; 下面列出 m2eclipse 的一些特点&a…...

Linux:redis集群(3.*版本 和 5.*版本)搭建方法

介绍 至少6个实例才能组成集群。3主3从会自动分配 Redis集群原理 Redis集群架构 Redis Cluster采用虚拟槽分区&#xff0c;将所有的数据根据算法映射到0~16383整数槽内 Redis Cluster是一个无中心的结构 每个节点都保存数据和整个集群的状态 集群角色 Master&#xff1a;Master…...

正则表达式基础语法

https://tool.oschina.net/regex 正则表达式&#xff1a;检查、匹配字符串的表达式 单个字符匹配&#xff1a; 有特殊含义的匹配&#xff1a; 多次重复匹配&#xff1a; 限定开头结尾的匹配&#xff1a; 贪婪模式&#xff1a;在满足条件的情况下&#xff0c;尽可能多匹配…...

数据库常见面试题--MySQL

梳理面试过程中数据库相关的常见问题&#xff0c;需要说明的是&#xff0c;这篇文章主要是基于MySQL数据库&#xff0c;其他类型的数据库还请自行参考使用。 数据库概述 为什么使用数据库 1、数据库增删改查更方便 2、提供了事务的能力 本质是更好的管理数据。 数据库体系结…...

Springboot 集成 Redis集群配置公网IP连接报私网IP连接失败问题

1、问题&#xff1a;在Springboot 集成 Redis集群配置公网IP连接报私网IP连接失败&#xff0c;一直报私有IP连接失败 14 14:57:49.180 WARN 22012 --- [ioEventLoop-6-4] i.l.c.c.topology.ClusterTopologyRefresh : Unable to connect to [192.168.0.19:6384]: connection …...

解决方案 | 法大大电子签精准击破销售场景签约难题

新商业形态及新交易模式不断涌现&#xff0c;电子签已经成为现代商业活动中不可或缺的一部分。特别是在销售场景中&#xff0c;电子签的应用不仅可以提高销售效率&#xff0c;还可以降低成本&#xff0c;提高客户满意度。本文将详细分析电子签在销售场景中的应用价值能力&#…...

ARM按键中断控制事件

设置按键中断&#xff0c;按键1按下&#xff0c;LED亮&#xff0c;再按一次&#xff0c;灭按键2按下&#xff0c;蜂鸣器响。再按一次&#xff0c;不响按键3按下&#xff0c;风扇转&#xff0c;再按一次&#xff0c;风扇停 src/key_it.c #include"key_it.h" //GPIO初…...

微信小程序之本地生活(九宫格)

文章目录 一.创建项目二.配置修改json三.编写WXML四.编写WXSS五.最终效果 一.创建项目 创建新的项目&#xff0c;名称为&#xff1a;本地生活 二.配置修改json 在app.json中删除其他页面 将index改为grid 自动生成新的文件 添加自己的轮播图片 源代码&#xff1a; <!--…...

【Linux 安装Kibana 及 Es 分词器安装】

一、客户端Kibana安装 Kibana是一个开源分析和可视化平台&#xff0c;旨在与Elasticsearch协同工作。参考文档 1. 下载并解压缩Kibana 下载路径 选择的版本是和 ElasticSearch 对应&#xff08;7.17.3&#xff09; 下载后上传到Linux 系统中&#xff0c;并放在 /root/ 下&a…...

python-arima模型statsmodels库实现-有数据集(续)-statsmodels-0.9.0版本

python-arima模型statsmodels库实现-有数据集&#xff08;续&#xff09; 这篇博客是上一篇python-arima模型statsmodels库实现的续集&#xff0c;上一篇采用的statsmodels版本应该要高一点&#xff0c;如果使用低版本的statsmodels代码会有bug&#xff0c;这一篇则是针对stat…...

JVM源码剖析之线程的创建过程

说在前面&#xff1a; 对于Java线程的创建这个话题&#xff0c;似乎已经被"八股文"带偏&#xff5e; 大部分Java程序员从"八股文"得知创建Java线程有N种方式&#xff0c;比如new Thread、new Runnable、Callable、线程池等等&#xff5e; 而笔者写下这篇文…...

ansible的介绍安装与模块

目录 一、ansible简介 二、ansible特点 三、Ansible核心组件与工作原理 1、核心组件 2、工作原理 四、ansible的安装 五、ansible 命令行模块 1&#xff0e;command 模块 2&#xff0e;shell 模块 3&#xff0e;cron 模块 4&#xff0e;user 模块 5&#xff0e;group 模…...