<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ngrok on Wayne's blog | 偉恩的部落格 | 技術博客</title><link>https://blog.wayne-project.com/tags/ngrok/</link><description>Recent content in Ngrok on Wayne's blog | 偉恩的部落格 | 技術博客</description><generator>Hugo -- gohugo.io</generator><language>zh-tw</language><lastBuildDate>Mon, 26 Sep 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.wayne-project.com/tags/ngrok/index.xml" rel="self" type="application/rss+xml"/><item><title>透過 ngrok 產生臨時用的網址到指定機器</title><link>https://blog.wayne-project.com/2022-09-26/ngrok-basic/</link><pubDate>Mon, 26 Sep 2022 00:00:00 +0000</pubDate><guid>https://blog.wayne-project.com/2022-09-26/ngrok-basic/</guid><description>&lt;img src="https://live.staticflickr.com/65535/52384429631_a48959b2b8_o.png" alt="Featured image of post 透過 ngrok 產生臨時用的網址到指定機器" /&gt;&lt;style&gt;
.focus {
background: #f1e2e2;
color: #d62c2c;
padding: 0 5px;
}
&lt;/style&gt;
&lt;h2 id="參考文章"&gt;參考文章&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a class="link" href="https://blog.alantsai.net/posts/2018/04/devtooltips-5-ngrok-allow-public-to-access-localhost-website-and-sql-server" target="_blank" rel="noopener"
&gt;參考網址&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="link" href="https://noob.tw/ngrok/" target="_blank" rel="noopener"
&gt;參考網址&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="link" href="https://editor.leonh.space/2021/ngrok/" target="_blank" rel="noopener"
&gt;參考網址&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="前言"&gt;前言&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;在開發的過程中，有時候會需要從另外一臺機器測試在local的網站及服務。最常見的情況就是當要測試網站在手機上看起來長什麽樣子的時候，或者有時候要讓別人連到自己local的sql serer的時候。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ngrok&lt;/code&gt; 就是讓這一切變得容易的工具，而且很佛心的是，免費版就夠一般使用。&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="特性"&gt;特性&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;綁定本機的埠號並接受外部連入。&lt;/li&gt;
&lt;li&gt;可穿透 NAT 或防火牆讓外部連入。&lt;/li&gt;
&lt;li&gt;會拿到一個 ngork 的網址方便貼到信件或訊息內。&lt;/li&gt;
&lt;li&gt;ngrok 產生的網址支援 HTTP / HTTPS。&lt;/li&gt;
&lt;li&gt;有 web 界面讓我們可以監看連入的請求內容。&lt;/li&gt;
&lt;li&gt;可加設 HTTP 帳密認證，避免被不必要的人亂連。&lt;/li&gt;
&lt;li&gt;除了支援 HTTP 外，也支援 WebSocket 和 SSH。&lt;/li&gt;
&lt;li&gt;可同時發布多個服務。&lt;/li&gt;
&lt;li&gt;還支援 API，可以用 API 操控 ngork。&lt;/li&gt;
&lt;li&gt;付費方案可以自定網址。&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="運作模式"&gt;運作模式&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;ngrok 就是一個 reverse proxy 的工具，透過把 local 的 port map 到一個 public 的地址，讓外部能夠透過這個 public 地址連到，然後工具用 reverse proxy 和 local 實際的 port 取得資料。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52384739964_99fa54041d_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;因此有個缺點，就是&lt;span class="focus"&gt;速度相對較慢&lt;/span&gt;，尤其是 &lt;code&gt;ngrok&lt;/code&gt; 的伺服器在美國因此也會減少一些速度。不過如果是爲了開發測試用，這個就不算缺點。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ngrok&lt;/code&gt; 免費版本提供了一個動態的地址，需要進階功能或者同時map多個服務就需要付費。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;其實 ngrok 並未真正的穿透 NAT，它只是接受 ngork cloud 機台轉發來的請求並做出回應，而那個 ngrok 的網址其實也就是連到 ngrok cloud 的網址。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="安裝與使用"&gt;安裝與使用&lt;/h2&gt;
&lt;h3 id="需先安裝-unzip-解壓縮用"&gt;需先安裝 &lt;code&gt;unzip&lt;/code&gt; (解壓縮用)&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;yum install zip unzip
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h3 id="步驟-1---到官網下載相對應系統的-ngrok-安裝包"&gt;步驟 1 - 到&lt;a class="link" href="https://ngrok.com/download" target="_blank" rel="noopener"
&gt;官網&lt;/a&gt;下載相對應系統的 &lt;code&gt;ngrok&lt;/code&gt; 安裝包&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;span class="lnt"&gt;2
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;### 以 linux 64 為例&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h3 id="步驟-2---解壓縮安裝包並搬移到-usrbin-中"&gt;步驟 2 - 解壓縮安裝包並搬移到 &lt;code&gt;/usr/bin/&lt;/code&gt; 中&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;unzip ngrok-stable-linux-amd64.zip
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;mv ngrok /usr/bin/.
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h3 id="步驟-3---到-ngrok-官網註冊一個免費帳號"&gt;步驟 3 - 到 &lt;code&gt;ngrok&lt;/code&gt; &lt;a class="link" href="https://dashboard.ngrok.com/user/signup" target="_blank" rel="noopener"
&gt;官網&lt;/a&gt;註冊一個免費帳號&lt;/h3&gt;
&lt;h3 id="步驟-4---將-dashboard-上顯示的-token-設定至本機"&gt;步驟 4 - 將 dashboard 上顯示的 token 設定至本機&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;ngrok authtoken XXXXXXXXXXXXXXXX
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h5 id="顯示此畫面代表已設定完成"&gt;顯示此畫面代表已設定完成。&lt;/h5&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52383495942_17e45479cd_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;h3 id="步驟-5---假設服務跑在本機的-port-3000則執行以下指令"&gt;步驟 5 - 假設服務跑在本機的 port 3000，則執行以下指令&lt;/h3&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;ngrok http &lt;span class="m"&gt;3000&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h5 id="顯示此畫面代表已成功跑起服務打開網址即可"&gt;顯示此畫面代表已成功跑起服務，打開網址即可。&lt;/h5&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52384429616_0d22e434e9_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;h5 id="直到-ngrok-關掉或-ngrok-session-過期之前這兩個-url-都可以被公開存取"&gt;直到 ngrok 關掉或 ngrok session 過期之前，這兩個 URL 都可以被公開存取。&lt;/h5&gt;
&lt;hr&gt;
&lt;h2 id="進階使用"&gt;進階使用&lt;/h2&gt;
&lt;h3 id="外連的-web-服務加密"&gt;外連的 web 服務加密&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;有時候給別人測試的鏈接不希望任意的人都能夠開啓，ngrok非常貼心的提供了這個服務。&lt;/li&gt;
&lt;li&gt;只需要在 mapping 的時候加上 &lt;code&gt;auth&lt;/code&gt; 這個參數就可以設定密碼保護。例如：&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;ngrok http --auth&lt;span class="o"&gt;=&lt;/span&gt;admin:12345 &lt;span class="m"&gt;3000&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;h5 id="意思是賬號要是admin而密碼是12345-map-到-3000-port"&gt;意思是，賬號要是admin，而密碼是12345 map 到 3000 port。&lt;/h5&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52384739909_886160c4ac_o.gif"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;h3 id="重寫-hostname"&gt;重寫 hostname&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;有些服務會使用到 &lt;code&gt;hostname&lt;/code&gt; 的值，這個時候重寫 &lt;code&gt;hostname&lt;/code&gt; 的功能就變得很重要。可以使用 &lt;code&gt;host-header&lt;/code&gt; 做設定。&lt;/li&gt;
&lt;/ul&gt;
&lt;h5 id="這邊的例子用的是在-iis-裏面設定只有-testcom-才會-binding-到-80-port使用的指令就是"&gt;這邊的例子用的是在 IIS 裏面設定只有 test.com 才會 binding 到 80 port，使用的指令就是：&lt;/h5&gt;
&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;
&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class="lntd"&gt;
&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;ngrok http --host-header&lt;span class="o"&gt;=&lt;/span&gt;test.com &lt;span class="m"&gt;80&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52384739894_fcf84e8513_o.gif"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;hr&gt;</description></item></channel></rss>