Cloudflare Tunnelを使う

# 使うと何が嬉しいか


Cloudflare Tunnelを使うと、ファイアウォールの内側にあるサーバーをポートを開けることなくインターネットに公開することができます。また、CloudflareのWAFやCDNやSSLが簡単に使えるようになったりゼロトラスト的にトラフィック監視したり、というのも可能になります


また、大抵のご家庭にあるような気がする自宅サーバーを公開しようとした場合にも、サーバーにインストールしたCloudflareクライアントがCloudflaredネットワーク経由で公開してくれるので、わざわざ自宅回線をグローバルIPで契約しなくても良くなります


# 仕組み


サーバーに常駐したCloudflaredクライアントがCloudflareのネットワークとの接続を維持した状態にしておいて、インターネットからアクセスしてくるユーザーからのhttpリクエストをCloudflareネットワークに仲介してもらう、という仕組みです
![180c49e5984f-20231129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7addeb0b-4626-f479-56c0-1bc907ce8358.png)


内側から外側への接続を通しているだけなのでファイアウォール設定でポートを開ける必要はなく、サーバーのIPがころころ変わってもCloudflareクライアントがCloudflareネットワークを見つけられれば良いので関係なく、必ずCloudflareネットワークを通るのでトラフィック監視やWAF、CDNが簡単に使えます


# 使い方


ここにドキュメントがあります
https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/


Tunnelを使うときに実際やる手順は以下の2つだけです


1. Tunnelをつくる (Tokenを発行する、URLと紐づける)
2. サーバーにCloudflaredをインストールしてTunnelと接続する


Cloudflaredクライアントはネットワークが繋がってる環境で動かしてやれば勝手にCloudflareネットワークを見つけて動いてくれます。そこから先は公式サイトのダッシュボードから設定するだけで公開できますので簡単です


## 1. Cloudflare Tunnelの準備


### 1-1. Cloudflareアカウントをつくる


まだ作ってない人は以下からアカウントを作りましょう
https://one.dash.cloudflare.com/


2025年1月現在、無料、Standard、Enterpriseの3プランか、プラン選択できるアラカルトのいずれかで契約することができます。無料プランでもアクティブユーザー数50人まで利用できて、基本的な機能は使えますのでまずはこちらで良いと思います


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/4f08cd78-a1b3-1a18-2148-e37745b13a30.png" width=50%>


### 1-2. DNSにサイトを登録する


DNSをCloudflareにしておけば設定が簡単になるので、今回はこちらでやってみます
https://dash.cloudflare.com/26802817ab1ba28e006f8b744823326d


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/bbef090c-7014-7fe4-aea5-d1a2a3c98bd9.png" width=50%>


ドメインを取得した際に別のDNSを設定されていると思いますので、そちらにもCloudflareのDNS URLを設定しにいく必要があります。どのURLを設定すれば良いかは画面上に表示されますのでそちらを貼ってやればOKです


### 1-3. Tunnelを作成する


設定したサイトで使うTunnelを設定していきます
以下からTunnelを作成するを選択します
https://one.dash.cloudflare.com/26802817ab1ba28e006f8b744823326d/networks/tunnels


CloudflaredかWARPを選ぶように表示されます
今回はCloudflaredを選択します


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/09952cf1-3592-cf5d-c175-2db6b7565942.png" width=50%>


適当な名称をつけてやります


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/3f3c0789-9304-7f17-c871-3c5a8f1158fa.png" width=50%>


最後に環境を選んでやるとトークンを発行してインストール手順も表示してくれます


以下はDebianの場合


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/7320f733-0a22-d9bd-14e7-9c8c863c3abe.png" width=50%>


dockerでも出来ます


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/2a3a099e-5d60-543d-9ae7-966027dbde33.png" width=50%>


下の方にあるConnectors欄には実際に接続されているTunnelが表示されますので、画面を開いたままサーバー側の準備を完了すれば、ここで確認することができます


## 2. サーバー側の準備


### 2-1. Ubuntuの場合


httpサーバーがあるサーバーにcloudflaredをインストールして、URLを指定して起動してやればTunnelを動作させることが出来ます。インストール手順は先ほどのページに表示されているものそのままです


```terminal:インストール
sudo apt-get update
sudo apt-get install -y curl
sudo apt-get install apache2 -y
sudo apt-get clean

sudo service apache2 start

curl -L --output cloudflared.deb https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared.deb
sudo cloudflared service install ここにtokenを書く
```


あとは以下コマンドで実行してやればOKです


--no-autoupdateは自動更新を無効にするオプション、--urlで公開するhttpサーバーのURLを指定、--tokenが先ほど格好されたtokenを指定します


```terminal:Tunnel起動
cloudflared tunnel --no-autoupdate run --url http://localhost --token ここにtokenを書く
```


### 2-2. dockerの場合


dockerで開発している場合はcloudflaredコンテナを追加してdocker-compose.ymlで紐づけ設定を書いてやるのが良いと思います


以下ではhttpdコンテナとcloudflaredコンテナを立てて動作させてみます


```yaml:docker-compose.yml
version: '3.8'

services:
  http_server:
    image: httpd:latest
    container_name: cloudflared-http-server-container
    ports:
      - "8080:80" # ローカル環境で確認する場合に使用

  cloudflared:
    image: cloudflare/cloudflared:latest
    container_name: cloudflared-container
    depends_on:
      - http_server
    command: 
      tunnel --no-autoupdate run --url http://http_server --token ここにtokenを書く
```


## 3. Tunnelの設定


### 3-1. 接続を確認する


上記で設定したCloudflaredが接続できていると1-3で設定中だった画面に接続された旨が表示されます。上手くいっているようなら次に進んでルーティングを設定します


パブリックホスト名タグを選択した状態で、インターネットから見た公開したいURL (サブドメイン、ドメイン、パス) とCloudflaredクライアントから見たサーバーのURL (公開したいサービス) を入力します。DNSをCloudflareにしておくと、ここの内容をDNSレコードに反映してくれてめちゃめちゃ楽です


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/ba33cf02-4b05-955a-c807-99a47c34cb82.png" width=50%>


Tunnelのページを見ると、上手く接続できていればHEALTHY、接続できていればINACTIVEが表示されます。ここでのHEALTHY/INACTIVEは、TunnelがCloudflareネットワークに接続できているか否かを示しているだけなので、Cloudflaredがサーバーを見つけられているか否かは反映していません


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/4354e53d-fac0-9463-5839-ebd8800e435e.png" width=50%>


### 3-2. 表示の確認


最後に正常に動作できているか確認します


設定したURL (上記の場合はhttps:/<foo>/www</foo>.hoge.com) を開いて以下のようにhttpサーバーからの情報が表示されればOKです


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/b7497fe9-76c2-c237-e38c-44df721dc1b3.png" width=50%>



上手くいっていない場合は、cloudflaredの入っているサーバーからcurlしてみるなどして動作を確認しましょう


## まとめ


Tunnel自体もすごいんですが、これで公開するだけでSSLを付けてhttpsで公開してくれたり、CDNキャッシュやWAF、DDoS防御などがデフォルトで有効になるというのもすごいと思います。業務でも使いたくなりますね


レッツトライ