用VSCode實現(xiàn)內(nèi)網(wǎng)穿透的步驟詳解
1. 需求分析
不知道大家有沒有遇到過這種情況。
就是說,我們在本地跑了一個項目服務(wù),項目地址為localhost,此時我們想把項目demo發(fā)給測試或其他人看一下,該怎么辦呢?

下面給出兩種解決方案。
如果自己和同事都是使用的公司內(nèi)網(wǎng),那就比較簡單了。把localhost更換為局域網(wǎng)內(nèi)自己的IP地址,別人就可以直接訪問了。
如果自己和同事不在一個局域網(wǎng)內(nèi),即大家不在一個地方辦公,這就比較麻煩了。通常是需要重新構(gòu)建服務(wù)器,讓別人去訪問項目的公網(wǎng)地址。
但這樣就會有一個問題,倘若每次對項目做了修改,就必須每次重新提交代碼并重新構(gòu)建服務(wù)器,才能讓別人同步看到更改,這樣做非常低效與麻煩。
所以就有了我們今天說的,用內(nèi)網(wǎng)穿透來解決這個問題。這里使用的工具,是VSCode 1.82 版本推出的一個名為本地端口轉(zhuǎn)發(fā)的功能,簡單方便!
2. 功能實現(xiàn)
先給小白朋友解釋一下內(nèi)網(wǎng)穿透,然后再列一列功能實現(xiàn)步驟。
2.1 啥是內(nèi)網(wǎng)穿透?
先簡單理解一下,主打一個貼心:
內(nèi)網(wǎng)穿透,就是通過一個公網(wǎng)服務(wù)器作為中轉(zhuǎn),將本地的端口映射到互聯(lián)網(wǎng)上。
然后再用專業(yè)術(shù)語詳細解釋一下:
內(nèi)網(wǎng)穿透(NAT穿透)是一種網(wǎng)絡(luò)技術(shù),用于在私有網(wǎng)絡(luò)(如局域網(wǎng))中訪問位于公共網(wǎng)絡(luò)(如互聯(lián)網(wǎng))上的設(shè)備或服務(wù)。
在一個典型的網(wǎng)絡(luò)環(huán)境中,私有網(wǎng)絡(luò)中的設(shè)備使用私有IP地址,而公共網(wǎng)絡(luò)中的設(shè)備使用公共IP地址。由于私有IP地址在公共網(wǎng)絡(luò)中不可直接訪問,因此需要通過內(nèi)網(wǎng)穿透技術(shù)來實現(xiàn)私有網(wǎng)絡(luò)中設(shè)備的訪問。

內(nèi)網(wǎng)穿透通過在公共網(wǎng)絡(luò)上建立一個轉(zhuǎn)發(fā)通道,將公共網(wǎng)絡(luò)中的請求轉(zhuǎn)發(fā)到私有網(wǎng)絡(luò)中的設(shè)備上,從而實現(xiàn)對私有網(wǎng)絡(luò)中設(shè)備的訪問。
它通常涉及到使用一個中間服務(wù)器或服務(wù),該服務(wù)器位于公共網(wǎng)絡(luò)中,并具有公共IP地址。私有網(wǎng)絡(luò)中的設(shè)備通過與中間服務(wù)器建立連接,并在連接建立后,通過中間服務(wù)器傳輸數(shù)據(jù)。
內(nèi)網(wǎng)穿透技術(shù)在以下情況下非常有用:
- 訪問位于私有網(wǎng)絡(luò)中的設(shè)備或服務(wù),如家庭網(wǎng)絡(luò)中的攝像頭、文件共享服務(wù)器等。
- 遠程管理或訪問位于私有網(wǎng)絡(luò)中的設(shè)備,如遠程桌面、SSH訪問等。
- 在開發(fā)和測試環(huán)境中,通過公共網(wǎng)絡(luò)訪問局域網(wǎng)中的應(yīng)用程序或服務(wù)。
常見的內(nèi)網(wǎng)穿透工具或服務(wù),包括:ngrok、frp、花生殼等。它們提供了簡單的配置和管理界面,使用戶能夠快速設(shè)置和使用內(nèi)網(wǎng)穿透功能。
需要注意的是,使用內(nèi)網(wǎng)穿透將私有網(wǎng)絡(luò)中的設(shè)備暴露在公共網(wǎng)絡(luò)中,因此需要采取適當(dāng)?shù)?code>安全措施,如使用安全協(xié)議(如HTTPS)、訪問控制列表(ACL)等,以保護設(shè)備和數(shù)據(jù)的安全性。
2.2 本地端口轉(zhuǎn)發(fā)使用步驟
先在本地啟動你的項目服務(wù),比如使用 vite 啟動一個項目,端口號為 5173。

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

輸入端口號 5173,確認(rèn)后如果你沒有登錄 GitHub 賬號,會提示你登錄,按照提示全部允許操作即可,授權(quán)成功后會自動跳轉(zhuǎn)回VSCode。


最后,復(fù)制轉(zhuǎn)發(fā)地址,發(fā)給需要的人。

2.3 一些重要的使用說明
默認(rèn)情況下,轉(zhuǎn)發(fā)的端口是私有的,只有使用同一個 GitHub 賬號登錄的用戶才能訪問。
如果你想要公開你的服務(wù),讓任何人都可以訪問,你可以在 端口 視圖中右鍵點擊 端口可見性,選擇 公共 即可。

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

結(jié)語
建立這個平臺的初衷:
- 打造一個僅包含前端問題的問答平臺,讓大家高效搜索處理同樣問題。
- 通過不斷積累問題,一起練習(xí)邏輯思維,并順便學(xué)習(xí)相關(guān)的知識點。
- 遇到難題,遇到有共鳴的問題,一起討論,一起沉淀,一起成長。
以上就是用VSCode實現(xiàn)內(nèi)網(wǎng)穿透的步驟詳解的詳細內(nèi)容,更多關(guān)于VSCode實現(xiàn)內(nèi)網(wǎng)穿透的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
postman接口做關(guān)聯(lián)測試的方法步驟
本文主要介紹了postman接口做關(guān)聯(lián)測試的方法步驟,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01
如何設(shè)計一個幾十萬在線用戶彈幕系統(tǒng)需求方案
這篇文章主要介紹了為大家如何設(shè)計一個幾十萬在線用戶彈幕系統(tǒng)的需求實現(xiàn)方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-05-05
使用 Conditional Menus 插件讓 WordPress 在不同頁面顯示不同菜單
這篇文章主要介紹了如何使WordPress在不同頁面顯示不同菜單2021-09-09
php/asp/asp.net中判斷百度移動和PC蜘蛛的實現(xiàn)代碼
這篇文章主要介紹了php/asp/asp.net中判斷百度移動和PC蜘蛛的實現(xiàn)代碼,需要的朋友可以參考下2015-09-09

