打穿網路限制架設 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
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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
Thumbnail
在先前的教學中,我都教大家程式寫完以後就架設到「Heroku」的雲端上做使用,但如果你想嘗試其他自創的功能,這時一定會需要一直Debug,如果每次想看結果都要部屬一次Heroku,那這樣就變得相當麻煩,所以今天我就教大家如何利用本機端來提供外網連接的方式吧!!
Thumbnail
在先前的教學中,我都教大家程式寫完以後就架設到「Heroku」的雲端上做使用,但如果你想嘗試其他自創的功能,這時一定會需要一直Debug,如果每次想看結果都要部屬一次Heroku,那這樣就變得相當麻煩,所以今天我就教大家如何利用本機端來提供外網連接的方式吧!!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News