本地windows電腦部署html網頁到互聯網：html+node.js+ngrok/natapp

核心概念：為什么不能直接分享HTML文件？

1，html文件修改

2，安裝設置node.js

3，路由器虛擬服務器

4，采用ngrok工具進行內網穿透（國外工具）

5，采用natapp工具進行內網穿透（國內工具）

文末提供了完整思路，供大家繼續推進，已經寫了六千字了不想寫了😂

本文技術概要：

html文件修改：利用ai工具已經獲得了本地的html文件，但該html文件是將數據保存在瀏覽器當中。發布到互聯網，需要將數據保存到本地文件夾當中，在html文件中修改
node.js網頁部署：如果自家路由器不涉及CGNAT技術，則到此步驟即可互聯網訪問自己的網頁；否則必須進行內網穿透
路由器虛擬化服務器：將互聯網的端口開放，便于成功訪問
內網穿透技術：家庭寬帶運營商為了節省IP地址，會使用一種叫做 “運營商級NAT” (CGNAT) 的技術，使得電腦公網ip與實際公網ip不同，無法直接通過公網ip訪問

本文按照一邊實驗一邊操作思路，如果你發現已經部署成功，則不用關注后續操作

核心問題：為什么不能直接分享HTML文件？

剛編寫好的網頁，只能通過雙擊html文件采用瀏覽器打開，所有數據都存儲在瀏覽器的localStorage里。這意味著：

A用戶在A電腦上打開，數據存在A電腦的瀏覽器里。

B用戶在B電腦上訪問同一個HTML文件，他的數據存在B電腦的瀏覽器里。他們的數據是完全獨立、互不可見的。

為了讓大家能看到對方的數據，進行網頁的互動，就必須把數據從各個用戶的瀏覽器里抽出來，統一存放在一個地方——你的電腦。你的電腦將扮演“服務器”的角色。

1，html文件修改

打開你的index.htm文件，去掉將數據保存到localStorage的操作，而是通過網絡請求，與后續步驟設置的server.js后臺進行通信

如果你已經設置好了上述步驟，則不用修改文件；如果你一頭霧水，則照著下列步驟直接做一遍。

打開index文件，搜索loadState，然后使用下列代碼替換原本的loadState代碼塊和saveState代碼塊。

// 新的 loadState 函數
loadState() {fetch('/api/data').then(response => response.json()).then(savedData => {if (savedData) { this.state.data = savedData; }if (!this.state.data.completedMilestones) { this.state.data.completedMilestones = []; }if (!this.state.data.activityLog) { this.state.data.activityLog = []; }const todayData = this.state.data[this.state.today]?.checkedTasks || [];this.todaySelections = new Set(todayData);// 加載完數據后，立即渲染一次頁面this.render();}).catch(error => {console.error("加載數據失敗:", error);// 即使加載失敗，也要保證基本結構存在if (!this.state.data.completedMilestones) { this.state.data.completedMilestones = []; }if (!this.state.data.activityLog) { this.state.data.activityLog = []; }this.render();});
},// 新的 saveState 函數
saveState(isSilent = false) {if (!this.state.data[this.state.today]) {this.state.data[this.state.today] = { checkedTasks: [], messages: [] };}this.state.data[this.state.today].checkedTasks = Array.from(this.todaySelections);fetch('/api/data', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(this.state.data)}).then(response => response.json()).then(result => {console.log(result.message); // 在控制臺打印 "數據保存成功"if (!isSilent) { alert('今日記錄已保存！'); }}).catch(error => {console.error("保存數據失敗:", error);if (!isSilent) { alert('保存失敗，請檢查服務器連接！'); }});
},

代碼解釋：新的loadState在頁面加載時會去/api/data這個地址獲取數據。新的saveState則會把整個this.state.data對象打包成JSON格式，發送到/api/data地址，由server.js接收并存入db.json文件。

2，安裝設置node.js

先安裝node工具，然后創建后臺服務器，并確保將node服務器打開

訪問 Node.js官網。

安裝對應自己電腦的版本，和普通軟件安裝過程一致。

Win+R輸入cmd，在終端中輸入：node -v 可以查看是否安裝成功

在你希望保存文件的位置創建文件夾checkin-server,在文件夾中放入自己寫的index.html

同目錄下創建文本文檔，命名為server.js ，文本編輯器打開，復制以下代碼：

// 引入我們需要的工具包
const express = require('express');
const fs = require('fs');
const path = require('path');// 創建一個應用實例
const app = express();
const PORT = 3000; // 網頁的訪問端口號，可以保持不變
const DB_FILE = path.join(__dirname, 'db.json'); // 數據庫文件的路徑// 中間件，用于解析發送到服務器的JSON格式數據
app.use(express.json());
// 中間件，用于提供index.html等靜態文件
app.use(express.static(__dirname));// --- API 接口 ---// 1. 獲取數據的接口 (GET)
app.get('/api/data', (req, res) => {if (fs.existsSync(DB_FILE)) {fs.readFile(DB_FILE, 'utf8', (err, data) => {if (err) {return res.status(500).json({ message: '讀取數據失敗' });}res.json(JSON.parse(data));});} else {// 如果文件不存在，返回一個空的初始結構res.json({ completedMilestones: [], activityLog: [] });}
});// 2. 保存數據的接口 (POST)
app.post('/api/data', (req, res) => {const dataToSave = req.body;fs.writeFile(DB_FILE, JSON.stringify(dataToSave, null, 2), 'utf8', (err) => {if (err) {return res.status(500).json({ message: '保存數據失敗' });}res.json({ message: '數據保存成功' });});
});// 啟動服務器
app.listen(PORT, () => {console.log(`服務器已啟動，正在監聽 http://localhost:${PORT}`);
});

代碼解釋：這個文件創建了一個小型的Web服務器。它會把當前文件夾作為網站的根目錄（所以能找到index.html），并創建了兩個URL：/api/data的GET請求用來讀取數據，POST請求用來寫入數據。我們的“數據庫”就是一個名為 db.json 的文件。

接下來啟動node：

win+R，輸入cmd進入終端。切換工作目錄到checkin-server目錄中

如果發現終端無法切換到D盤，E盤，則只需要輸入圖片中對應的指令，用到的指令如下：

#切換到E盤
e:#切換到D盤
d:#切換到對應目錄，使用cd命令
cd checkin-server

在對應目錄的終端中輸入：

node server.js

此時node.js就啟動成功了，我們已經可以在本地訪問自己的html文件。在瀏覽器中輸入：http://localhost:3000

即可直接訪問到自己的html網頁

但這遠遠不夠，我們希望可以讓互聯網上的其他人，也能夠訪問到這個網頁來。

3，路由器虛擬服務器

本節進行路由器設置，開放我們的網頁到互聯網，或者局域網上面。

打開電腦瀏覽器，輸入192.168.1.1，進入路由器登陸界面。輸入密碼，登陸進入系統。密碼就在自家路由器的背面，會寫客戶端密碼

選擇應用管理，找到虛擬服務器（有的也叫端口設置），進入，并添加新規則

如圖添加規則內容，端口都設置為3000，ip地址填寫本地ip地址，協議選擇tcp

本地ip地址獲取方法1：打開終端，輸入ipconfig（Linux輸入ifconfig），我連接的wifi，因此看wifi一欄，如果是路由器則看以太網配置器

本地ip地址獲取方法2：通過網絡中心來看

到這里配置好之后，確保node.js處于運行狀態，此時就一定可以局域網訪問了。

局域網訪問方法：

多臺設備連接到同一個wifi……只要是同一個路由器，都可以直接通過 http://192.168.1.xxx:3000訪問到，中間的數字是IP地址，根據自己電腦的來。

互聯網訪問方法：

互聯網訪問需要獲得本電腦的公網ip才行，通過公網ip進行。打開瀏覽器，搜索我的ip，選擇第一個進入，就可以看到以下頁面：

這里的IP和本地電腦ip不同，這里就是公網ip。不出意外，其他人在瀏覽器搜索： http://xxx.192.xxx.170:3000? 就可以訪問到你的網頁。

出意外了：可能是防火墻問題，也可能是運營商問題。

如果你的運營商采用了CGNAT技術，則不可直接訪問，以下方式可以確認是否采用。在路由器操作端，查看上網設置，發現本機ip為10.x.x.x或者100.x.x.x ，就是和公網ip不同，那百分之百采用了CGNAT技術，就必須采取內網穿透技術來讓其他人通過互聯網訪問了。

但如果你發現是一樣的，且你確定你的運行商沒有采用CGNAT技術，也可能是防火墻的問題。搜索防火墻，打開Windows Defender 防火墻，進入高級設置

設置入站規則，開放端口3000入站

需要為你電腦的防火墻添加入站規則，允許3000端口的連接：

對于 Windows 系統:

按 Win 鍵，搜索“高級安全的 Windows Defender 防火墻”并打開。

在左側點擊“入站規則”。

在右側點擊“新建規則...”。

選擇“端口”，點擊“下一步”。

選擇“TCP”，然后在“特定本地端口”里輸入 3000，點擊“下一步”。

選擇“允許連接”，點擊“下一步”。

將“域”、“專用”、“公用”三個選項都勾選上，點擊“下一步”。

給規則起個名字，比如 NodeServerPort，然后點擊“完成”。

之后再訪問 http://xxx.192.xxx.170:3000 就可以了，注意中間的IP地址為公網ip，不是本地ip

4，采用ngrok工具進行內網穿透（國外工具）

Download ngrok

打開該網頁，登錄會要求必須注冊，獲取個人認證碼。

下載windows版本，并將下載的zip文件解壓，將.exe文件復制到checkin-server文件夾當中。打開終端，切換到checkin-server目錄，粘貼下載頁面的這段代碼，該代碼為認證代碼：

<token>部分為注冊登陸后自動生成。復制粘貼到終端中運行完成之后，輸入 ngrok http 3000開放端口滲透

ngrok http 3000

從運行結果中可以看到，?https://36bc14c962e8.ngrok-free.app ，該鏈接極為訪問到我們網頁的鏈接。將該鏈接發送給其他人，其他人就可以訪問到。

存在的問題：

由于ngrok是國外的工具，因此他自動選擇最近的服務器是日本的，因此不掛梯子，可能進不去網頁
每次重啟ngrok之后，該鏈接都會變化。交錢注冊會員，可以獲得固定的二級域名，會員價格每個月三四塊錢

因此，我們可以采用國內的內網穿透工具，有很多，這里只是拿NETAPP舉例。

5，采用natapp工具進行內網穿透（國內工具）

打開網站 https://natapp.cn/ 。也是必須先注冊，后使用

可以直接點擊購買隧道，免費隧道，然后進行配置3000端口，獲取自己的Authtoken，這相當于自己的登錄密碼

注冊完成后，下載客戶端，將natapp.exe文件放到checkin-server文件夾當中，打開終端，執行下列命令，激活自己的賬號：

natapp -authtoken=你的authtoken字符串

然后輸入natapp，即可成功運行該穿透工具。

natapp

之后復制http://xxxx.natappfree.cc?給自己的朋友，即可成功訪問。同樣每次打開natapp工具，網址都不一樣，這樣不好。花錢注冊可以獲得固定的二級域名。（就是不想花錢，才想把自己的電腦作為服務器的…………）

我沒有進行詳細的操作，因為國內的網站總是要求進行身份認證，因此我到這一步就停止了。考慮到花錢獲得固定域名，以及由于CGNAT技術的存在我必須在后臺同時打開node.js的窗口，內網穿透的窗口，因此我打算購買云服務器進行網頁配置了。

6，更多思路（來自大神：kcbpmbf）

一、針對常規的內網穿透工具，不能固定域名，固定域名需要付費：

????????有大內網，可以采用櫻花frp，他最早是搞二次元的，當年的櫻花簽到就可以領流量

二、節點小寶蒲公英

????????其實你還有另一條路就是用隨時可以連進內網的工具叫什么節點小寶蒲公英。你在內網部署完以后你在任意設備任意外網都可以用軟件連接進你的內網然后使用你的服務這種隱私性高

三、飛牛

????????還有更簡單的你在你電腦上用虛擬機也好還是用啥反正你建個飛牛os 然后在飛牛里用docker建站然后白嫖飛牛的免費端口映射出來下行3mb/s。還能有nas服務。他等于說免費給你提供端口映射嘛。免費的自帶的，它本身飛牛就是個NAS系統，為了方便你這個外網下載文件給你提供的

四、我的方案

????????我的解決方案是，這個，這個拿臺工控機裝個PVe，然后里邊裝上軟路由兒，然后去拿光貓撥號，撥號上網，然后獲取公網IP。我這個是真正的公共IP。他那個公共IP呀，是老變的，但是有個服務叫DDNS。我就拿那個愛快動態域名服務給綁定上我的域名兒，然后域名兒就是死的，他IP再怎么變，我通過域名就能訪問。這也是一條路子，但現在好像運營商申請公共IP挺費勁。比如說，你要是這個方便遷移的服務，那我覺得你用飛牛挺好的，對吧？飛牛里邊兒docker還能隨時遷移，隨時備份

五、更好的辦法。相比采用自己的電腦作為服務器

? ? ? ? 采用vercel，免費且個人項目很很夠用，或者使用cloudflare