🚇

Cloudflare Tunnelを使ってみた

2023/03/30に公開

3/17(金)に開催された Cloudflare Meetup Fukuoka Kick Off! に参加しました。その際、「Cloudflare Tunnelを使ってみた」という題でLTもさせていただいたのでその件についてまとめます。

cloudflare meetup fukuoka kick off!とは

元AWS エバンジェリストの亀田さんがCloudflareのエバンジェリストに就任されたとの発表を受けて、各地でCloudflare Meetupがどんどん開催されています。福岡でもFusicの清家さんがCloudflare Meetup Fukuoka kickoff!と題してイベントを企画されたので、早速参加してきました。

ちょうど業務でCloudflare Tunnelが話題になっていたので、実際に試してみてそれをLTで話してみようと思ってLT枠で申し込みました。

Cloudflare Tunnelとは

CDNを使ってサーバを外部に公開する場合、オリジンサーバへのアクセスをCDN経由のもののみに制限(ロックダウン)したいという要望はよくあります。例えばAzureであれば、FrontDoorからオリジンへのアクセスにPrivate Linkを用いたり、オリジンサーバがWebAppであればX-Azure-FDIDヘッダで制限することができます。AWSであればCloudFrontのマネージドプレフィックスリストを利用してセキュリティグループで制限できます。

このように同じクラウドサービス内であれば制限する方法は存在しますが、クラウドサービスをまたいでオリジンサーバを公開する場合はなかなか難しくなります。なぜならCDNのエッジは世界中に多数存在し、頻繁に増減したりIPアドレスが変わったりすることも多いため、単純にIPアドレスで制限するというのが難しいからです。
AWSでも以前はマネージドプレフィックスがなかったので、公開されているCloudFrontのIPアドレスを定期的にチェックしてそれをセキュリティグループに登録するという方法もありましたが、同様の事を実施するのはかなり面倒です。

Cloudflare Tunnelは、このオリジンサーバのロックダウンを実現するためのサービスです。Cloudflareに対してトンネルを作成する「cloudflared」というソフトをオリジンサーバにインストールし、Cloudflareのエッジサーバからオリジンサーバへの通信はこのトンネルを経由するように設定できます。オリジンサーバはこのトンネルからの通信のみを受け付けるようにすればいいのですが、極端な話、オリジンサーバをプライベートネットワーク内に置いた状態で良いことになります。

やってみた

Websiteの追加

では、早速やってみましょう。まずはCloudflareのアカウントを作成します。
そして、CloudflareのコンソールからWebsiteを追加します。プランはフリーでOKです。

Websiteの追加

既存のドメインの場合は以下のように権威サーバをCloudflareに移すように言われますが、新規ドメインをCloudflareで取得すると一気に設定できるので、今回は新規に.winドメインを取得しました(まぁ年間400円くらいなので検証用にもっておいてもいいかなと)。

権威サーバを移すように指示される

トンネルの作成

Websiteの追加が終わったらメニューの「Zero Trust」に進みます。ここでもプランはフリーでOKです。

Zero Trust

チーム名の入力や支払い方法の登録、プランの選択が終わったらメニューから「Access > Tunnel」に進み、「Create a tunnel」を選びます。

Create a tunnel

トンネル名を入れたら、オリジンサーバの環境に合わせてcloudflaredをダウンロードします。インストールが完了したら、画面に表示されたコマンドを管理者権限で実行します。

ダウンロード

トンネルでアクセスする際のホスト名を設定します。Domain先ほどWebsiteで登録したドメインが選択できますのでそれを選択します。Subdomeinには、適当なホスト名を入力します。
以下の画像のように、「No DNS record found for this domain. The policy may not execute as expected.」という警告が出ますが、気にせず進みます。

ホスト名の設定

オリジンサーバのサービスを設定します。.NET Coreで作成したWebアプリをローカルで動かしてそれを公開してみようと思いますので、TypeはHTTP、URLはlocalhost:5097とします。

サービスの設定

設定が終わったら、早速ブラウザからhttp://<Subdomain>.<Domain>にアクセスしてみます。以下のように、ローカルで動かしているアプリケーションに接続できれば成功です。

ローカル実行している.Net CoreのWebアプリの接続できた

ドメイン設定の謎

さて、先ほど警告の出たSubdomain(ホスト名)、恐らく裏側で自動的に何かしらの設定がされたのだと思うのですが(そうでなければその名前で繋がりませんよね)、実際どうなってるのでしょう?
CloudflareのコンソールからDNSの設定を確認してみると、以下のようになっていました。

DNSの設定

先ほど作成したSubdomainに対応するCNAMEレコードが作成されています。ターゲットはトンネルID.cfargotunnel.comとなっています。そして、その横には「Proxy Status」という見慣れない設定が。

気になったので設定したホスト名をdigってみると、なんとAレコードが返ってきてる。設定はCNAMEなのに。

digの結果

これはどういうことなんだろう?と当日LTでそのまま話したところ、亀田さんと、参加されていたクラスメソッドの大栗さんに教えていただけました。亀田さんはイベント後にブログにもまとめていただけました。お二人ともありがとうございます!
お二人のブログは以下ですので、気になった方は是非ご確認ください。

sshのトンネルを作ってみる

Cloudflare TunnelはHTTP以外のプロトコルもサポートしているので、次はsshのトンネルを作ってみます。
cloudflaredを動かしているWindowsの、WSL環境でsshdを起動してそれに接続するようにします。先ほどのトンネルの設定で「Service」の所を「SSH」にします。

Serviceでsshを設定

sshのクライアント側にもcloudflaredをインストールしておき、~/.ssh/configファイルに以下の設定を追加します。

Host <Subdomain>.<Domain>
    ProxyCommand /path/to/cloudflared access ssh --hostname %h

これで、ssh <Subdomain>.<Domain>でssh接続できるようになります。早速やってみましょう。

sshで接続できた

無事接続できました!表示されたIPアドレスがWSLのローカルのものになっているのが分かります。

まとめ

今回は、Cloudflare Tunnelを使って、ローカルのWebアプリケーションやsshを公開する方法を紹介しました。
ドメインの権威サーバをCloudflareに預けないといけないというのはありますが、以下の点は大変魅力的です。

  • 無料で使える
  • オリジンサーバには固定のIPアドレスはおろか、グローバルIPアドレスも不要
  • エッジサーバから先がcloudflareのネットワーク内での通信なので、より高速にアクセスできる

オリジンサーバの保護だけでなく、メンテナンス用の経路としての利用もできそうです。今後、一つの選択肢として検討していきたいと思います。

以上、皆さんのお役に立てば幸いです。

LT資料

本内容で登壇した、LTの資料はこちらになります。

https://speakerdeck.com/kenichirokimura/trytousecloudflaretunnel-20230317

GitHubで編集を提案

Discussion