MENU
無料でご相談
無料でご相談
  1. ホーム
  2. インフラ
  3. CloudflareのCDNとVPNを設定してみる

CloudflareのCDNとVPNを設定してみる

インフラ クラウド ネットワーク
2024年7月16日

「SAVACAN」担当のMKです。

今回のブログではコンテンツデリバリネットワーク（CDN）で有名なCloudflareについてご紹介したいと思います。Cloudflareのサービスは、CDN、DDoS、DNS、WAF、VPNなどWEBサイトの保護と高速化に特化した企業です。

本ブログでは、CloudflareのCDNとVPNについて紹介したいと思います。
Cloudflareの無料プランをベースにご紹介しています。
前提として、CloudflareのCDNを利用するためには対象ドメインのネームサーバーにCloudflareのネームサーバーを設定する必要があります。

まずはじめにCDNについて概要をご説明して、CloudflareでのCDNの設定方法をご紹介します。
次にCloudflareのVPNアプリWARPの概要をご説明して、最後にWARPの設定方法をご紹介します。

よろしくお願いします。

目次

CDNとは何か

CDNとはコンテンツデリバリネットワーク（Contents Delivery Network）の略称です。
キャッシュサーバーにWEBサイトのコンテンツをキャッシュ（一時的に保存）し、オリジナルサーバーに変わってコンテンツを配信する仕組みです。
キャッシュがあればCDNのキャッシュサーバーからコンテンツが配信されますので、オリジナルサーバーのリソース負荷を軽減し、さらに閲覧者に近いキャッシュサーバーから配信する事で高速化が期待できます。

このような仕組みはエッジコンピューティングの概念の一つです。

以下のような場合、効果が見込めます。
・サーバー、ネットワーク負荷の軽減対策
・表示速度の改善
・動画など大容量のコンテンツの配信（CDNサービス、プランによりサイズ制限あり）

逆に、CDNに向かないサイトは次のようなサイトです。
・転送量による従量課金をしたくない
・キャッシュルールの要件が複雑

Cloudflareは無料プランでCDNの多くの基本機能を提供しています！（2024/6月時点）

CDNがない場合とある場合のネットワークの流れはこのようなイメージになります。

代表的なCDNサービスを確認する

導入するCDNサービスの検討材料として多くのユーザーが利用しているCDNサービスをご紹介します。

・Cloudflare
本ブログでも取り上げた世界シェアが一番大きいCDNサービスがCloudflareになります。（無料利用含む）
無料プランでもCDNが使えるため費用を抑えることができますが、対象ドメインのネームサーバ―にCloudflareのネームサーバ―を設定する必要があります。

・AWS cloudfront
AWSの提供するCDNサービスです。
AWSでEC2などでWEBサービスを運用している場合は同じプラットフォームで管理できるというメリットがあります。
従量課金にて提供されます。

・Akamai
CDNサービスを展開する老舗企業で世界最大のCDNネットワークを持っていると言われています。
主に大手企業や政府機関で採用されているとの事。
費用は応相談となっております。

・Fastly
OSSのキャッシュサーバーVarnishを利用してCDNを構成しています。
従来のCDNでは実現が難しかった動的コンテンツをキャッシュでき、リアルタイムキャッシュ制御、VCL（Varnish Configuration Language）を使用したルール作成などの技術で次世代CDNと呼ばれています。
従量課金にて提供されます。

ざっくりですが、CDNとはどのようなものか一通り紹介させて頂きました。
ここからは実際にCloudflareの設定をしてみたいと思います。

Cloudflareのアカウントとドメインのネームサーバ―は設定済とさせて頂きます。

CloudflareでCDN（キャッシュ）を設定する

今回は無料プランを前提とした標準的な設定を行います。
WAFとDDoSは無料プランで有効になっている機能がありますが今回は取り上げておりません。

まず、事前準備としてCDNを利用したいドメインのネームサーバ―にCloudflareのネームサーバ―を設定します。

・[httpsリダイレクト]設定
CDNを設定したいWEBサイトの概要から[クイックスタートガイド]を設定します。

WEBサイトのhttp → httpsへのリダイレクトを設定し、[保存]ボタンをクリックします。
プログラムなどの兼ね合いで全てがhttps通信になってもWEBサイト運用に支障がなければ有効にしておいて問題ありません。

設定の確認画面で[終了]をクリックします。

・キャッシュ設定（CDNのルール設定）
左メニューから[Caching]→[構成]を選択します。

キャッシュレベルでCloudflareの推奨設定[スタンダード]を選択します。

キャッシュレベルのセレクトボックスの動作は以下になります。
　スタンダード:クエリー文字列が変更されるたびに異なるリソースが配信される
　クエリー文字列なし:クエリー文字列がない場合は、cache からファイルのみ配信する
　クエリー文字列を無視:クエリー文字列に関わらず、すべてのユーザーに同じリソースが配信される

ブラウザにファイルをキャッシュさせる期間を設定します。
ブラウザ キャッシュTTL：1年

たったこれだけの設定で完了です！デフォルトのキャッシュルールに沿ってキャッシュされますので動作確認してみましょう！

ブラウザからキャッシュ確認してみる

ブラウザからCDNに設定したWEBサイトにアクセスします。
初回のアクセス時にキャッシュが作成されますので、2回アクセスして画像のヘッダーにキャッシュ設定が表示されていれば成功です！

こちらの画像はChromeの開発者機能を使って確認したjpg画像のヘッダーになります。

「31536000秒 = 8760時間 = 365日 = キャッシュに設定した1年」
ですのでCloudflareで設定したキャッシュが取得できていることが確認できますね！

キャッシュルールの個別設定

キャッシュが一律で取得されると困ることがあります。
そんなときは無料プランでも3件までページ毎で個別にキャッシュ設定を行う機能があります。

例えばあるディレクトリの下をキャッシュをさせたくない場合は個別にPages Rulesで設定します。

左メニューの[ルール]から[ページルール]をクリックします。

[ページルールを作成]をクリックします。

ここでは仮に「https://test-cdn.net/kanri/」の下でキャッシュを取らない設定をします。

URLに test-cdn.net/kanri/* を入力します。
設定に [キャッシュレベル] [スキップ] を選択します。

[ページルールを保存およびデプロイ]をクリックして設定完了です。

これでデフォルトのルールと違う動作をするルールを登録できました。

Cloudflareのデフォルトキャッシュルールは以下のURLに記載されています。
https://developers.cloudflare.com/cache/concepts/default-cache-behavior/

キャッシュの削除

キャッシュされたコンテンツをユーザー自身で削除する事が出来ます。

左メニューの[Caching]から[構成]をクリックします。

[キャッシュをパージ]から
[カスタムパージ]をクリックすると指定URLのキャッシュを削除できます。
[全てパージ]をクリックすると全てのキャッシュを削除できます。

Cloudflare経由のアクセスでアクセス元のIPを取得する

主要なwebサーバーソフトウェアでは、Cloudflare経由のアクセスをログで確認するとCloudflareのIPアドレスになってしまいます。
以下のように設定を変更することでアクセス元のIPアドレスを取得できます。

[Apache/2.4.37]
LogFormat の先頭の%hを%a に修正

・修正前

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined

・修正後

LogFormat "%a %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined

VirtualHostに RemoteIPHeader CF-Connecting-IP の1行を追加します。

<VirtualHost *:443>
  ServerName test-cdn.net
  DocumentRoot /var/www/html
  RemoteIPHeader CF-Connecting-IP
  ErrorLog logs/error_log
  CustomLog logs/access_log common
</VirtualHost>

以上でApache2.4でアクセス元IPアドレスを取得できます。
次にnginxの設定をしていきます。

[nginx/1.14.1]

nginx.confのhttpセクションに以下を追加します。
conf.d/の下に***.conf というファイル名で以下を記載しても良いです。運用に合う形で実装します。

set_real_ip_from 103.21.244.0/22;
set_real_ip_from 103.22.200.0/22;
set_real_ip_from 103.31.4.0/22;
set_real_ip_from 104.16.0.0/13;
set_real_ip_from 104.24.0.0/14;
set_real_ip_from 108.162.192.0/18;
set_real_ip_from 131.0.72.0/22;
set_real_ip_from 141.101.64.0/18;
set_real_ip_from 162.158.0.0/15;
set_real_ip_from 172.64.0.0/13;
set_real_ip_from 173.245.48.0/20;
set_real_ip_from 188.114.96.0/20;
set_real_ip_from 190.93.240.0/20;
set_real_ip_from 197.234.240.0/22;
set_real_ip_from 198.41.128.0/17;
set_real_ip_from 2400:cb00::/32;
set_real_ip_from 2606:4700::/32;
set_real_ip_from 2803:f800::/32;
set_real_ip_from 2405:b500::/32;
set_real_ip_from 2405:8100::/32;
set_real_ip_from 2c0f:f248::/32;
set_real_ip_from 2a06:98c0::/29;

real_ip_header CF-Connecting-IP;

Apacheの場合はCloudflareのIPアドレスの記述をしなくてもアクセス元IPを取得できますが、nginxの場合はCloudflareのIPアドレスを記述しておかないとアクセス元IPを取得できません。
set_real_ip_fromに記述するIPアドレスは更新される可能性があるため、Cloudflare公式サイトで定期的に確認した方が良いです。
https://www.cloudflare.com/ips/

参考情報として、こちらのページにアクセス元IPアドレスの取得に関する仕様の記載があります。
https://developers.cloudflare.com/support/troubleshooting/restoring-visitor-ips/restoring-original-visitor-ips/

個人や小規模サイトを利用する場合は無料プランでも充分利用できますので、WEBサイトの高速化やセキュリティ強化を目指す場合には導入をお薦めします。

では、引き続きCloudflareのWARPというVPNサービスについて説明します。
WARPにはCloudflare Zero Trustとの連携機能が提供されます。

より上位のWARP+という有償版もありますが、今回は無料版のWARPについて説明します。
Zero Trustについても簡単に解説します。

Cloudflare Zero Trustとは

Cloudflare Zero Trustは、企業がゼロトラストの導入をサポートする為にCloudflareが提供するソリューションになります。

ゼロトラストとは、全てのアクセスを信用せず常に信頼性を検証することで、サイバー攻撃のリスクを軽減し、セキュリティの強化を図る手法です。

WARPではCloudflare Zero Trustと連携することでCloudflareのサービスを利用してユーザー認証の強化、ネットワークセキュリティの保護などを提供します。

WARPは、WARPアプリケーションを利用してCloudflareのセキュアなネットワークを介して
・接続先のWEBサイトを閲覧
・接続先のリモートデスクトップ端末（以降RDP）との間にトンネルを張る
といったことができます。

世界最速と言われるDNSサービス1.1.1.1やWireGuardの技術を利用して高速に接続できるという特徴があります。

WireGuardについては以前のSAVACANブログでもふれていますので、よろしければご覧ください。
WireGuardでVPNサーバーを構築して繋いでみた

Cloudflare WARPを設定する

Cloudflare WARPですが、何かと言いますとCloudflareが提供するVPNアプリケーションです。
FREEプランで利用できる機能として大きく2つあります。

（１）自分のパソコンからCloudflare経由でインターネットへアクセス
（２）社外から社内のパソコンにRDP接続

順番に解説していきます。

自分のパソコンからCloudflare経由でインターネットへアクセスする

VPN機能のみを利用する場合はCloudflareのアカウントがなくても利用できます。

ここから各デバイス用のWARPアプリケーションをダウンロードします。
https://one.one.one.one/

インストール後に起動してトグルボタンを接続にしたら設定完了です。

自分のIPアドレスが確認できるサイトにアクセスしてIPアドレスが変わっていることを確認します。

https://www.ugtop.com/

Coludflareをプロキシサーバーにしてインターネット閲覧をするイメージです。
設定不要なので非常に簡単ですね！

社外から社内のパソコンにRDP（リモートデスクトップ）接続

リモートワークなどで社外のパソコンから社内のパソコンにRDP接続することを想定した設定の紹介になります。Windows Homeエディションの場合はRDP接続できませんので注意してください。

接続イメージは以下になります。

WARP設定

Cloudflareのアカウントは取得してあるものとさせて頂きます。

Cloudflareにログインして左メニューから[Zero Trust]をクリックします。

トンネル作成

RDP接続先のPCと接続元（クライアントPC）とCloudflareの間のTunnelを作成します。
左メニューから[Networks]→[Tunnels]をクリックします。

Tunnels画面で[Add a tunnel]ボタンをクリックします。

Select your connector画面でコネクタに[Cloudflare]を指定して画面右下の[Next]をクリックします。

Name your tunnel画面で[Name your tunnel]に任意のトンネル名を入力して画面右下の[Next]をクリックします。

Install and run connectors画面で[Choose your environment]でお使いの環境を選択すると[Install and run a connector]に環境に合わせたコンテナ実行コマンドが表示されるのでコピーしておきます。
CloudflareアプリのインストーラーはRDP接続される側にインストールします。

※RDP接続先とコネクタを接続しますので作業はCloudflareのInstall and run connectors画面を開いたまま実行します。

インストールが完了したらコマンドプロンプトで 「cloudflared –version」 と実行し、バージョンが表示されればインストール成功です。

インストールが完了したらRun the following commandに記載されたコマンドをRDP接続先のパソコンのコマンドプロンプトで実行します。
このコマンドを実行します。
↓

実行が成功するとCloudflareのConnectorsにConnector ID情報が表示されますので画面右下の[Next]をクリックします。

Route Traffic画面が表示されます。
今回はRDP接続先のIPアドレスを登録しますので[Private Networks]タブをから[Add a private network]をクリックします。

CIDRにRDP接続先の社内のPCのIPアドレス/32を設定し[Save private network]をクリックします。

Create a tunnel画面に戻りますので画面右下の[Save tunnel]をクリックして登録します。

Tunnels画面に戻るとトンネルの ConnectorID が表示され、Statusが HEALTHY になります。
StatusはRDP接続されるパソコンを電源OFFすると DOWN に変わります。
電源ONするとCloudflareアプリが自動起動して HEALTHY になりますので自動起動を無効にしないようにしましょう。

デバイス登録ポリシーを設定

デフォルトの設定ではWARPアプリからCloudflareにログインするときに必要な情報はチーム名のみです。チーム名を知っていれば誰でも接続できてしまうのでclientの認証制限をかけます。

左メニューから[Settings]→[WARP Client]をクリックします。

WARP Client画面で Device enrollment permissions の[Manage]をクリックします。

Rules画面で[Add a rule]をクリックします。

今回はメール受信によるワンタイムパスワード認証を設定します。
Selector：Emails
Value：自分のメールアドレス

[Save]ボタンで保存して
Policies画面でルールが登録されActionがALLOWになっていることを確認します。

Cloudflareのデバイス設定を変更する

RDP接続先のPCのプライベートIPアドレスをCloudflareへ接続するようにします。

左メニューから[Settings]→[WARP Client]をクリックします。
[Device settings]で[Create profile]をクリックします。

STEP 1
Name the profile画面
任意の名前と、必要に応じて説明を入力します。

STEP 2
Build an expression画面
ここでは例として以下の内容を入力しました。
Selector：User Email
Operator：in
Value：自分のメールアドレス

ここまでで画面右下の[Create profile]ボタンをクリックして一旦登録します。
STEP 3に登録後にしか編集できない設定がありますので登録後にProfileをクリックしてもう一度編集します。

STEP 3
Configure settings画面
Split Tunnels：Include IPs and domainsに変更

WARNINGが出ますが[Continue and delete]をクリックします。

Manage Split Tunnels画面が表示されますので
Selector：IP Adress
Value：RDP接続先のパソコンのIP/32 を入力します。

[Save destination]ボタンで登録します。

クライアントPCにWARPをインストールし接続設定する

ここから各デバイス用のWARPアプリケーションをダウンロードします。
https://one.one.one.one/

インストール後に起動して虫のマークをクリックして環境設定画面を開きます。

左メニューのアカウントから[Cloudflare Zero Trustにログイン]をクリックします。

チーム名入力画面が表示されます。

Cloudflare Zero Trustの[Setting]→[Custom Pages]→[Team domain] に表示されたチーム名を記載します。

メールアドレス入力画面が表示されますので登録したメールアドレスを入力し、届いたメールに記載のあるログインコードでログインします。

ログインするとWARPアプリに表示されたアプリ名がWARPからZero Trustになります。
トグルボタンをクリックしてCloudflareに接続します。
メールが届かないときはトンネルのStatusが DOWN になっていることが考えられます。

ここまででクライアントPCにWARPをインストールする設定は完了です！
社内のPCに別ネットワークからRDP接続してみましょう！

社内PCでのリモートデスクトップ設定

RDP接続したいPCのリモートデスクトップ機能を有効にします。
windows11の場合はRDP接続されるパソコンの[設定]→[システム]→[リモートデスクトップ]→[ユーザーアカウントで許可されたユーザー]に接続用のユーザーを登録します。

ここまで設定したらRDP接続する準備ができました。お使いのPCのリモートデスクトップアプリから接続するとユーザーとパスワードを聞かれます。
ユーザーは先ほど登録したユーザーで、パスワードはRDP接続したいPCのパスワードです。

これだけで社外から社内のPCにRDP接続できますのでぜひお試しください！

Cloudflare WARPをWireGuardと比較した使い勝手

最後に、以前WireGuardでVPN環境を構築するブログを書きましたが、WARPでもVPNの技術にWireGuardを利用していますので使い勝手を比較しておきます。

スクロールできます
WARPWireGuard
VPNアプリをインストール
していないPCへのRDP接続		×〇
ユーザーごとのアクセス権限〇〇
GUIのみでのインストール〇×
管理者の操作のしやすさ〇×
（コマンドライン操作が必要）
導入のしやすさ△
（ある程度の前提知識が必要）		△
（ある程度の前提知識が必要）

VPNクライアントをインストールしていないPCへの接続可否はメリットにもデメリットにもなると思います。
WARPのVPNは想定されるPCのみへのアクセスに限定できますが、RDP接続したいPCが複数台ある場合、すべてのPCに設定が必要になりますので手間が増えます。
WireGuardのVPNは1台にインストールすればネットワーク全てにRDP接続できますので便利ですが、想定外の機器にアクセスされるリスクもあります。

利用用途に応じて使い分けるのが良さそうですが、もし技術者でない方がVPN環境を構築するならボタン操作で設定できるCloudflare WARPの方が分かりやすいと感じました。
必要に応じて使い分けて、安全にVPNを利用できるといいですね！

インフラ クラウド ネットワーク
CDN Cloudflare VPN WARP Zero Trust
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

spi_kotoのアバター spi_koto

関連記事

目次