CloudflareとWebサーバの接続方法は3種類あり、特徴は[概論]を参照して下さい。
ここでは[IPv4]や[IPv6]接続よりメリットが多い[トンネル]を使った接続方法を解説します。
■上図はサーバとCloudflare間にトンネルを張り、その中にWebサーバを定義する方法になります。
その結果、CloudflsreのDNSにCNAMEレコードでWebサーバのアドレスが記述されます。
構築の手順は下記になります。
4.WebサイトにCloudflareのWordPressプラグインを導入する
1.Cloudflareとサーバ間にトンネルを構築する
1.Cloudflare側での操作
1.Zero Trustメニュの起動
Cloudflareのホーム画面の左ペインの[zero Trust]をクリックします。
2.Team domain名の設定
始めて[zero Trust]を起動した時だけ下図の様な[チーム名]を入力する画面が表示されます。
[チーム名]は任意名称ですが、全世界でユニークな名前が求められます。
設定後[Next]ボタンを挿入して下さい。
注意
以前は上図のチームの入力だけでしたが、現在は[Zero Trust]の無料版でも支払い方法の設定が必要になりました。
又、支払い方法は[個人のカード]では駄目で、[法人カード]が必要になります。
[法人カード]が無い場合は、[個人のカード]をPayPalに登録し、CloudflareはPaypal支払いにすると利用する事ができます。
PayPalの利用は無料なので[新規登録]で[個人のカード]を登録し、CloudflareはPaypal支払いで、PayPalで登録したメールアドレスを指定して下さい。
その後、上記のチーム名を設定して下さい。
3.Tunnelメニュの起動
下図の[zero Trust]のメニュから[Networks→Tunnel]をクリックします。
４.トンネルの作成画面が表示されます。
画面の下にある[Add Tunnel]ボタンを挿入します。
※既に作成したトンネルがある場合は画面の中にある[+ Create a tunnnel]ボタンを挿入します。
5.トンネル種類の選択
作成するトンネルの種類の選択画面が表示されます。
左側の[Cloudflared]を選択して画面右下にある[Next]ボタンを挿入します。
■右側の[+WARP]はプライベートネットワーク間をトンネルで接続するツールです。
6.トンネル名の入力
下記画面に作成するトンネル名を入力します。
トンネル名はトンネル接続するサーバ名が良いと思います。
入力後、[Save tunnel]ボタンを挿入します。
7.トンネルツールの選択
下記画面の様に各種OSの専用ツールや汎用の[Docker]が表示されます。
メモ
[Docker]は、コンテナ仮想化技術を用いてアプリケーションを開発・配置・実行するためのオープンプラットフォームで各種OSにインストールして利用する事ができます。
私の場合はSynologyのNASの中にWebサイトを構築しているので、Synologyの[Docker]を使ってCloudflareとトンネルを構築する方法で解説します。
①[Docker]を選択する
[Docker]をクリックすると[Docker]用のコマンドが表示されます。
これを[コピーボタン]でクリップボードに取り込み[Emeditor]等のテキストエディタに貼り付けて下さい。
コマンドは2つのコマンドから構成されています。
docker run cloudflare/cloudflared:latest
tunnel --no-autoupdate run --token eyJhIjoiMGY1YjIxMGNiOTA1OGMxZWM4M2RlZmZk 以下は省略
■赤字の所は削除して下さい。
普通は[Docker]機能の中で[Cloudflare/Cloudflared]を起動しているのでこの部分は不要です。
■上記で編集したコマンドをサーバのDockerの実行コマンド欄に貼り付け、これを実行する事によりCloudflareの[Zero Trust]とのトンネルが作成されます。
2.サーバ側での操作
Cloudflare側では接続アプリに[Docker]を利用する事を選択しました。
そこでサーバ側ですが、私はSynologyのサーバを所有しているのでこれを利用します。
Synologyサーバの[Docker]は、DSM7.1までは[Docker]でしたが、DSM7.2から[Container Manager]に名称変更になっています。
ここではDSM7.1の[Docker]環境で具体的な流れを説明します。
1.Dockerの起動
パッケージセンタから[Docker]をインストールし、起動すると下記画面が表示されます。
2.レジストリでの操作
ここでは[Docker]に[Cloudflare/Cloudflared]というプログラムをダウンロードします。
①左ペインの [レジストリ] を選択します。
②検索ボックスで[Cloudflare]を入力して検索します。
すると画面の先頭に[Cloudflare/Cloudflared]が表示されます。
③[Cloudflare/Cloudflared]を選択し[ダウンロード]ボタンを挿入します。
④タグの選択
下記画面が表示されるので[latest(最新)]を選択し[選択]ボタンを挿入します。
⑤[イメージ]に1個の仮想ホストが追加されます。
4.Cloudflare/Cloudflaredの設定
①[イメージ]メニュをクリックします。
[Cloudflare/Cloudflared]を選択し[起動]ボタンを挿入します。
②コンテナをどのネットワーク環境で使うかの選択画面が表示されます。
[同じネットワークをDockerホストとして使う]を選択し[次へ]で先に進みます。
③コマンドを登録する画面が表示されます。
[自動再起動]に✓を付けます。
[詳細設定]をクリックします。
④実行コマンドを登録する画面が表示されます。
・[実行コマンド]タブを開きます。
・[コマンド]欄にCloudflareで編集した実行コマンドをコピーしてここに貼り付けます。
・[保存]ボタンを挿入します。
[Container Manager]の場合
Dockerは[実行コマンド]タブの中で指定しますが、[Container Manager]はタブ形式でなくフラットな入力画面になっています。
その中に実行コマンド欄があり、そこに上記と同じものを入力します。
⑤全般設定画面に戻ります。
[次へ]のボタンで先に進みます。
⑥ボリューム設定画面が開きます。
[次へ]のボタンで先に進みます。
⑦確認画面が表示されます。
[完了]ボタンを挿入します。
⑧[コンテナ]メニュを見てください。
Cloudflareと接続されている事が確認できます。
5.Cloudflare側の接続も確認する
①下図の[Back to tonnel]をクリックします。
②下記画面が表示されます。
下図の[Status]がHEALTHY（健康）は、DockerとCloudflare間にトンネルが構築されています。
繋がってない場合は
が表示されます。
2.トンネルにWebサーバを追加する
Cloudflareとサーバの[Docker]間にトンネルが張られたので、このトンネルにWebサーバを追加します。
1.トンネルの編集画面に入ります
利用する[トンネル]をクリックし、表示されたダイアログの[configure]をクリックします。
2.下記画面が表示されます。
下記画面の[Public hostname]タブをクリックします。
■[Overview]タブは、トンネル名を変更する時に利用します。
■[Private Network]タブは、ローカルネットワークを[Zero Trust]空間に接続する時に利用します。
3.下記画面が表示されます。
下記画面にWebサーバの情報を入力し[Save Hostnames]を実行するとCloudflareのDNSにWebサーバが追加されます。
上記の入力方法には色々なタイプがあり、ここでは私が使っている事例で説明します。
| Subdomain | Domain | Path | Type | URL | |
| ① | hnw | t-spirits.com | oldies | http | 192.168.10.120 |
| ② | hnw | t-spirits.com | school | http | 192.168.10.120 |
| ③ | nw | t-spirits.com | – | http | 192.168.10.110 |
| ④ | school | t-spirits.com | – | http | 192.168.10.110 |
| ⑤ | tec | t-spirits.com | tec | http | 192.168.10.110 |
| ⑥ | – | t-spirits.com | – | http | 192.168.10.110 |
上記の設定を下記で解説します。
| 解説 | |
| ① | 下記の様にフォルダ指定のURLで外部公開していた過去のWebサイトです。
https://hnw.t-spirits.com/oldies/ https://hnw.t-spirits.com/school/ 現在は③や④にリダイレク設定しています。 |
| ② | |
| ③ | https://nw.t-spirits.comでアクセスするWebサイトです。
Synologyの仮想ホスト機能で上記URLをoldiesフォルダに転送させています。 |
| ④ | https://school.t-spirits.comでアクセスするWebサイトです。
Synologyの仮想ホスト機能で上記URLをschoolフォルダに転送させています。 |
| ⑤ | https://tec.t-spirits.comでアクセスする非公開サイトです。
Synologyの仮想ホスト機能で上記URLをtecフォルダに転送させています。 |
| ⑥ | ③や④のサイトの管理者権限、⑤のサイトアクセスのブロックメッセージを表示する時に利用しているURLになります。
[Zero Trust]の[Access]の設定で下記の様なURLを設定しています。 |
尚、上記を設定し[Save Hostnames]を実行するとCloudflareのDNS画面に下記が追加されます。
以上でサイトURLがSynologyのWebサイトに転送する設定ができたので、あとはWordPressの設定になります。
補足情報
WEBサイトと同様に、ローカルネットワークに中にあるルータやphpMyAdmin等を上記と同様な方法で設定する事も可能です。
しかしこれは上記のアプリケーションをCloudflareのCDNで利用する事となります。
この場合、各アプリケーションがうまく動作しない事もあるので、これらは[Zero trust]のローカルデバイスとして利用する事をお勧めします。
3.WordPressのインストール
URLの転送が完了してのでここではWordPressのインストールと実行です。
| Subdomain | Domain | Path | Type | URL | |
| ① | hnw | t-spirits.com | oldies | http | 192.168.10.120 |
| ② | hnw | t-spirits.com | school | http | 192.168.10.120 |
| ③ | nw | t-spirits.com | – | http | 192.168.10.110 |
| ④ | school | t-spirits.com | – | http | 192.168.10.110 |
| ⑤ | tec | t-spirits.com | tec | http | 192.168.10.110 |
| ⑥ | – | t-spirits.com | – | http | 192.168.10.110 |
①②の様な使い方をする場合は[日本語WordPressのインストール]だけで実行できます。
③④⑤の場合は[Synologyの仮想ホスト機能]で当該フォルダに転送する設定をした後[日本語WordPressのインストール]を実行します。
但し、仮想ホストを使った接続の場合はWordPressの[wp-config.php]に下記の記述が必要となります。
$_SERVER['HTTPS'] = 'on';
4.WebサイトにCloudflareのWordPressプラグインを導入する
下記はWordPressを利用する時の必須設定です。
Webサーバの画像データ等は、Cloudflareの高速ネットワーク網の中にキャッシュされ、ユーザはこのキャッシュをアクセスするのでパッピー・・・・とはなりません。
もし、Webサーバのコンテンツを更新したがCDNにあるデータが更新前だとしたら、ユーザは最新データにアクセスする事ができません。
ここに登場するのが[CloudflareのWordPressプラグイン]です。
このプラグインはWordPressを更新した時に、Cloudflare側のキャッシュを自動更新してくれる優れものです。
1.Global API Keyの取得
①CloudflareのWebサイト画面を開きます。
②概要画面の下の方にあるAPIトークンを起動します。
③画面に表示された[Global API Key]の[表示]ボタンを挿入します。
④表示された画面にパスワードを入力すると[Global API Key]が表示されます。
これをクリップボード等に保存して下さい。
2.新規プラグインの追加で[Cloudflare]で検索し、インストールと有効化を行います。
3.上記プラグインの設定を行います。
①設定→cloudflareを実行します。
②表示された画面の中の[here]をクリックします。
③表示された下記画面に[アカウント]と上記で保存した[Global API Key]を入力し、Saveします。
④Cloudflareプラグインの概要画面が表示されます。
下図の[Apply Recommeded Clopudafre for WardPress（WordPressに推奨されるCloudflare設定を適用する）]所にある[Apply（適用する）]ボタンを挿入します。
これで自動的に設定が最適化されます。
以上でWordpressを更新した時は自動でCDNのキャッシュは更新されますが、なにか問題があった場合は、マニュアルで[キャッシュを消去]する事もできます。
