大家好，我是魚皮，今天分享一個(gè)非常實(shí)用的小教程。

之前反復(fù)跟大家強(qiáng)調(diào)過，想要讓自己簡(jiǎn)歷上的項(xiàng)目經(jīng)歷顯得更真實(shí)，最好是把項(xiàng)目上線并且提供地址給招聘方訪問。

結(jié)果有同學(xué)表示無奈：

• 魚皮啊，我沒有服務(wù)器，那玩意兒要錢，咋辦？

• 魚皮啊，我項(xiàng)目用的服務(wù)太多了，數(shù)據(jù)庫 Redis 消息隊(duì)列 ES 什么的，想上線太麻煩了，咋辦？

今天就給大家分享一個(gè)免費(fèi)的神器，不用買服務(wù)器、不用自己部署各種服務(wù)，直接讓別人訪問到你電腦上的網(wǎng)站！

這種方法尤其適于參加競(jìng)賽，需要給評(píng)委演示項(xiàng)目的場(chǎng)景。

內(nèi)網(wǎng)穿透

先思考一個(gè)問題：為什么別人無法直接訪問你電腦上運(yùn)行的網(wǎng)站和服務(wù)？

答案很簡(jiǎn)單。大多數(shù)情況下，我們的個(gè)人電腦都處于內(nèi)網(wǎng)，即沒有可公開訪問的獨(dú)立 IP 地址，因此其他內(nèi)網(wǎng)用戶找不到你，就沒辦法和你建立網(wǎng)絡(luò)連接。

為了實(shí)現(xiàn)上述需求，我們采取的方法是 內(nèi)網(wǎng)穿透 。

什么是內(nèi)網(wǎng)穿透呢？

它的作用是：將內(nèi)網(wǎng)的電腦 “暴露” 到公共網(wǎng)絡(luò)?？梢院?jiǎn)單理解為一個(gè)中間人，由于他知道你的電腦地址，所以能建立一條隧道，幫助其他用戶訪問到你的計(jì)算機(jī)。

早在 21 年的時(shí)候，我就給大家分享過一款內(nèi)網(wǎng)穿透工具 ，但如今這個(gè)工具的限制越來越大了，所以這次我們要使用的免費(fèi)內(nèi)網(wǎng)穿透工具是 Ngrok。

Ngrok 實(shí)現(xiàn)內(nèi)網(wǎng)穿透

首先我們?cè)L問 Ngrok 官網(wǎng)，使用 GitHub 或者郵箱進(jìn)行注冊(cè)登錄。

指路：https://ngrok.com/download

注冊(cè)登錄成功后，根據(jù)自己的操作系統(tǒng)選擇下載 Ngrok 的安裝壓縮包：

將下載好的 zip 包解壓，得到 ngrok 可執(zhí)行文件：

接下來我們參照官方文檔，在本地執(zhí)行 ngrok 命令添加用戶的 authtoken：

直接復(fù)制上圖的命令，進(jìn)入到 ngrok 文件所在的目錄執(zhí)行，如下圖：

現(xiàn)在，你的賬號(hào)信息已經(jīng)保存到本地的 ngrok 配置文件中了，接下來只需要執(zhí)行 ngrok http <端口號(hào)>命令即可啟動(dòng)內(nèi)網(wǎng)穿透服務(wù)。

如下圖，注意將端口號(hào)改為自己本地項(xiàng)目占用的端口號(hào)，比如前端一般是 80、后端一般是 8080。

此處我的電腦有一個(gè)前端網(wǎng)站占用端口是 5173，所以命令如下：

神奇的事情發(fā)生了，Ngrok 自動(dòng)為我們生成了一個(gè)域名（還是 Https 的哦），指向本機(jī)的服務(wù)：

在瀏覽器訪問該域名，就能訪問到自己電腦上啟動(dòng)的項(xiàng)目啦！

是不是很方便呢？

固定域名

通過上述命令直接啟動(dòng)內(nèi)網(wǎng)穿透，每次得到的訪問域名是隨機(jī)生成的，這不利于我們持續(xù)訪問。

可以從 ngrok 官網(wǎng)找到靜態(tài)域名的配置：

第一次進(jìn)入域名配置頁面時(shí)，如果沒有域名，可以免費(fèi)創(chuàng)建一個(gè)：

創(chuàng)建好域名后，復(fù)制下圖的 ngrok 啟動(dòng)命令：

然后在終端中執(zhí)行該命令即可，本質(zhì)上就是在啟動(dòng) ngrok 時(shí)指定了 domain 參數(shù)：

通過這種方式，我們每次的內(nèi)網(wǎng)穿透域名都是固定的啦：

如果你是一名后端開發(fā)同學(xué)，要讓前端同學(xué)訪問你本地開發(fā)好的接口，通過這種方式就很簡(jiǎn)單了，不用反復(fù)到線上（或者測(cè)試服務(wù)器）部署項(xiàng)目：

多服務(wù)

以上是單服務(wù)的內(nèi)網(wǎng)穿透，但實(shí)際情況下，我們本地可能不僅有前端、還有后端服務(wù)，那么如何利用 Ngrok 同時(shí)內(nèi)網(wǎng)穿透多個(gè)服務(wù)呢？

這就需要我們修改 ngrok 的配置文件，手動(dòng)配置隧道。

首先根據(jù)官方文檔的指引，找到自己電腦上的默認(rèn) ngrok.yml 配置文件：

然后在編輯器中修改這個(gè)文件，比如配置前端（frontend）和后端（backend）兩條隧道，對(duì)應(yīng)的本地服務(wù)端口分別為 5173 和 8104：

之后，可以通過 ngrok start <隧道名稱> 配置指定啟動(dòng)哪個(gè)隧道：

或者執(zhí)行 ngrok start --all 命令同時(shí)啟動(dòng)所有隧道，運(yùn)行結(jié)果如下，同時(shí)在 ngrok-free.app 域名下分配了 2 個(gè)子域名，并指向?qū)?yīng)服務(wù)：

訪問不同的域名，就能訪問到前端或后端了~

但通過上面的方式，每次啟動(dòng)內(nèi)網(wǎng)穿透得到的域名依然是隨機(jī)的。我們可以通過修改 ngrok.yml 文件的 domain 配置來指定域名，如下圖：

然后執(zhí)行 ?ngrok start --all 命令。。。

結(jié)果報(bào)錯(cuò)啦！

原來 Ngrok 限制每個(gè)域名只能綁定一個(gè)端口。

不過也有解決方案，可以在配置文件中指定 subdomain，給每個(gè)端口分配一個(gè)子域名。但很遺憾，這種方式是需要額外付費(fèi)的，此處不再贅述。

那如果我們想要用固定域名訪問本地的多個(gè)端口，怎么辦呢？

可以使用 Nginx 進(jìn)行轉(zhuǎn)發(fā)呀！比如在 80 端口啟動(dòng) Nginx 服務(wù)，內(nèi)網(wǎng)穿透指向 80 端口，然后根據(jù) url 請(qǐng)求地址的前綴，轉(zhuǎn)發(fā)到對(duì)應(yīng)的前端或后端服務(wù)。

保護(hù)隱私

用完 Ngrok 后，記得關(guān)閉服務(wù)，否則別人能直接訪問你電腦上的指定服務(wù)，會(huì)有一定的安全風(fēng)險(xiǎn)。

對(duì)了，AuthToken 千萬別泄露哦！當(dāng)你們看到這篇文章的時(shí)候，我已經(jīng)按照下圖的方式重置 token 了~

其他應(yīng)用場(chǎng)景

除了給別人展示自己本地的項(xiàng)目外，內(nèi)網(wǎng)穿透還有很多應(yīng)用場(chǎng)景。

比如上面提到的，在協(xié)作開發(fā)項(xiàng)目時(shí)，通過內(nèi)網(wǎng)穿透讓別人隨時(shí)訪問自己電腦上正在開發(fā)的網(wǎng)站或服務(wù)，而沒必要反反復(fù)復(fù)把開發(fā)到一半的項(xiàng)目部署到服務(wù)器上、再去更新。

再比如開發(fā)微信公眾號(hào)后臺(tái)服務(wù)時(shí)，需要填寫一個(gè)服務(wù)的域名來接受來自微信側(cè)的請(qǐng)求，如果你沒有域名和線上服務(wù)器，用內(nèi)網(wǎng)穿透生成一個(gè)即可，還能直接在本地 Debug 程序。

希望大家學(xué)會(huì)這種 “上線” 方式，還是非常實(shí)用的~