內容目錄

大家好,我是布萊克。今天要來跟大家分享的內容比較技術一點點,布萊克會用簡單好懂的例子讓大家理解的。以前學習網頁知識要提交作業時,常常會需要將網頁檔案給助教,然後助教在將所有學生的網頁發佈上網頁伺服器檢查並評分。現在時代不一樣了,只需要一個簡單的指令就可以辦到並取得公開連結。即使不提交檔案,也可以透過一個叫「ngrok」的服務,讓本機的網頁發佈到整個網際網路中,意思是你的同學或同事都可以造訪你做的網站,而且完全免費。以下布萊克就來詳細介紹 ngrok 服務與相關限制,不想錯過的趕快來看看吧!

什麼是 ngrok?

布萊克用一句話簡單述說:

不用任何複雜的設定,輕鬆讓本機 (localhost) 服務公開到全世界網路。

如果正在閱讀文章的你不具備資訊背景,很可能難以想像過去是如何讓全世界的人看到你的網站的。這邊布萊克簡單說明一下,一般來說開發網站的時候都會在自己電腦上開發,並使用 Chrome 等瀏覽器連到 http://localhost 觀看效果。現在人手一機,每個網站都會製作手機版,要在手機上觀看效果的話,大概也就讓手機連上家裡 Wi-Fi 在同個網路內才能看到效果。


圖片出自freepik.com

網站功能逐漸強大之後,工程師就會想著要整合多個功能,像是在網站內嵌入 FaceBook 留言的功能、加入線上金流支付,或是需要展示功能給老師或客戶看,總之做完的網站或服務一定會有需要對外公開的時候,不然花費時間做完也不會有人看得到。

在網路世界中要怎麼對外公開呢?打個簡單的比方,郵差要送一封信件給你,他一定要事先知道你的住址才可以送信吧!這道理套用在網路世界中,即需要跟網路服務供應商 (ISP) 申請一個對外的 IP,這樣全世界的人才能看到你的網站。


圖片出自freepik.com

不過 IP 都是一串數字,對電腦來說這個不算什麼,但對人類來說要記憶數字是一件困難的事情,因此你可能還需要網域名稱,就像 aidaidme.com這個網域名稱就好記很多了吧!

以上就是過去要怎麼公開自己做的網站要經過的流程,布萊克只是簡單帶過而已,實際做起來是耗時的事情,於是就出現 ngrok 這種服務了。只需要一個簡單的指令,剛才說的申請 IP 或是網域名稱的,通通免了!雖然 ngrok 已經變成收費服務了,但仍然有提供免費服務,對布萊克來說已經夠用了。以下將為各位介紹 ngrok 的設定教學。

ngrok 下載安裝及設定教學

步驟 1 註冊 ngrok 帳號




ngrok 註冊

步驟 2 下載 ngrok 執行檔

依據電腦環境選擇適合的版本進行下載即可。

ngrok 下載

步驟 3 解壓縮檔案

步驟 4 於資料夾列輸入 cmd 開啟命令提示字元功能

開啟命令提示字元

步驟 5 輸入指令與帳號連結

格式:ngrok.exe authtoken << 授權金鑰 >>


連結帳號
連結帳號

完成 出現下列訊息表示連結完成了


完成連結帳號

依照上面步驟進行操作並不困難,ngrok 設定就那麼簡單而已。下面布萊克舉幾個常用的情境帶大家看看強大的 ngrok 服務。

ngrok 常用與進階指令展示範例

使用情境 1 期末網站作業展示 (對外公開網站)

格式:ngrok http << 埠號 >>
例如:ngrok http 8000

畫面右邊是模擬學生要提交期末架設網站的作業,左邊則是助教收到連結後的使用方式。

使用情境 2 在圖書館遠端家裡的電腦 (跨地區遠端桌面連線)

格式:ngrok tcp << 埠號 >>
例如:ngrok tcp 3389

出門去圖書館先將 ngrok 服務啟動,隨後就能在圖書館遠端辦公了喔!

常見的公認埠號如下:

# 埠號 (Port) 服務 說明
1 21 FTP 全名為 File Transfer Protocol,適用於簡易傳輸,任何人只要持有帳號與密碼都可以隨意增刪檔案,所以在安全性、傳輸速度、連線品質上並沒有受到特別的技術加強
2 22 SSH 全名為 Secure Shell,一種加密的網路傳輸協定,可在不安全的網路中為網路服務提供安全的傳輸環境。
3 80 HTTP 全名為 HyperText Transfer Protocol,這是上網瀏覽使用最多的協定。
4 443 HTTPS 全名為 HyperText Transfer Protocol Secure,這是以HTTP為基底定義了相對安全的資料傳輸方法,現今多數網站已經套用這種加密方式。
5 1433 Microsoft SQL Server 由美國微軟公司所推出的關聯式資料庫。
6 3306 MySQL 原為開放原始碼的關聯式資料庫,2009年被美國甲骨文公司 (Oracle) 收購成為旗下產品。
7 3389 遠端桌面 遠端桌面連線的協定。

使用情境 3 提供客戶專屬帳號及密碼連線觀看網站功能 (限制網站存取)

格式:ngrok http -auth="<< 帳號 >>:<< 密碼 >>" << 埠號 >>
例如:ngrok http -auth="admin:password" 8000

如果覺得 ngrok 服務不太安全,各位也可以多建立一組帳號密碼,多一道防範密碼也較為安心。

使用情境 4 不知道怎麼架設網站,但又要提供客戶觀看網站外觀 (無網頁伺服器)

格式:ngrok http "file:///<< 網站根目錄路徑 >>"
例如:ngrok http "file:///C:\website"
格式:ngrok http -auth="<< 帳號 >>:<< 密碼 >>" file:///<< 網站根目錄路徑 >> (限制網站存取)
例如:ngrok http -auth="admin:password" file:///C:\website

如果是一個架站新手,不知道怎麼安裝網頁伺服器,可以透過這個方法將網站發佈出去。


圖片出自freepik.com

使用情境 5 使用自己申請的網域名稱 (固定網域) 付費會員

格式:ngrok http -subdomain=<< 網域名稱 >> << 埠號 >>
例如:ngrok http -subdomain=aidaidme 80

看過以上幾個範例,應該不難發現 ngrok 會隨機產生英文+數字的子網域名稱給大家使用。如果要產生一組專屬於你的網域,那就會需要用到這個功能,執行後將相關連結轉換成 https://aidaidme.ngrok.io。此功能僅開放給付費會員使用,敬請留意。

針對以上的幾個使用情境,各位是否 ngrok 服務覺得相當方便使用呢?如果需要參考更多的進階功能,請參考官方網站的說明文件。



結語

布萊克覺得 ngrok 是一個相當方便的服務,雖然現在已經轉型為付費服務了,但免費的功能已經足夠使用在多數的場景了。網路上還有自己架設的教學,可以參考這篇文章,自己架設限制也不會那麼多,有興趣的話也可以參考一下。

以上就是這次布萊克要分享的內容,如果覺得布萊克分享的內容相當實用,敬請分享給更多需要的人,或是有任何回饋意見也都歡迎留言。

最後修改日期: 2020-06-19

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。