<p data-line="1" class="code-line">Cloudflare Tunnelを使ってローカルサーバーを公開する際、毎回URLが変わるのが不便だったので固定URLを設定しました。備忘録として残します。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="4" class="code-line">この方法にはCloudflareに登録済みの独自ドメインが必要です。独自ドメインを持っていない場合は、毎回発行されるランダムURLを使う方法になります。</p>
</div></aside>
<h2 id="cloudflare-tunnel%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AE%E5%95%8F%E9%A1%8C" data-line="7" class="code-line"><a class="header-anchor-link" href="#cloudflare-tunnel%E5%88%A9%E7%94%A8%E6%99%82%E3%81%AE%E5%95%8F%E9%A1%8C" aria-hidden="true"></a> Cloudflare Tunnel利用時の問題</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="9">cloudflared tunnel run <span class="token parameter variable">--url</span> http://localhost:3000
</code></pre></div><p data-line="12" class="code-line">上記コマンドでCloudflare Tunnelを起動すると、毎回異なるランダムなサブドメインが割り当てられます<sup class="footnote-ref"><a href="#fn-7814-1" id="fnref-7814-1">[1]</a></sup>。</p>
<p data-line="14" class="code-line">また、URLを知っていれば誰でもアクセスできてしまうため、サクッと使う以外ではセキュリティ上の問題もあります。</p>
<h2 id="%E8%A7%A3%E6%B1%BA%E7%AD%96" data-line="16" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E7%AD%96" aria-hidden="true"></a> 解決策</h2>
<p data-line="18" class="code-line">CLIでトンネルを設定することで、独自ドメインのサブドメインで固定URLアクセスが可能になります。無料プランで利用できます。</p>
<h2 id="%E5%9B%BA%E5%AE%9Aurl%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="20" class="code-line"><a class="header-anchor-link" href="#%E5%9B%BA%E5%AE%9Aurl%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 固定URLの設定</h2>
<h3 id="cloudflared%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="22" class="code-line"><a class="header-anchor-link" href="#cloudflared%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> cloudflaredのインストール</h3>
<p data-line="24" class="code-line">cloudflaredをインストールします（Macの場合）。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="26">brew <span class="token function">install</span> cloudflare/cloudflare/cloudflared
</code></pre></div><h3 id="%E8%AA%8D%E8%A8%BC" data-line="30" class="code-line"><a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC" aria-hidden="true"></a> 認証</h3>
<p data-line="32" class="code-line">Cloudflareに認証します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="34">cloudflared tunnel login
</code></pre></div><p data-line="38" class="code-line">ブラウザが開き、Cloudflareに登録されているドメイン（ゾーン）の一覧が表示されます。</p>
<p data-line="40" class="code-line"><img src="https://i.gyazo.com/289e38d9e419bfe88b7129ec603ae5b9.png" alt="Image from Gyazo" /></p>
<p data-line="42" class="code-line">トンネルを設定したいドメインを選択します。</p>
<p data-line="44" class="code-line"><img src="https://i.gyazo.com/c9b1ae4dc76ddbbb77d297e2b5a9efd7.png" alt="Image from Gyazo" /></p>
<p data-line="46" class="code-line">認証が完了すると、<code>~/.cloudflared/cert.pem</code> に証明書が保存されます。</p>
<h3 id="%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" data-line="48" class="code-line"><a class="header-anchor-link" href="#%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> トンネルの作成</h3>
<p data-line="50" class="code-line">トンネルを作成します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="52">cloudflared tunnel create claude-code-ui
</code></pre></div><p data-line="56" class="code-line">トンネルIDが表示されるので、メモしておきます。</p>
<h3 id="%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" data-line="58" class="code-line"><a class="header-anchor-link" href="#%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 設定ファイルの作成</h3>
<p data-line="60" class="code-line"><code>~/.cloudflared/config.yml</code> を作成します。</p>
<div class="code-block-container"><pre class="language-yaml"><code class="language-yaml code-line" data-line="62"><span class="token key atrule">tunnel</span><span class="token punctuation">:</span> &lt;トンネルID<span class="token punctuation">&gt;</span>
<span class="token key atrule">credentials-file</span><span class="token punctuation">:</span> /Users/&lt;ユーザー名<span class="token punctuation">&gt;</span>/.cloudflared/&lt;トンネルID<span class="token punctuation">&gt;</span>.json

<span class="token key atrule">ingress</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> <span class="token key atrule">hostname</span><span class="token punctuation">:</span> claude<span class="token punctuation">-</span>ui.yourdomain.com
    <span class="token key atrule">service</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//localhost<span class="token punctuation">:</span><span class="token number">3001</span>
  <span class="token punctuation">-</span> <span class="token key atrule">service</span><span class="token punctuation">:</span> http_status<span class="token punctuation">:</span><span class="token number">404</span>
</code></pre></div><ul data-line="72" class="code-line">
<li data-line="72" class="code-line"><code>&lt;トンネルID&gt;</code>: 先ほど作成したトンネルのID</li>
<li data-line="73" class="code-line"><code>&lt;ユーザー名&gt;</code>: 自分のユーザー名</li>
<li data-line="74" class="code-line"><code>claude-ui.yourdomain.com</code>: 使いたいサブドメインとドメイン</li>
</ul>
<h3 id="dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%BF%BD%E5%8A%A0" data-line="76" class="code-line"><a class="header-anchor-link" href="#dns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> DNSレコードの追加</h3>
<p data-line="78" class="code-line">トンネルをドメインに紐付けます。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="80">cloudflared tunnel route dns claude-code-ui claude-ui.yourdomain.com
</code></pre></div><p data-line="84" class="code-line">これでDNSレコードが自動的に追加されます。</p>
<h3 id="%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E8%B5%B7%E5%8B%95" data-line="86" class="code-line"><a class="header-anchor-link" href="#%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> トンネルの起動</h3>
<p data-line="88" class="code-line">トンネルを起動します。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="90">cloudflared tunnel run claude-code-ui
</code></pre></div><p data-line="94" class="code-line"><code>https://claude-ui.yourdomain.com</code> にアクセスすると、ローカルのClaude Code UIが表示されます。</p>
<h3 id="%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A8%E3%81%97%E3%81%A6%E7%99%BB%E9%8C%B2%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89" data-line="96" class="code-line"><a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%A8%E3%81%97%E3%81%A6%E7%99%BB%E9%8C%B2%EF%BC%88%E4%BB%BB%E6%84%8F%EF%BC%89" aria-hidden="true"></a> サービスとして登録（任意）</h3>
<p data-line="98" class="code-line">PC起動時に自動で起動したい場合は、サービスとして登録できます。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="100">cloudflared <span class="token function">service</span> <span class="token function">install</span>
</code></pre></div><div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="104"><span class="token function">sudo</span> launchctl start com.cloudflare.cloudflared
</code></pre></div><p data-line="108" class="code-line">これでPC起動時に自動でトンネルが接続されます。</p>
<h2 id="%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" data-line="110" class="code-line"><a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E4%B8%8A%E3%81%AE%E7%95%99%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 使用上の留意点</h2>
<p data-line="112" class="code-line">この設定を使う際は、以下の点に注意してください。</p>
<ul data-line="114" class="code-line">
<li data-line="114" class="code-line"><strong>独自ドメインが必要</strong>：Cloudflareに登録済みのドメインが必要です</li>
<li data-line="115" class="code-line"><strong>サービス化</strong>：<code>cloudflared service install</code> で登録すると、PC起動時に自動接続されます</li>
</ul>
<h2 id="%E8%AA%8D%E8%A8%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" data-line="117" class="code-line"><a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> 認証を追加する</h2>
<p data-line="119" class="code-line">固定URLだけでは、URLを知っていれば誰でもアクセスできてしまいます。Cloudflare Accessを使って認証を追加する方法は、下記の記事を参照してください。</p>
<p data-line="121" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/cloudflare-tunnel-gmail-auth" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-7814-1" class="footnote-item"><p data-line="124" class="code-line"><a href="https://blog.ynr.jp/article/network/cloudflare-tunnel/" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Tunnelを使って自宅サーバーをポート開放せずに公開する</a> <a href="#fnref-7814-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Cloudflare Tunnelで固定URL(独自ドメイン)を設定する