Cloudflare Tunnel を試す | Autumn-Color.com/ちょっとそこまで旅をします。

お久しぶりです。いかがお過ごしでしょうか。

私は、午後休をとって Mac Mini のセットアップをしています。

Mac Mini をネットワーク外から使用するにあたり、色々と調べた結果、Cloudflare Tunnel を使うことにしました。

本格的に運用する前に、まずはお試しで使ってみることにしました。

Cloudflare Tunnel とは

自宅や社内ネットワークなど、NAT/ファイアウォールの内側にあるサービスを、インターネットに安全かつ簡単に公開するための仕組みです。

ローカルにあるPCとCloudflareのサーバー間にトンネル（秘密の道） を作り、Cloudflareのサーバーを経由してインターネットからアクセスできるようにします。

Cloudflare Tunnel のいいところ

サーバーを公開するための様々な設定（ポート開放、ファイアウォール設定など）が不要
Cloudflareのセキュリティ機能を利用できる
- DDoS対策やWAFなど
- SSL/TLSの設定が不要（Cloudflareが自動で証明書を発行）
セットアップがとても簡単
- Dockerを使えば、数分でトンネルを作成できる
無料で使える
- 無料プランでも十分な機能が提供されている

Cloudflare Tunnel のよくないところ

重箱の隅をつつくようですが、Cloudflare Tunnel のよくないところも書いておきます。 Cloudflare のサービスなので、Cloudflareに生殺与奪の権を握られることが最大のデメリットでしょうか。

Cloudflare のアカウントが必須
Cloudflare のサーバーがダウンすると、トンネルが使えなくなる
Cloudflare のサービスに依存するため、将来的に仕様が変更される可能性がある
トンネルの設定が必要で、初期設定が少し面倒
- とはいえ、Cloudflareなしで自力で構築するよりは簡単です。

試してみた

手軽に構築できる構成で試してみます。

作成するもの

Docker で Web サーバーを立てて、Cloudflare Tunnel を使ってインターネットからアクセスできるようにします。

最終的な構成は以下のようになります。

前提

Cloudflare アカウントを持っていること
Cloudflare にドメインを登録していること
ローカルPCに Docker がインストールされていること

まずは Web サーバーを立てる

フォルダ構成は以下のようにします。

.
├── docker-compose.yml
└── src
    └── index.html

index.html は簡単な内容にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

docker-compose.yml は以下のようにしています。

httpd:latest イメージを使い、ポート 8001 で Web サーバーを立てます。

services:
  httpd:
    image: httpd:latest
    ports:
      - "8001:80"
    volumes:
      - ./src:/usr/local/apache2/htdocs/

起動してみます。

docker-compose up

ブラウザで http://localhost:8001 にアクセスすると、hello world が表示されます。

これで、Web サーバーが立ち上がりました。

Cloudflare Tunnel の設定

Cloudflare のサイトにアクセスし、トンネルを作成します。

ホームにある Zero Trust をクリックします。

フリープランを選択し、0円で使います。

ネットワーク > Tunnel を選択します。

トンネルの種類は Cloudflared を選択します。

トンネルに名前をつけます。

ここでは仮に hello_tunnel とします。

次へ ボタンを押すと、トンネルの作成方法が表示されます。

Docker を使うので、Docker を選択します。

Docker の設定が表示されるのでコピーします。

一旦 Cloudflare の画面での作業はここまでです。

docker-compose.yml に戻ります。

Cloudflare の Docker イメージを使う

docker-compose.yml に Cloudflare の Docker イメージを追加します。

services:
  httpd:
    image: httpd:latest
    ports:
      - "8001:80" # ローカルホストから接続しない場合はこの設定は削除してもよい
    volumes:
      - ./src:/usr/local/apache2/htdocs/

  cloudflared: # これを追加
    image: cloudflare/cloudflared:latest
    command: tunnel run
    environment:
      - TUNNEL_TOKEN=<YOUR_TUNNEL_TOKEN> # ここに Cloudflare で作成したトンネルのトークンを入れる
    restart: always
    depends_on:
      - httpd

YOUR_TUNNEL_TOKEN には、先ほど Cloudflare の画面でコピーしたコマンドに含まれるトークンを入れます。

docker run cloudflare/cloudflared:latest tunnel --no-autoupdate run --token <この部分がトンネルのトークン>

再度、docker-compose を起動します。

docker-compose up

トンネルを開通させる

docker-compose を起動した状態で、Cloudflare の画面に戻ります。

Connectors に接続されているコネクタが表示されます。

次へ ボタンを押します。

ホスト名やサービスなどを設定します。

私はすでに持っているドメイン（ autumn-color.com ）に hello というサブドメインを設定しました。

ここが注意点ですが、「サービス」の項目には、先ほど立てた Web サーバーのコンテナ名とポート番号を指定します。

これは、Cloudflare のコンテナ（ cloudflared ）から見た、Webサーバーコンテナ（ httpd ）への接続になります。

なかなか接続できずに悩みました。
c.f. https://qiita.com/github0013@github/items/6686cc39a297b521d58e

最後に、セットアップボタンを押せば完了です。

確認してみる

ブラウザで https://hello.autumn-color.com にアクセスしてみます。

無事、接続できました！

まとめ

Cloudflare Tunnel を試してみました。

とても簡単にトンネルを作成でき、セキュリティも強化されるので、非常に便利です。

今後、Mac Mini に外部からアクセスするために、Cloudflare Tunnel を使っていこうと思います。

是非SNSで感想を教えて下さい 👇️

POST