1. 需求分析

不知道大家有沒有遇到過這種情況。

就是說，我們在本地跑了一個項目服務，項目地址為localhost，此時我們想把項目demo發(fā)給測試或其他人看一下，該怎么辦呢？

下面給出兩種解決方案。

如果自己和同事都是使用的公司內網，那就比較簡單了。把localhost更換為局域網內自己的IP地址，別人就可以直接訪問了。

如果自己和同事不在一個局域網內，即大家不在一個地方辦公，這就比較麻煩了。通常是需要重新構建服務器，讓別人去訪問項目的公網地址。

但這樣就會有一個問題，倘若每次對項目做了修改，就必須每次重新提交代碼并重新構建服務器，才能讓別人同步看到更改，這樣做非常低效與麻煩。

所以就有了我們今天說的，用內網穿透來解決這個問題。這里使用的工具，是VSCode 1.82 版本推出的一個名為本地端口轉發(fā)的功能，簡單方便！

2. 功能實現

先給小白朋友解釋一下內網穿透，然后再列一列功能實現步驟。

2.1 啥是內網穿透？

先簡單理解一下，主打一個貼心：

內網穿透，就是通過一個公網服務器作為中轉，將本地的端口映射到互聯(lián)網上。

然后再用專業(yè)術語詳細解釋一下：

內網穿透（NAT穿透）是一種網絡技術，用于在私有網絡（如局域網）中訪問位于公共網絡（如互聯(lián)網）上的設備或服務。

在一個典型的網絡環(huán)境中，私有網絡中的設備使用私有IP地址，而公共網絡中的設備使用公共IP地址。由于私有IP地址在公共網絡中不可直接訪問，因此需要通過內網穿透技術來實現私有網絡中設備的訪問。

內網穿透通過在公共網絡上建立一個轉發(fā)通道，將公共網絡中的請求轉發(fā)到私有網絡中的設備上，從而實現對私有網絡中設備的訪問。

它通常涉及到使用一個中間服務器或服務，該服務器位于公共網絡中，并具有公共IP地址。私有網絡中的設備通過與中間服務器建立連接，并在連接建立后，通過中間服務器傳輸數據。

內網穿透技術在以下情況下非常有用：

• 訪問位于私有網絡中的設備或服務，如家庭網絡中的攝像頭、文件共享服務器等。
• 遠程管理或訪問位于私有網絡中的設備，如遠程桌面、SSH訪問等。
• 在開發(fā)和測試環(huán)境中，通過公共網絡訪問局域網中的應用程序或服務。

常見的內網穿透工具或服務，包括：ngrok、frp、花生殼等。它們提供了簡單的配置和管理界面，使用戶能夠快速設置和使用內網穿透功能。

需要注意的是，使用內網穿透將私有網絡中的設備暴露在公共網絡中，因此需要采取適當的安全措施，如使用安全協(xié)議（如HTTPS）、訪問控制列表（ACL）等，以保護設備和數據的安全性。

2.2 本地端口轉發(fā)使用步驟

先在本地啟動你的項目服務，比如使用 vite 啟動一個項目，端口號為 5173。

然后切換到 端口 視圖，點擊 轉發(fā)端口 按鈕。

輸入端口號 5173，確認后如果你沒有登錄 GitHub 賬號，會提示你登錄，按照提示全部允許操作即可，授權成功后會自動跳轉回VSCode。

最后，復制轉發(fā)地址，發(fā)給需要的人。

2.3 一些重要的使用說明

默認情況下，轉發(fā)的端口是私有的，只有使用同一個 GitHub 賬號登錄的用戶才能訪問。

如果你想要公開你的服務，讓任何人都可以訪問，你可以在 端口 視圖中右鍵點擊 端口可見性，選擇 公共 即可。

如果用戶第一次使用這個功能進行訪問，打開網址時會出現一些提示說明，直接點擊 繼續(xù) 正常訪問即可。

結語

建立這個平臺的初衷：

• 打造一個僅包含前端問題的問答平臺，讓大家高效搜索處理同樣問題。
• 通過不斷積累問題，一起練習邏輯思維，并順便學習相關的知識點。
• 遇到難題，遇到有共鳴的問題，一起討論，一起沉淀，一起成長。

以上就是用VSCode實現內網穿透的步驟詳解的詳細內容，更多關于VSCode實現內網穿透的資料請關注腳本之家其它相關文章！

最新評論