打穿網路限制架設 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
    2會員
    7內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    Justin Shaw's Salon 的其他內容
    由於遇到系統不支援歐洲語系的重音符號或變音符號因此有了這篇文章
    Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
    講完了 Story 的拆解 其中提到了 Scope 那麼 Scope 是什麼呢? 以及伴隨著 Scope  很常聽到的 Acceptance Criteria (AC) 又扮演了什麼樣的角色? 0x00 回顧 在系列文章中的第一篇 From Scrum to LeSS — Roles
    當 Story 被確定下來之後 要如何切割 Story  讓他們可以在 Sprint 期間能 Done 過去經驗我們都知道 當 Story 太大的時候要拆小 但問題就來了 小要小到多小 有可能小到 Task 嗎?
    從一開始 Story 的出生 就會被放進 Product Backlog 經過漫長的等待 終於在某次的 Sprint 中被提到 Sprint Backlog 接著透過獅子🦁及猿猴🦍們的努力 將 Coffin 轉換成 Code Story 終於蛻變成了 PSPI
    最近上完了一門 LeSS in Action 的課程 雖然在 Scrum Team 少說也四五年了 這期間也考過了 CSM, PMP 認證 但這次的課程後對 Scrum 又有了新的認識 同時也回顧一下自己在執行了將近五年的 Scrum 開發經驗
    由於遇到系統不支援歐洲語系的重音符號或變音符號因此有了這篇文章
    Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
    講完了 Story 的拆解 其中提到了 Scope 那麼 Scope 是什麼呢? 以及伴隨著 Scope  很常聽到的 Acceptance Criteria (AC) 又扮演了什麼樣的角色? 0x00 回顧 在系列文章中的第一篇 From Scrum to LeSS — Roles
    當 Story 被確定下來之後 要如何切割 Story  讓他們可以在 Sprint 期間能 Done 過去經驗我們都知道 當 Story 太大的時候要拆小 但問題就來了 小要小到多小 有可能小到 Task 嗎?
    從一開始 Story 的出生 就會被放進 Product Backlog 經過漫長的等待 終於在某次的 Sprint 中被提到 Sprint Backlog 接著透過獅子🦁及猿猴🦍們的努力 將 Coffin 轉換成 Code Story 終於蛻變成了 PSPI
    最近上完了一門 LeSS in Action 的課程 雖然在 Scrum Team 少說也四五年了 這期間也考過了 CSM, PMP 認證 但這次的課程後對 Scrum 又有了新的認識 同時也回顧一下自己在執行了將近五年的 Scrum 開發經驗
    你可能也想看
    Google News 追蹤
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    安裝官方 nginx 先在/etc/yum.repos.d新增一個nginx.repo的檔案 並加入以下內容 [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgc
    Thumbnail
    在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
    Thumbnail
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    Thumbnail
    當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
    Thumbnail
      在開始操作Web Service之前,要先做一些前置作業IIS的安裝,再開始建置Web Service相關內容,最後就是連線測試。   IIS(Internet Information Services)是網際網路資訊服務,可以讓網站使用HTTP/HTTPS、FTP/FTPS、SMTP 等等的
    首先開啓終端機 切換成su帳號 sudo -i 安裝Apache dnf install httpd 新增Apache配置檔 vim /etc/httpd/conf.d/nextcloud.conf 將以下內容貼上後存檔(:wq) <VirtualHost *:80> Docu
    Thumbnail
    在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
    Networking 網路類 Get the IP address of all interfaces(顯示網路資訊): networkctl status Display all IP addresses of the host(顯示主機名稱相關): hostname -I Enable/d
    Thumbnail
    gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下
    Thumbnail
    徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
    Thumbnail
    隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
    安裝官方 nginx 先在/etc/yum.repos.d新增一個nginx.repo的檔案 並加入以下內容 [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgc
    Thumbnail
    在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
    Thumbnail
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    Thumbnail
    當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
    Thumbnail
      在開始操作Web Service之前,要先做一些前置作業IIS的安裝,再開始建置Web Service相關內容,最後就是連線測試。   IIS(Internet Information Services)是網際網路資訊服務,可以讓網站使用HTTP/HTTPS、FTP/FTPS、SMTP 等等的
    首先開啓終端機 切換成su帳號 sudo -i 安裝Apache dnf install httpd 新增Apache配置檔 vim /etc/httpd/conf.d/nextcloud.conf 將以下內容貼上後存檔(:wq) <VirtualHost *:80> Docu
    Thumbnail
    在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
    Networking 網路類 Get the IP address of all interfaces(顯示網路資訊): networkctl status Display all IP addresses of the host(顯示主機名稱相關): hostname -I Enable/d
    Thumbnail
    gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下