打穿網路限制架設 server — ngrok

更新於 發佈於 閱讀時間約 3 分鐘

0x00 前言

要架設一個服務通常需要幾個條件

  1. Public IP: 如果是固定 IP 會更好,如果是動態 IP 就會更麻煩一
  2. Domain Name: 除非希望 client 直接用 IP access,否則都會註冊一個 domain 綁 IP 後,提供給 client 使用
  3. DNS: 要讓 Domain 綁 IP 還需要一個 DNS 服務,通常可以用免費的 Cloudflare,或是域名提供商提供的 DNS 服務
  4. Port Forward: 不一定需要,但如果電腦在 router 後面的話,就會需要設定 port forward 才能將封包轉發到我們預期的電腦上

0x01 建立一個 http server

我們先用 nodejs 來建立一個簡單的 http server

接著啟動它

node server.js
如果想要直接測試可以直接用我建立的 gist 來啟動玩玩
curl -s https://gist.githubusercontent.com/neokn/32b2f49505111069c73ed8d41b5d09e4/raw/745e106a20699d087896c4e5460564d5a719f22a/server.js| node

這時候我們可以用瀏覽器開啟

http://localhost:8080
raw-image

0x02 向世界說 Hello, World

這時候我們的 Hello, World! 只有我們自己看得到
My World is Your World 全家就是你家的概念

如果我們所在的位置網路不是我們可以控制的
例如:公司、旅館、租屋處 …

那我們想要讓這個世界上能連上網路的人
都能看到 Hello, World!
我們該怎麼做呢?
首先先安裝 ngrok

brew install ngrok
非 macOS 可以參考文件 https://ngrok.com/download

接著可以啟動 ngrok 並且指定 port
以上方我們啟動的 server 是 8080 port 為例

ngrok http 8080
raw-image

接著會看到這個畫面
其中 Forwarding 的 URL 就是可以 share 給其他人
他們就能看到我們的 Hello, World! 囉!

https://2e8a-114-137-19-95.jp.ngrok.io

而且 ngrok 提供的是有 https 的 URL 非常的不錯
可以減少在一些開發上會遇到的一些安全性問題


0x03 ngrok 原理及使用限制

ngrok 用起來簡單
原理上其實也很容易理解

當我們將 ngrok 服務啟動之後
會在 ngrok 和 server 之間建立一條 tunnel
當 client 連到 ngrok 之後就會用 tunnel 向 server 取得內容

client -> ngrok <- tunnel -> server

如果這是一個會通過 ngrok 的 server 而居然不用錢?
天下當然沒有白吃的午餐
所以未付費的狀況下有一些限制

  1. tunnel 建立起來之後有 2 hrs 的限制
  2. 每次啟動的時候 URL 都是新的所以要不斷的更新 URL
  3. 無法自訂 domain
  4. 如果 server 是 HTML 的話會需要註冊 ngrok 帳號
raw-image

0xFF 總結

ngrok 是一個非常方便的工具
在自己的電腦就可以把 server 讓其他人可以 access

例如:
在公司工作可能要看網頁修改結果
直接坐到旁邊就可以看
但 work from home 期間
除了發佈到測試環境
或者就要用 share screen 的方式看
而有了 ngrok 的話
就可以讓對方直接連接到自己的電腦測試
非常的快速

以過去經驗來說免費版本的限制
不會是太大的問題
但如果有其他需求可能就要考慮付費版本解鎖功能
或是其他替代方案了

留言
avatar-img
留言分享你的想法!
avatar-img
Justin Shaw's Salon
2會員
7內容數
Justin Shaw's Salon的其他內容
2023/07/31
由於遇到系統不支援歐洲語系的重音符號或變音符號因此有了這篇文章
Thumbnail
2023/07/31
由於遇到系統不支援歐洲語系的重音符號或變音符號因此有了這篇文章
Thumbnail
2023/07/28
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
2023/07/28
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
2023/07/22
講完了 Story 的拆解 其中提到了 Scope 那麼 Scope 是什麼呢? 以及伴隨著 Scope  很常聽到的 Acceptance Criteria (AC) 又扮演了什麼樣的角色? 0x00 回顧 在系列文章中的第一篇 From Scrum to LeSS — Roles
Thumbnail
2023/07/22
講完了 Story 的拆解 其中提到了 Scope 那麼 Scope 是什麼呢? 以及伴隨著 Scope  很常聽到的 Acceptance Criteria (AC) 又扮演了什麼樣的角色? 0x00 回顧 在系列文章中的第一篇 From Scrum to LeSS — Roles
Thumbnail
看更多
你可能也想看
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
這篇想來寫,剛碰到js得時候,為了讓程式可以運作而安裝Node.js 。Node.js 是能夠在伺服器上面運行 JavaScript 的應用平台環境,透過 Node.js 提供的函式庫與執行環境能完成伺服器端服務。此篇幅就直接從純後端的角度切入摟(對不起拉我寫來寫去還是不知道怎麼順順的寫好文章開頭Q
Thumbnail
簡介如何使用 NGROK 來協助開發與測試
Thumbnail
簡介如何使用 NGROK 來協助開發與測試
Thumbnail
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
Recently, I add some useful settings for my nginx web server. I would like to take a note of some basic and useful settings of nginx. http server
Thumbnail
Recently, I add some useful settings for my nginx web server. I would like to take a note of some basic and useful settings of nginx. http server
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News