玩轉(zhuǎn)ubuntu ——內(nèi)網(wǎng)穿透篇

很多同學(xué)都開發(fā)中都有想在手機上調(diào)試的需求，又或者是需要在微信上調(diào)試，當然我們有很多選擇，比如fidder，whistle等工具。也有同學(xué)自己購置樹莓派，Nas等家用設(shè)備，想在外訪問家里的設(shè)備。
這次為大家介紹內(nèi)網(wǎng)穿透

百度百科中如此介紹：

內(nèi)網(wǎng)穿透，即NAT穿透，網(wǎng)絡(luò)連接時術(shù)語，計算機是局域網(wǎng)內(nèi)時，外網(wǎng)與內(nèi)網(wǎng)的計算機節(jié)點需要連接通信，有時就會出現(xiàn)不支持內(nèi)網(wǎng)穿透。就是說映射端口，能讓外網(wǎng)的電腦找到處于內(nèi)網(wǎng)的電腦,提高下載速度。不管是內(nèi)網(wǎng)穿透還是其他類型的網(wǎng)絡(luò)穿透，都是網(wǎng)絡(luò)穿透的統(tǒng)一方法來研究和解決。

通俗點說，讓外網(wǎng)電腦能找到內(nèi)網(wǎng)中的電腦，如此一來，我們就可以做很多有趣的事情。
這次我們將用ngrok進行內(nèi)網(wǎng)傳統(tǒng)

東西準備

  • vps服務(wù)器（我用的是阿里云的云服務(wù)器）
  • 屬于自己的域名（我用的是阿里云的域名）

ngrok是基于golong編譯的，所以我們先安裝golong
玩轉(zhuǎn)ubuntu——golong篇
其次我們需要git進行clone ngrok 的代碼，所以安裝git
玩轉(zhuǎn)ubuntu——git篇

#clone代碼
cd /home
git clone https://github.com/inconshreveable/ngrok.git
cd ./ngrok

我配置自己的域名是mydomain.com，考慮到后續(xù)可能有多個設(shè)備使用，我建立了一個三級域名*.tunnel.mydomain.com，方便給不同的設(shè)備代理

#為base域名ddns.hellohl.com生成證書
openssl genrsa -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -subj "/CN=tunnel.mydomain.com" -days 5000 -out rootCA.pem
openssl genrsa -out device.key 2048
openssl req -new -key device.key -subj "/CN=tunnel.mydomain.com" -out device.csr
openssl x509 -req -in device.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out device.crt -days 5000

#將生成的證書放置在對應(yīng)的位置
cp rootCA.pem assets/client/tls/ngrokroot.crt
cp device.crt assets/server/tls/snakeoil.crt
cp device.key assets/server/tls/snakeoil.key

然后我們需要將生成好的代碼編譯成我們需要的服務(wù)端程序

# 默認是生成Linux 64位系統(tǒng)
make release-server 

# Linux 平臺 32 位系統(tǒng)
GOOS=linux GOARCH=386 make release-server 
# Linux 平臺 64 位系統(tǒng)
GOOS=linux GOARCH=amd64 make release-server 

# Windows 平臺 32 位系統(tǒng)
GOOS=windows GOARCH=386 make release-server 
# Windows 平臺 64 位系統(tǒng)
GOOS=windows GOARCH=amd64 make release-server 

# MAC 平臺 32 位系統(tǒng)
GOOS=darwin GOARCH=386 make release-server 
# MAC 平臺 64 位系統(tǒng)
GOOS=darwin GOARCH=amd64 make release-server 

 # ARM 平臺
GOOS=linux GOARCH=arm make release-server

這里我們需要區(qū)分下各自的服務(wù)器環(huán)境，顯示下面的內(nèi)容則表示編譯成功，如果提示失敗可能是git或golong版本過低，也可能是網(wǎng)絡(luò)問題鏈接不上github，大家可以將所需要的包手動上傳至響應(yīng)目錄

GOOS="" GOARCH="" go get github.com/jteeuwen/go-bindata/go-bindata
bin/go-bindata -nomemcopy -pkg=assets -tags=release \
    -debug=false \
    -o=src/ngrok/client/assets/assets_release.go \
    assets/client/...
bin/go-bindata -nomemcopy -pkg=assets -tags=release \
    -debug=false \
    -o=src/ngrok/server/assets/assets_release.go \
    assets/server/...
go get -tags 'release' -d -v ngrok/...
github.com/inconshreveable/mousetrap (download)
github.com/rcrowley/go-metrics (download)
Fetching https://gopkg.in/inconshreveable/go-update.v0?go-get=1
Parsing meta tags from https://gopkg.in/inconshreveable/go-update.v0?go-get=1 (status code 200)
get "gopkg.in/inconshreveable/go-update.v0": found meta tag main.metaImport{Prefix:"gopkg.in/inconshreveable/go-update.v0", VCS:"git", RepoRoot:"https://gopkg.in/inconshreveable/go-update.v0"} at https://gopkg.in/inconshreveable/go-update.v0?go-get=1
gopkg.in/inconshreveable/go-update.v0 (download)
github.com/kardianos/osext (download)
github.com/kr/binarydist (download)
Fetching https://gopkg.in/inconshreveable/go-update.v0/check?go-get=1
Parsing meta tags from https://gopkg.in/inconshreveable/go-update.v0/check?go-get=1 (status code 200)
get "gopkg.in/inconshreveable/go-update.v0/check": found meta tag main.metaImport{Prefix:"gopkg.in/inconshreveable/go-update.v0", VCS:"git", RepoRoot:"https://gopkg.in/inconshreveable/go-update.v0"} at https://gopkg.in/inconshreveable/go-update.v0/check?go-get=1
get "gopkg.in/inconshreveable/go-update.v0/check": verifying non-authoritative meta tag
Fetching https://gopkg.in/inconshreveable/go-update.v0?go-get=1
Parsing meta tags from https://gopkg.in/inconshreveable/go-update.v0?go-get=1 (status code 200)
Fetching https://gopkg.in/yaml.v1?go-get=1
Parsing meta tags from https://gopkg.in/yaml.v1?go-get=1 (status code 200)
get "gopkg.in/yaml.v1": found meta tag main.metaImport{Prefix:"gopkg.in/yaml.v1", VCS:"git", RepoRoot:"https://gopkg.in/yaml.v1"} at https://gopkg.in/yaml.v1?go-get=1
gopkg.in/yaml.v1 (download)
github.com/inconshreveable/go-vhost (download)
github.com/alecthomas/log4go (download)
github.com/nsf/termbox-go (download)
github.com/mattn/go-runewidth (download)
github.com/gorilla/websocket (download)
go install -tags 'release' ngrok/main/ngrokd

我們可以在./bin/目錄中找到文件ngrokd。可以先運行測試一下。

#執(zhí)行ngrokd
./bin/ngrokd -domain="ddns.hellohl.com" -httpAddr=":8080"

出現(xiàn)以下提示就說明啟動成功

[14:28:19 CST 2019/07/17] [INFO] (ngrok/log.(*PrefixLogger).Info:83) [registry] [tun] No affinity cache specified
[14:28:19 CST 2019/07/17] [INFO] (ngrok/log.Info:112) Listening for public http connections on [::]:8080
[14:28:19 CST 2019/07/17] [INFO] (ngrok/log.Info:112) Listening for public https connections on [::]:443
[14:28:19 CST 2019/07/17] [INFO] (ngrok/log.Info:112) Listening for control and proxy connections on [::]:4443
[14:28:19 CST 2019/07/17] [INFO] (ngrok/log.(*PrefixLogger).Info:83) [metrics] Reporting every 30 seconds

之后Ctrl+C退出ngrokd，繼續(xù)來編譯ngrok客戶端。編譯ngrok客戶端也很簡單，但同樣也需要區(qū)分響應(yīng)的環(huán)境。

# 默認是生成Linux 64位系統(tǒng)
make release-client

# Linux 平臺 32 位系統(tǒng)
GOOS=linux GOARCH=386 make release-client
# Linux 平臺 64 位系統(tǒng)
GOOS=linux GOARCH=amd64 make release-client

# Windows 平臺 32 位系統(tǒng)
GOOS=windows GOARCH=386 make release-client
# Windows 平臺 64 位系統(tǒng)
GOOS=windows GOARCH=amd64 make release-client

# MAC 平臺 32 位系統(tǒng)
GOOS=darwin GOARCH=386 make release-client
# MAC 平臺 64 位系統(tǒng)
GOOS=darwin GOARCH=amd64 make release-client

 # ARM 平臺
GOOS=linux GOARCH=arm make release-client

編譯完成后，在bin/windows_amd64目錄下會生成ngrok.exe文件，切記，ngrokd是服務(wù)端程序，ngrok是客戶端程序，把客戶端程序下載到本地就可以進行后續(xù)操作了

首先執(zhí)行VPS上的服務(wù)器端ngrokd，這里的8080指的是服務(wù)器啟用8080端口，就是說內(nèi)網(wǎng)穿透后的域名為xxx.tunnel,mydomain.com:8080。如果在80端口未作他用的情況下，也可將8080端口改為80，這樣更方便些。而如果我們VPS的80端口被占用了，但是我們還想用80端口作為服務(wù)端口，那么可以使用nginx做一個xxx.tunnel.mydomain.com的反向代理。

#服務(wù)端執(zhí)行ngrokd
./bin/ngrokd -domain="tunnel.mydomain.com" -httpAddr=":8080"

在本地ngrok.exe所在目錄下建立文件ngrok.cfg，用記事本等文本編輯器寫入以下內(nèi)容并保存。

server_addr: "ngrok.dingdayu.com:4443"
trust_host_root_certs: false

各位小伙伴的webpack一般啟動都是8080端口，所以這里以8080端口為例。打開命令提示符，切到ngrok.exe所在目錄

#啟動ngrok客戶端
#注意：如果不加參數(shù)-subdomain=test，將會隨機自動分配子域名。
#
./ngrok -config="ngrok.cfg" -subdomain="test" 8080

正常情況下，客戶端上會顯示以下內(nèi)容，表示成功連接到服務(wù)器端。

#客戶端ngrok正常執(zhí)行顯示的內(nèi)容
ngrok                                                  (Ctrl+C to quit)
 
Tunnel Status     online
Version           1.7/1.7
Forwarding        http://ngrok.dingdayu.com:8080 -> 127.0.0.1:8080
Forwarding        https://ngrok.dingdayu.com:8080 -> 127.0.0.1:8080
Web Interface     127.0.0.1:4040
# Conn            0
Avg Conn Time     0.00ms

打開瀏覽器，分別在地址欄中輸入http://localhost:8080和http://test.tunnel.mydomain.com:8080，如果后者正常顯示并且和http://localhost顯示的內(nèi)容相同，則證明我們已經(jīng)成功了。

vue-cli以及有些webpack代理都配置好了，頁面出現(xiàn)Invalid Host header，這時候我們需要更改下webpack中devServer的配置，大家可根據(jù)自己的實際情況進行修改

devServer: {
  disableHostCheck: true,
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容