目次

はじめに
Cloudflareで何ができる？
Cloudflare Tunnelとは？
Cloudflare Tunnelの通信確立方法
前提環境
1. 自宅Webサーバー側の設定
2. Cloudflare側の設定
3. ドメインプロバイダー側の設定
【＋α】追加した設定
まとめ

はじめに

先日、自身のポートフォリオサイトを作成しました！

このサイトは、クライアントからのアクセス時にCloudflareを経由させることで、
ポートを開放することなくセキュアにWebサーバーを公開できています。
このCloudflareが非常に便利なサービスでした……！

本記事では、Cloudflareでできること、自宅Webサーバーの公開までの手順をご紹介します。

Cloudflareで何ができる？

Webサーバーへのアクセス時にCloudflareを経由することで、Webサイトやアプリケーションをインターネット上で安全に公開することができます。
特に、下記のような機能を無料で使用可能です。

共有SSL証明書の利用（Webサーバー側の設定なしでHTTPS通信が可能）
自宅ルーターのポートを開放せず、自宅のWebサーバーを外部公開
自宅Webサーバーまで名前解決するためのDNS設定
豊富なセキュリティ機能

これらすべて無料プランで使えるんですね……
個人開発者にとっては大変ありがたい存在です。

ただCloudflareの機能を使用するには、Cloudflare Tunnelという通信経路の確立が必要です。

Cloudflare Tunnelとは？

Cloudflare Tunnelは、WebサーバーとCloudflareのエッジネットワーク間にトンネルを確立する仕組みです。

最大の特徴は、グローバル設定（ルーターのポート開放やパブリックIPでの待受）は行わず、自宅のWebサーバーを外部公開することが可能な点です。

ユーザーからのアクセスは以下の流れでWebサーバーに到達します。

ユーザー が自ドメインへアクセス（Cloudflareのエッジサーバーにアクセス）
Cloudflare が登録されたトンネルを通じてリクエストを転送
自宅サーバー 内の cloudflared がリクエストを受け取り、ローカルのWebサーバー（localhost:80）へ渡す

自宅サーバー側で許可する通信は、cloudflaredからの「内→外」の通信のみ。
外部からのアクセスは全てCloudflareを経由するため、自宅のグローバルIPを隠蔽できるというワケです。

Cloudflare Tunnelの仕組みは、cloudflaredからCloudflareのエッジサーバーへのOutbound通信を常時繋げっぱなしにしておくイメージです。
Webサーバーへのアクセスがあると、Cloudflareはこの確立済みの接続（トンネル）内を通じてリクエストデータを自宅サーバーへ送り込みます。

参考：

Cloudflare Tunnelの通信確立方法

Cloudflared Tunnelの確立には、主に以下の3種類の方法（管理形態）があります。

方法	管理場所	特徴
Quick Tunnels	不要	DNS設定不要でコマンド1つでランダムサブドメインを発行。URL固定不可
Remotely-managed Tunnels	Webダッシュボード	Webコンソール上で設定を行う
Locally-managed Tunnels	設定ファイル (CLI)	`config.yml` で詳細設定を管理

本記事では、構成管理のしやすさから「Locally-managed Tunnels」を採用して進めます。

前提環境

今回の構築を行うにあたっての前提環境条件は下記となります。

自宅Webサーバーに SSH 接続できる環境
Nginx が /var/www/html をポート番号80番で配信している
ドメインを取得済みであること

example.com / www.example.com から自宅Webサーバー (Port 80) までの通信経路を確立し、自宅Webサーバーの公開を目指しましょう！

1. 自宅Webサーバー側の設定

1.1. cloudflaredのインストール

公式のリポジトリから、Webサーバーに cloudflared デーモンをインストールします。

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-arm64.deb
sudo apt install ./cloudflared-linux-arm64.deb

アーキテクチャは環境に合わせて変更してください！下記公式サイトから確認できます。
Cloudflare One - Downloads

1.2. トンネルの作成と認証

# Cloudflareへのログイン
cloudflared tunnel login

コマンドを実行すると認証用URLが表示されます。
この時WebサーバーにSSH接続している場合は、このURLをコピーして手元のPCのブラウザで開いて認証してください。

# トンネルの作成（名前は任意、ここでは `example-tunnel` とします）
cloudflared tunnel create example-tunnel

作成が成功すると、Tunnel ID が発行されます。
このIDは後で使用するので、コピーしておいてください。

1.3. 設定ファイル (config.yml) の作成

トンネルの通信ルールを記述します。

sudo mkdir -p /etc/cloudflared
sudo vi /etc/cloudflared/config.yml

config.yml の内容例:

# "example.com"と"www.example.com"への通信経路設定
tunnel: <TUNNEL_ID>
credentials-file: /home/<ユーザー名>/.cloudflared/<TUNNEL_ID>.json

ingress:
  - hostname: example.com
    service: http://localhost:80

  - hostname: www.example.com
    service: http://localhost:80

  - service: http_status:404

<TUNNEL_ID> は手順2で発行されたIDに置き換えてください。

1.4. DNSレコードの登録 (CNAME)

作成したトンネルとドメイン名を紐付けます。

cloudflared tunnel route dns example-tunnel example.com
cloudflared tunnel route dns example-tunnel www.example.com

1.5. トンネルの実行と常駐化

トンネル自体の設定はここまでのため、一旦動作確認を行います。

cloudflared tunnel run example-tunnel

エラーが出なければ、Cloudflare Tunnelは正常に動いています！
Ctrl+C で停止し、systemdによる自動起動（常駐化）を設定します。

sudo cloudflared service install
sudo systemctl enable cloudflared
sudo systemctl start cloudflared
sudo systemctl status cloudflared

ここでステータスが active (running) になっていれば、Webサーバー側の操作は終了です。

2. Cloudflare側の設定

2.1. Cloudflareアカウントの作成

Cloudflareアカウントを取得してログインしてください。特に難しいことは要求されないはずです。

2.2. ドメインの設定

初回ログインの場合は、ドメインを指定する画面が表示されます。
自ドメインを入力してください。

2回目以降のログインの場合やドメイン登録をスキップした場合は、下記画像の部分から登録が可能だと思われます。
（こちらは動作未確認となります）

2.3. DNS設定

Cloudflareコンソールの「DNS」→「Records」から、以下の項目を記入し保存します。

- Type: CNAME
- Name: example.com
- Value: <コピーしたTunnel ID>.cfargotunnel.com

www.example.comのDNS設定も行いましょう。

- Type: CNAME
- Name: www
- Value: <コピーしたTunnel ID>.cfargotunnel.com

以上でCloudflare側の設定は完了です！

3. ドメインプロバイダー側の設定

最後に、ドメインを取得したプロバイダーでのDNS設定を変更する必要があります。

ドメイン取得後、基本的にデフォルトではドメインを取得したプロバイダーのDNSサーバーを使用しているため、使用するDNSサーバーをCloudflareのDNSサーバーに変更する必要があります。

3.1. ドメインプロバイダーのサービス管理画面にログイン

ドメインを取得したプロバイダーのサービス管理画面にログインしてください。

3.2. DNS設定

サービス管理画面にて、DNSサーバーを下記Cloudflareの固定のものへ変更します。

dara.ns.cloudflare.com
randall.ns.cloudflare.com

参考までに、筆者環境でXServerでの設定は下記となります。

これで、ドメインの運用はCloudflareのDNSサーバーを経由するようになります。

以上で、Cloudflare Tunnelの設定は完了です！ブラウザにて下記URLへアクセスし、接続テストをしてみましょう！

https://<自ドメイン>.com

自宅WebサーバーのNginxにて配信しているWebコンテンツにアクセスできたら成功です。
お疲れ様でした！

【＋α】追加した設定

自宅Webサーバーの利便性・安全性向上のため、Cloudflareダッシュボード側で以下の設定を行いました。
必須ではありませんが、Webサイトをより安全に運用するのに役立つと思います。

追加した設定

1. SSL/TLS設定

「自ドメイン」>「SSL/TLS」>「Edge Certificates」で下記を設定します。

Always Use HTTPS: ON
- WebサイトへのHTTPアクセスを自動的にHTTPSにリダイレクトします。

2. wwwなし/ありの統一 (Redirect Rules)

SEOやアクセスの統一のため、www.<自ドメイン>.com へのアクセスを <自ドメイン>.com へリダイレクト（あるいはその逆）する設定です。

「自ドメイン」>「Rules」>「Overview」>「Create rules」>「Redirect rules」で下記を設定します。

If incoming requests match: Wildcard pattern
Request URL: https://www.<自ドメイン>.com/*
Then:
- Target URL: https://<自ドメイン>.com/*
- Status code: 301
Place at: First

3. セキュリティ設定

「自ドメイン」>「Security」>「Settings」で下記を設定します。

Bot fight mode: ON
- Bot対策を有効にする
Browser integrity check: ON
- ブラウザの整合性チェックを有効にする
Replace insecure JavaScript libraries: ON
- 不安全なJavaScriptライブラリを置換する
Schema validation: ON
- JSONスキーマ検証を有効にする

「自ドメイン」>「Security」>「Security rules」で下記を設定します。

下記のリクエストが来た場合、ブロックする

(
 http.user_agent contains "curl"
 or http.user_agent contains "python"
 or http.user_agent contains "wget"
 or http.user_agent contains "httpclient"
 or http.user_agent contains "sqlmap"
 or http.user_agent contains "nikto"
 or http.user_agent contains "nmap"
)

海外からのアクセスの場合、リクエスト元がBotかどうかを判別する

まとめ

Cloudflare Tunnelを利用することで、自宅サーバーを安全に公開することができました！

無料の範囲内での使用ですが、十分な機能が使えると思います。ドメイン登録数に制限もないということで、個人利用に物凄く助かるサービスだと思います。

それでは、よき個人開発ライフを！