寶塔面板部署Apache服務器搭建本地站點發布到公網可訪問【內網穿透】

文章目錄

  • 前言
  • 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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/214138.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/214138.shtml
英文地址，請注明出處：http://en.pswp.cn/news/214138.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

最短循環節問題 和 最短回文串(kmp , HASH )

最短循環節問題 和 最短回文串(kmp , HASH )

給定一個字符串 s&#xff0c;你可以通過在字符串前面添加字符將其轉換為回文串。找到并返回可以用這種方式轉換的最短回文串。 示例 1&#xff1a; 輸入&#xff1a;s "aacecaaa" 輸出&#xff1a;"aaacecaaa"示例 2&#xff1a; 輸入&#xff1a;s &…
閱讀更多...
Java智慧校園-中小學校園管理系統源碼

Java智慧校園-中小學校園管理系統源碼

智慧校園系統是通過信息化手段&#xff0c;實現對校園內各類資源的有效集成 整合和優化&#xff0c;實現資源的有效配置和充分利用&#xff0c;將校務管理過程的優化協調。為校園提供數字化教學、數字化學習、數字化科研和數字化管理。 致力于為家長和教師提供一個全方位、多層…
閱讀更多...
scripty妙用

scripty妙用

在monorepo項目中&#xff0c;隨著子模塊增多&#xff0c; 每個子項目都需要配置各自的package.json,并且大同小異&#xff0c;為了進一步提高配置效率&#xff0c;引入了scripty&#xff0c;自己寫腳本&#xff0c;直接就可以用哦 1、安裝 npm install scripty --save-dev 2…
閱讀更多...
ARMday6作業

ARMday6作業

串口發送指令控制硬件工作 uart1.h #ifndef __UART1_H__ #define __UART1_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_uart.h" void all_led_init(); void led1_on(); void led2_on(); void led3_o…
閱讀更多...
代碼隨想錄二刷 ｜ 二叉樹 ｜ 110.平衡二叉樹

代碼隨想錄二刷 ｜ 二叉樹 ｜ 110.平衡二叉樹

代碼隨想錄二刷 &#xff5c; 二叉樹 &#xff5c; 110.平衡二叉樹 題目描述解題思路遞歸迭代 代碼實現遞歸法迭代法 題目描述 110.平衡二叉樹 給定一個二叉樹&#xff0c;判斷它是否是高度平衡的二叉樹。 本題中&#xff0c;一棵高度平衡二叉樹定義為&#xff1a; 一個二叉…
閱讀更多...
EMNLP 2023 獲獎論文公布，大模型、NLP等領域火爆

EMNLP 2023 獲獎論文公布，大模型、NLP等領域火爆

EMNLP是計算語言學和自然語言處理領域頂級國際會議之一&#xff0c;屬于CCF B類&#xff0c;是由 ACL 下屬的SIGDAT小組主辦的NLP領域頂級國際會議&#xff0c;一年舉辦一次。相較于ACL&#xff0c;EMNLP更偏向于NLP在各個領域解決方案的學術探討。 今年的EMNLP 2023 已于2023…
閱讀更多...
table表格table/tr/td寬度和高度的設置

table表格table/tr/td寬度和高度的設置

關于html中table表格tr,td的?度和寬度 做?頁的時候經常會遇到各種各樣的問題&#xff0c;經常遇到的?個就是會碰到表格被內容撐開的問題。 設置table樣式為 table-layout: fixed; 寬度可以了&#xff0c;但是高度會被撐高。怎么設置都不行&#xff0c;只能給這個td標簽單獨…
閱讀更多...
【Linux】 線程池

【Linux】 線程池

線程池 什么是線程池&#xff1f; 一次預先申請一批線程&#xff0c;讓這批線程有任務&#xff0c;就處理任務&#xff1b;沒任務&#xff0c;就處于等待狀態。 為什么要有線程池&#xff1f; 以空間換時間&#xff0c;預先申請一批線程&#xff0c;當有任務到來&#xff0c;可…
閱讀更多...
將rtsp視頻流發送到AWS Kinesis Video Streams的方案——使用Gstreamer（C++） Command Line

將rtsp視頻流發送到AWS Kinesis Video Streams的方案——使用Gstreamer（C++） Command Line

大綱 1 創建Kinesis Video Streams1.1 創建視頻流1.2 記錄Creation Time 2 創建策略2.1 賦予權限2.2 限制資源2.3 Json格式描述&#xff08;或上面手工設置&#xff09;2.4 注意事項 3 創建IAM用戶3.1 生成密鑰對3.2 附加策略3.3 記錄訪問密鑰對 4 編譯C 創建者庫5 發送6 檢查參…
閱讀更多...
JavaScript ＜關于逆向RSA非對稱加密算法的案例(代碼剖析篇)＞--案例(五點一)

JavaScript ＜關于逆向RSA非對稱加密算法的案例(代碼剖析篇)＞--案例(五點一)

引用上文: CSDNhttps://mp.csdn.net/mp_blog/creation/editor/134857857 剖析: var bitsPerDigit16; // 每個數組元素可以表示的二進制位數// 數組復制函數&#xff0c;將源數組部分復制到目標數組的指定位置 function arrayCopy(src, srcStart, dest, destStart, n) {var m…
閱讀更多...
國內地址地區智能解析，無需完整地址也能正確匹配

國內地址地區智能解析，無需完整地址也能正確匹配

頁面直接引入使用 已打包成單文件dist/bundle.js 可以直接通過標簽引用 <script src="./bundle.js"></script> <script>var results = AddressParse.parse(福建省福州市福清市石竹街道義明綜合樓3F，15000000000，asseek);console.log(results);…
閱讀更多...
OD機考真題搜集：服務失效判斷

OD機考真題搜集：服務失效判斷

題目 某系統中有眾多服務，每個服務用字符串（只包含字母和數字，長度<=10）唯一標識，服務間可能有依賴關系，如A依賴B，則當B故障時導致A也故障。 依賴具有傳遞性，如A依賴B，B依賴C，當C故障時導致B故障，也導致A故障。 給出所有依賴關系，以及當前已知故障服務，要求輸…
閱讀更多...
git提交代碼報錯Git: husky ＞ pre-commit

git提交代碼報錯Git: husky ＞ pre-commit

目錄 git提交代碼報錯原因解決方法&#xff08;三種&#xff09;1、第一種2、第二種3、第三種 git提交代碼報錯原因 這個問題是因為當你在終端輸入git commit -m “XXX”,提交代碼的時候,pre-commit(客戶端)鉤子&#xff0c;它會在Git鍵入提交信息前運行做代碼風格檢查。如果代…
閱讀更多...
Kotlin 中密封類、枚舉類與密封接口的對比分析

Kotlin 中密封類、枚舉類與密封接口的對比分析

在 Kotlin 編程語言中&#xff0c;密封類&#xff08;Sealed Classes&#xff09;、枚舉類&#xff08;Enum Classes&#xff09;和密封接口&#xff08;Sealed Interfaces&#xff09;是處理一組固定類型的強大工具。它們在 Kotlin 中扮演著特殊的角色&#xff0c;特別是在創建…
閱讀更多...
【小白專用】MySQL創建數據庫和創建數據表

【小白專用】MySQL創建數據庫和創建數據表

1.在Windows開始搜索輸入Mysql,并選擇第一個打開。 2.輸入安裝時的密碼 3.說明安裝成功。 二、創建數據庫 1. 連接 MySQL 輸入 mysql -u root -p 命令&#xff0c;回車&#xff0c;然后輸入 MySQL 的密碼(不要忘記了密碼)&#xff0c;再回車&#xff0c;就連接上 MySQL 了。 …
閱讀更多...
數據庫常用鎖

數據庫常用鎖

數據庫鎖是一種用于管理并發訪問的機制&#xff0c;以確保數據的一致性和完整性。在并發訪問的情況下&#xff0c;多個事務可能同時嘗試訪問相同的數據&#xff0c;而數據庫鎖能夠協調這些訪問&#xff0c;防止數據不一致的問題。以下是一些常見的數據庫鎖及其詳細解釋&#xf…
閱讀更多...
C語言-統計素數并求和

C語言-統計素數并求和

本題要求統計給定整數M和N區間內素數的個數并對它們求和。 輸入格式: 輸入在一行中給出兩個正整數M和N&#xff08;1≤M≤N≤500&#xff09;。 輸出格式: 在一行中順序輸出M和N區間內素數的個數以及它們的和&#xff0c;數字間以空格分隔。 輸入樣例: 10 31輸出樣例: 7…
閱讀更多...
深入Redis過程-持久化

深入Redis過程-持久化

目錄 redis實現持久化 RDB 觸發機制-定期方法 定期-手動觸發 save bgsave 定期-自動觸發 AOF 開啟AOF功能 刷新緩沖區策略 重寫機制 混合持久化 Redis事務 事務相關的命令 MULTI EXEC DISCARD WATCH redis實現持久化 RDB RDB叫做Redis數據備份文件&#xf…
閱讀更多...
強大的公式編輯器 —— MathType最新版本安裝與使用

強大的公式編輯器 —— MathType最新版本安裝與使用

強大的公式編輯器 —— MathType最新版本安裝與使用 由于使用了很長時間的機械硬盤出現壞道&#xff0c;安裝在其中的MathType6.9&#xff08;精簡版&#xff09;也沒辦法使用了&#xff0c;本來想安裝個高版本的MathType&#xff0c;比如MathType7.4&#xff0c;但在網上苦苦…
閱讀更多...
如何更改Jupyter Notebook中的環境？

如何更改Jupyter Notebook中的環境？

1.首先&#xff0c;打開終端 2.接著&#xff0c;分別輸入以下命令 conda env list 把EXPose替換為自己的環境變量 conda activate EXPose 3.接下來安裝‘ ipykernel ’軟件包 conda install ipykernel 4. 將該環境添加到Jupyter Notebook中&#xff1b;在Jupyter Notebook…
閱讀更多...
最新文章

Copyright @ 2022~2023