用VSCode實(shí)現(xiàn)內(nèi)網(wǎng)穿透的步驟詳解
1. 需求分析
不知道大家有沒(méi)有遇到過(guò)這種情況。
就是說(shuō),我們?cè)诒镜嘏芰艘粋€(gè)項(xiàng)目服務(wù),項(xiàng)目地址為localhost,此時(shí)我們想把項(xiàng)目demo發(fā)給測(cè)試或其他人看一下,該怎么辦呢?
下面給出兩種
解決方案。
如果自己和同事都是使用的公司內(nèi)網(wǎng),那就比較簡(jiǎn)單了。把localhost
更換為局域網(wǎng)內(nèi)自己的IP地址,別人就可以直接訪問(wèn)了。
如果自己和同事不在一個(gè)局域網(wǎng)內(nèi),即大家不在一個(gè)地方辦公,這就比較麻煩了。通常是需要重新構(gòu)建服務(wù)器,讓別人去訪問(wèn)項(xiàng)目的公網(wǎng)地址。
但這樣就會(huì)有一個(gè)問(wèn)題,倘若每次對(duì)項(xiàng)目做了修改,就必須每次重新提交代碼并重新構(gòu)建服務(wù)器,才能讓別人同步看到更改,這樣做非常低效與麻煩。
所以就有了我們今天說(shuō)的,用內(nèi)網(wǎng)穿透
來(lái)解決這個(gè)問(wèn)題。這里使用的工具,是VSCode 1.82 版本推出的一個(gè)名為本地端口轉(zhuǎn)發(fā)
的功能,簡(jiǎn)單方便!
2. 功能實(shí)現(xiàn)
先給小白朋友解釋一下內(nèi)網(wǎng)穿透,然后再列一列功能實(shí)現(xiàn)步驟。
2.1 啥是內(nèi)網(wǎng)穿透?
先簡(jiǎn)單
理解一下,主打一個(gè)貼心:
內(nèi)網(wǎng)穿透,就是通過(guò)一個(gè)公網(wǎng)服務(wù)器作為中轉(zhuǎn),將本地的端口映射到互聯(lián)網(wǎng)上。
然后再用專(zhuān)業(yè)
術(shù)語(yǔ)詳細(xì)解釋一下:
內(nèi)網(wǎng)穿透(NAT穿透)是一種網(wǎng)絡(luò)技術(shù),用于在私有網(wǎng)絡(luò)(如局域網(wǎng))中訪問(wèn)位于公共網(wǎng)絡(luò)(如互聯(lián)網(wǎng))上的設(shè)備或服務(wù)。
在一個(gè)典型的網(wǎng)絡(luò)環(huán)境中,私有網(wǎng)絡(luò)中的設(shè)備使用私有IP地址,而公共網(wǎng)絡(luò)中的設(shè)備使用公共IP地址。由于私有IP地址在公共網(wǎng)絡(luò)中不可直接訪問(wèn),因此需要通過(guò)內(nèi)網(wǎng)穿透技術(shù)來(lái)實(shí)現(xiàn)私有網(wǎng)絡(luò)中設(shè)備的訪問(wèn)。
內(nèi)網(wǎng)穿透通過(guò)在公共網(wǎng)絡(luò)上建立一個(gè)轉(zhuǎn)發(fā)通道,將公共網(wǎng)絡(luò)中的請(qǐng)求轉(zhuǎn)發(fā)到私有網(wǎng)絡(luò)中的設(shè)備上,從而實(shí)現(xiàn)對(duì)私有網(wǎng)絡(luò)中設(shè)備的訪問(wèn)。
它通常涉及到使用一個(gè)中間服務(wù)器或服務(wù),該服務(wù)器位于公共網(wǎng)絡(luò)中,并具有公共IP地址。私有網(wǎng)絡(luò)中的設(shè)備通過(guò)與中間服務(wù)器建立連接,并在連接建立后,通過(guò)中間服務(wù)器傳輸數(shù)據(jù)。
內(nèi)網(wǎng)穿透技術(shù)在以下情況
下非常有用:
- 訪問(wèn)位于私有網(wǎng)絡(luò)中的設(shè)備或服務(wù),如家庭網(wǎng)絡(luò)中的攝像頭、文件共享服務(wù)器等。
- 遠(yuǎn)程管理或訪問(wèn)位于私有網(wǎng)絡(luò)中的設(shè)備,如遠(yuǎn)程桌面、SSH訪問(wèn)等。
- 在開(kāi)發(fā)和測(cè)試環(huán)境中,通過(guò)公共網(wǎng)絡(luò)訪問(wèn)局域網(wǎng)中的應(yīng)用程序或服務(wù)。
常見(jiàn)的內(nèi)網(wǎng)穿透工具或服務(wù)
,包括:ngrok、frp、花生殼等。它們提供了簡(jiǎn)單的配置和管理界面,使用戶能夠快速設(shè)置和使用內(nèi)網(wǎng)穿透功能。
需要注意的是,使用內(nèi)網(wǎng)穿透將私有網(wǎng)絡(luò)中的設(shè)備暴露在公共網(wǎng)絡(luò)中,因此需要采取適當(dāng)?shù)?code>安全措施,如使用安全協(xié)議(如HTTPS)、訪問(wèn)控制列表(ACL)等,以保護(hù)設(shè)備和數(shù)據(jù)的安全性。
2.2 本地端口轉(zhuǎn)發(fā)使用步驟
先在本地啟動(dòng)你的項(xiàng)目服務(wù),比如使用 vite 啟動(dòng)一個(gè)項(xiàng)目,端口號(hào)為 5173。
然后切換到 端口
視圖,點(diǎn)擊 轉(zhuǎn)發(fā)端口
按鈕。
輸入端口號(hào) 5173,確認(rèn)后如果你沒(méi)有登錄 GitHub 賬號(hào),會(huì)提示你登錄,按照提示全部允許操作即可,授權(quán)成功后會(huì)自動(dòng)跳轉(zhuǎn)回VSCode。
最后,復(fù)制轉(zhuǎn)發(fā)地址,發(fā)給需要的人。
2.3 一些重要的使用說(shuō)明
默認(rèn)情況下,轉(zhuǎn)發(fā)的端口是私有的,只有使用同一個(gè) GitHub 賬號(hào)登錄的用戶才能訪問(wèn)。
如果你想要公開(kāi)你的服務(wù),讓任何人都可以訪問(wèn),你可以在 端口
視圖中右鍵點(diǎn)擊 端口可見(jiàn)性
,選擇 公共
即可。
如果用戶第一次使用這個(gè)功能進(jìn)行訪問(wèn),打開(kāi)網(wǎng)址時(shí)會(huì)出現(xiàn)一些提示說(shuō)明,直接點(diǎn)擊 繼續(xù)
正常訪問(wèn)即可。
結(jié)語(yǔ)
建立這個(gè)平臺(tái)的初衷:
- 打造一個(gè)僅包含前端問(wèn)題的問(wèn)答平臺(tái),讓大家高效搜索處理同樣問(wèn)題。
- 通過(guò)不斷積累問(wèn)題,一起練習(xí)邏輯思維,并順便學(xué)習(xí)相關(guān)的知識(shí)點(diǎn)。
- 遇到難題,遇到有共鳴的問(wèn)題,一起討論,一起沉淀,一起成長(zhǎng)。
以上就是用VSCode實(shí)現(xiàn)內(nèi)網(wǎng)穿透的步驟詳解的詳細(xì)內(nèi)容,更多關(guān)于VSCode實(shí)現(xiàn)內(nèi)網(wǎng)穿透的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
用戶權(quán)限管理設(shè)計(jì)[圖文說(shuō)明]
用戶管理權(quán)限設(shè)計(jì)一直是大家討論的熱點(diǎn),因?yàn)閹缀跎婕暗矫恳粋€(gè)開(kāi)發(fā)的業(yè)務(wù)系統(tǒng)。我找了很多很多的資料,大家的核心基本上都是一樣的:基于角色管理. 用戶,角色,模塊,權(quán)限的相互組合,就可以形成一個(gè)強(qiáng)大的權(quán)限管理系統(tǒng)。2008-12-12s49?磁盤(pán)存儲(chǔ)文件系統(tǒng)管理詳解
這篇文章主要為大家介紹了s49?磁盤(pán)存儲(chǔ)文件系統(tǒng)管理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11postman接口做關(guān)聯(lián)測(cè)試的方法步驟
本文主要介紹了postman接口做關(guān)聯(lián)測(cè)試的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01如何設(shè)計(jì)一個(gè)幾十萬(wàn)在線用戶彈幕系統(tǒng)需求方案
這篇文章主要介紹了為大家如何設(shè)計(jì)一個(gè)幾十萬(wàn)在線用戶彈幕系統(tǒng)的需求實(shí)現(xiàn)方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-05-05使用 Conditional Menus 插件讓 WordPress 在不同頁(yè)面顯示不同菜單
這篇文章主要介紹了如何使WordPress在不同頁(yè)面顯示不同菜單2021-09-09php/asp/asp.net中判斷百度移動(dòng)和PC蜘蛛的實(shí)現(xiàn)代碼
這篇文章主要介紹了php/asp/asp.net中判斷百度移動(dòng)和PC蜘蛛的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-09-09