<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Cloudflare-Tunnel on Wayne's blog | 偉恩的部落格 | 技術博客</title><link>https://blog.wayne-project.com/tags/cloudflare-tunnel/</link><description>Recent content in Cloudflare-Tunnel on Wayne's blog | 偉恩的部落格 | 技術博客</description><generator>Hugo -- gohugo.io</generator><language>zh-tw</language><lastBuildDate>Thu, 02 Mar 2023 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.wayne-project.com/tags/cloudflare-tunnel/index.xml" rel="self" type="application/rss+xml"/><item><title>Cloudflare Tunnel 介紹</title><link>https://blog.wayne-project.com/2023-03-02/cloudflare-tunnel-introduction/</link><pubDate>Thu, 02 Mar 2023 00:00:00 +0000</pubDate><guid>https://blog.wayne-project.com/2023-03-02/cloudflare-tunnel-introduction/</guid><description>&lt;img src="https://live.staticflickr.com/65535/52720903430_307b8e0d62_o.png" alt="Featured image of post Cloudflare Tunnel 介紹" /&gt;&lt;style&gt;
.article-content p code {
background-color: #f5f5f5;
color: #ff3860;
}
.focus {
background: #f1e2e2;
color: #d62c2c;
padding: 0 5px;
}
.text-center {
text-align: center !important;
}
&lt;/style&gt;
&lt;p&gt;&lt;a class="link" href="https://www.cloudflare.com/zh-tw/products/tunnel/" target="_blank" rel="noopener"
&gt;參考網站&lt;/a&gt;&lt;br&gt;
&lt;a class="link" href="https://www.sakamoto.blog/cloudflare-tunnel/" target="_blank" rel="noopener"
&gt;參考網站&lt;/a&gt;&lt;br&gt;
&lt;a class="link" href="https://blog.cloudflare.com/argo-tunnels-that-live-forever/" target="_blank" rel="noopener"
&gt;參考網站&lt;/a&gt;&lt;br&gt;
&lt;a class="link" href="https://editor.leonh.space/2021/cloudflare-tunnel/" target="_blank" rel="noopener"
&gt;參考網站&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;以前曾經寫過一篇「&lt;a class="link" href="https://blog.wayne-project.com/2022-09-26/ngrok-basic/" &gt;透過 ngrok 產生臨時用的網址到指定機器&lt;/a&gt;」，這次要介紹的是類似的工具 &lt;a class="link" href="https://www.cloudflare.com/zh-tw/products/tunnel/" target="_blank" rel="noopener"
&gt;Cloudflare Tunnel&lt;/a&gt;，他們有著共同的功能：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;我們有個本機的服務跑在 http://localhost:5000，想讓外部訪問&lt;/li&gt;
&lt;li&gt;Cloudflare Tunnel 產生公共網址以及 Cloudflare 節點與本機間的「tunnel」&lt;/li&gt;
&lt;li&gt;訪客訪問網址，Cloudflare 節點把請求透過 tunnel 轉送到我們本機的服務，並且把服務的回覆也透過 tunnel 反向的回傳&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a class="link" href="https://www.cloudflare.com/zh-tw/products/tunnel/" target="_blank" rel="noopener"
&gt;Cloudflare Tunnel&lt;/a&gt;（也稱為 Argo Tunnel）除了名字太長這個問題外，有著這些優勢：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Cloudflare Tunnel 與 ngrok 一樣是免費增值型服務，上述基本的 Cloudflare Tunnel 功能完全免費，進階的 Argo 則是收費的&lt;/li&gt;
&lt;li&gt;Cloudflare Tunnel 可以搭配 Cloudflare 自家的 DNS 服務使用，也就是可以用自有的網址，而這在 ngrok 是要收費的&lt;/li&gt;
&lt;li&gt;Cloudflare Tunnel 的服務會自動就近分配節點位置，而 ngrok 需要手動指定&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="安裝-cloudflare-tunnel"&gt;安裝 Cloudflare Tunnel&lt;/h2&gt;
&lt;p&gt;使用 Cloudflare Tunnel 的前提當然是要有 Cloudflare 帳號，以及以 Cloudflare DNS 託管的網域，除這兩點外，我們得在主機上安裝 Cloudflare Tunnel 的代理程式 &lt;code&gt;cloudflared&lt;/code&gt;，安裝檔參見 &lt;a class="link" href="https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation" target="_blank" rel="noopener"
&gt;cloudflared 的下載頁&lt;/a&gt;。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="登入"&gt;登入&lt;/h2&gt;
&lt;p&gt;初次使用時，須執行一次登入，讓 &lt;code&gt;cloudflared&lt;/code&gt; 取得我們帳號的授權：&lt;/p&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-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;cloudflared tunnel login
&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;code&gt;cloudflared&lt;/code&gt; 操作的網域，授權成功後，會獲得一個代表我們帳號的憑證檔在 &lt;code&gt;~/.cloudflared/cert.pem&lt;/code&gt;，後續的操作 &lt;code&gt;cloudflared&lt;/code&gt; 會自動以此為證與 Cloudflare 服務互動。&lt;/p&gt;
&lt;p&gt;為了方便後續說明，在此我們假設授權的網域是 &lt;code&gt;cccc.ws&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;如果 &lt;code&gt;cccc.ws&lt;/code&gt; 上面已經有既有的 DNS 紀錄，並不會因為此動作而有被改掉的危機，不用擔心。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="建立-tunnel"&gt;建立 Tunnel&lt;/h2&gt;
&lt;p&gt;幫 tunnel 取個名字，這裡叫 local：&lt;/p&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-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;cloudflared tunnel create &lt;span class="nb"&gt;local&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;這只是在 Cloudflare 建一個空的 tunnel 紀錄在案，還沒有真正可以連線的 tunnel。&lt;/p&gt;
&lt;p&gt;要檢視自身旗下所有 tunnel，使用命令 &lt;code&gt;list&lt;/code&gt;：&lt;/p&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-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;cloudflared tunnel list
&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;/p&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;span class="lnt"&gt;3
&lt;/span&gt;&lt;span class="lnt"&gt;4
&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-console" data-lang="console"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; You can obtain more detailed information &lt;span class="k"&gt;for&lt;/span&gt; each tunnel with &lt;span class="sb"&gt;`&lt;/span&gt;cloudflared tunnel info &amp;lt;name/uuid&amp;gt;&lt;span class="sb"&gt;`&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; ID NAME CREATED CONNECTIONS
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; e6b1ea74-e6ad-4e36-b8b5-0f8f81ccafec &lt;span class="nb"&gt;local&lt;/span&gt; 2023-02-05T16:29:33Z
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; 9ea66384-6ec7-4b6c-9a05-e57c08a32526 soda 2022-05-26T01:46:42Z
&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;hr&gt;
&lt;h2 id="綁定-tunnel-與網址"&gt;綁定 Tunnel 與網址&lt;/h2&gt;
&lt;p&gt;目前 tunnel 還沒有網址，給它一個：&lt;/p&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-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;cloudflared tunnel route dns &lt;span class="nb"&gt;local&lt;/span&gt; local.cccc.ws
&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;那 Cloudflare 會阻止我們這麼做：&lt;/p&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-console" data-lang="console"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; Failed to add route: code: 1003, reason: An A, AAAA, or CNAME record with that host already exists.
&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;hr&gt;
&lt;h2 id="連接本地服務"&gt;連接本地服務&lt;/h2&gt;
&lt;p&gt;有了 tunnel、有了網址，只剩把服務連上 tunnel 了。&lt;/p&gt;
&lt;p&gt;假設我們的機台上有個服務跑在 &lt;code&gt;http://localhost:1111&lt;/code&gt;，想要利用 Cloudflare Tunnel 讓外部人士用 &lt;code&gt;https://local.cccc.ws&lt;/code&gt; 訪問，最簡單的一行指令如下：&lt;/p&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-bash" data-lang="bash"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;cloudflared tunnel run --url http://localhost:1111 &lt;span class="nb"&gt;local&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;/p&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;span class="lnt"&gt;3
&lt;/span&gt;&lt;span class="lnt"&gt;4
&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-console" data-lang="console"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; 2023-02-05T16:50:52Z INF Connection e4fe5a22-1e6e-4a05-b24c-95fc3ec62501 registered with protocol: quic &lt;span class="nv"&gt;connIndex&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="nv"&gt;ip&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;198.41.200.23 &lt;span class="nv"&gt;location&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;TPE
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; 2023-02-05T16:50:52Z INF Connection 57570b20-0c60-472b-bfac-eeebe45912ff registered with protocol: quic &lt;span class="nv"&gt;connIndex&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt; &lt;span class="nv"&gt;ip&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;198.41.192.227 &lt;span class="nv"&gt;location&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;HKG
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; 2023-02-05T16:50:52Z INF Connection 02f8e0ad-dfca-499b-af48-21a8bbfa1b47 registered with protocol: quic &lt;span class="nv"&gt;connIndex&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;2&lt;/span&gt; &lt;span class="nv"&gt;ip&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;198.41.200.43 &lt;span class="nv"&gt;location&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;TPE
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="gp"&gt;$&lt;/span&gt; 2023-02-05T16:50:52Z INF Connection 39c656ce-e08d-49a7-9cfb-1d05d92228fc registered with protocol: quic &lt;span class="nv"&gt;connIndex&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;3&lt;/span&gt; &lt;span class="nv"&gt;ip&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;198.41.192.27 &lt;span class="nv"&gt;location&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;NRT
&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;strong&gt;台北（TPE）&lt;/strong&gt;、&lt;strong&gt;東京（NRT）&lt;/strong&gt;、&lt;strong&gt;香港（HKG）&lt;/strong&gt;，如同最開始所說的，Cloudflare 會自動就近分配 tunnel 節點位置。&lt;/p&gt;
&lt;p&gt;跑起來後在 Cloudflare DNS 頁面的確有多了一筆 &lt;code&gt;local.cccc.ws&lt;/code&gt; 的紀錄。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="關閉-tunnel"&gt;關閉 Tunnel&lt;/h2&gt;
&lt;p&gt;對剛剛在跑著 &lt;code&gt;cloudflared&lt;/code&gt; 的 terminal（或 console，不論怎麼叫）按下 &lt;code&gt;CTRL+C&lt;/code&gt; 即可中斷 tunnel。&lt;/p&gt;
&lt;p&gt;此時若去看 Cloudflare DNS 會發現那筆 &lt;code&gt;local.cccc.ws&lt;/code&gt; 還是在，但是確實已經連不到了，此時需要手動砍掉這筆遺留的紀錄（或者射後不理也無妨）。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="其他花式玩法"&gt;其他花式玩法&lt;/h2&gt;
&lt;p&gt;前文所提的命令列用法較適合臨時性的應用，例如開發中的專案需要給手機測試、對外展示等，從 &lt;code&gt;cloudflared&lt;/code&gt; 的名字可以推測的出來，字尾的「d」是 &lt;strong&gt;daemon&lt;/strong&gt; 的意思，因此它也可以是服務，配合 tunnel 配置文件，讓開機完就把 tunnel 跑起來，除此之外，除了最典型的轉送給本地 HTTP 服務外，Cloudflare Tunnel 也可以轉送給本地 Unix socket 或者 IP，對 Cloudflare Tunnel 的其他花式玩法有興趣的朋友可參閱〈&lt;a class="link" href="https://blog.cloudflare.com/argo-tunnels-that-live-forever/" target="_blank" rel="noopener"
&gt;Argo Tunnels that live forever&lt;/a&gt;〉一文。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="clouflare-tunnel-的安全優勢"&gt;Clouflare Tunnel 的安全優勢&lt;/h2&gt;
&lt;p&gt;對於展示、測試開發中專案來說，搭建的 tunnel 往往是臨時性的，可能不用太在意安全性的部份，但 Cloudflare Tunnel 的野心不僅於此，他們希望可以將此技術應用在真實的服務上，帶給服務更多的安全保護，因為覺得滿好的所以也順帶寫一下。&lt;/p&gt;
&lt;p&gt;下面的示意圖是未使用 Cloudflare Tunnel 前的一個典型的 DNS A record 訪問模型：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52719965022_7233b2692f_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;p&gt;正常的訪客透過 example.com 訪問我們的服務，並且透過 Cloudflare 節點對我們後端的 1.2.3.4 做到基本的防護。&lt;/p&gt;
&lt;p&gt;但我們服務的 IP 1.2.3.4 仍然是暴露在公網的，所以有心人士有可能透過一些手段擷取到我們的真實 IP 1.2.3.4，進而展開攻擊。&lt;/p&gt;
&lt;p&gt;而在 Cloudflare Tunnel 的連線模型中，一切的傳輸只透過 tunnel，我們的服務始終都是封閉的，不曾暴露於公網，壞人大猩猩最多只能攻擊到 Cloudflare 節點，碰不到我們機台的真身，這可以為我們帶來額外的安全優勢：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52720750069_7ab47cd607_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;p&gt;另一方面，Cloudflare 有著全球廣佈的快取節點，訪客會查詢到離他所在位置較近的 Cloudflare 節點，藉此加快訪問速度，而 Cloudflare 節點與我們 tunnel 節點間的流量，則由 Cloudflare 自行導引，就像 Cloudflare 自我宣傳的那樣：&lt;/p&gt;
&lt;p&gt;&lt;img src="https://live.staticflickr.com/65535/52719964857_4ec5556f0e_o.png"
max-width="100%"
max-height="100%"
class="gallery-image"
loading="lazy"
&gt;&lt;/p&gt;
&lt;hr&gt;</description></item></channel></rss>