前の記事では、「アクティブ（お客様のドメインはCloudflareによって保護されています。）」になっていることを確認しました。
いよいよ最後の設定です。この記事では、Synology NASにCloudflareをDockerでインストールし、Cloudflare Tunnelを作成して、NAS上のWordPressをインターネットへ公開するまでの手順を紹介します。最後に、無料テーマ「Cocoon」をインストールし、ブログを書き始められる状態まで仕上げます。Container ManagerとCloudflareの画面を開き、同時に作成していきます。
※SynologyNASではパッケージセンターから「Container Manager」はインストール済です。
Synology NASにCloudflareをDockerでインストール
「cloudflared」フォルダの作成
Container Managerをダウンロードすると共有フォルダに「docker」が作成されています。File Stationで「docker」に「cloudflared」フォルダを作ります。
CloudflareでTunnelの作成
- Cloudflareにログイン
- 左メニューから Zero Trust （ゼロトラスト）を開く
- 左メニュー
Networks（ネットワーク） → Tunnels（トンネル）
を開く - Create a tunnel（トンネルを作成） を押す
- トンネル名を入力（例：yokiyoki.lifeなどのブログ名でも可）
- 設定「お使いのオペレーティングシステムをお選びください」はドッカー（docker）を選択する。
画面中央にトークンが表示されます。
トークンをコピーすると下記のようになっていますが、docker-compose.ymlにはるのはtunnel --以降です。docker run cloudflare/cloudflared:latest は必要ありません。貼るとエラーになります。
docker run cloudflare/cloudflared:latest tunnel --no-autoupdate run --token eyJhxxxxxxxxxxxxxxxx
プロジェクトの作成
Container Managerを開く。「プロジェクト」→「作成」で下のようにプロジェクト名cloudflared(大文字は使えません）とパスはFileStatinで「docker」に作成した「cloudflared」を選択する。docker-compose.ymlを作成を選択する。
フィールドにカーソルをあわせて、キーボードで「Ctrl」＋「V」でcompose.ymlを貼り付ける。
Cloudflareで取得したトークンをdocker-compose.yml内に貼りつける。
services:
cloudflared:
image: cloudflare/cloudflared:latest
container_name: cloudflared
restart: unless-stopped
command: tunnel --no-autoupdate run --token あなたの長いトークン
network_mode: host
トークンの貼り間違いはないか確認したら、次に進むとウェブポータルをWebstation経由でセットアップはチェックは入れずに次に進み、完了する。
コンテナが緑に点灯したら、成功です。
Public Hostname（公開ホスト名）の設定
Cloudflareに戻り、設定を続けます。Public Hostname（公開ホスト名）を設定すると、SSL証明書が自動で発行され、WordPressをHTTPSで安全に公開できるようになります。また、自宅のNASとはCloudflare Tunnelを通して通信するため、ポート開放を行う必要はありません。下記の3か所を入力する。
HTTPS（SSL）が有効になっていることを確認
Public Hostname（公開ホスト名）を設定すると、CloudflareがSSL証明書を自動で発行してくれるため、WordPressをHTTPSで公開できます。
これまでのように、ポート443の開放やLet's Encryptによる証明書の取得は必要ありません。Cloudflare Tunnelを利用することで、安全にWordPressへアクセスできるようになります。
ブラウザで https://ブログ名（例：https://yokiyoki.life）を開きます。NAS上のWordPressが表示されれば設定は成功です。
最後に、WordPressの管理画面（http://NASのIPアドレス:8080/wp-admin）にログインし、「設定」→「一般」を開きます。
「WordPress アドレス（URL）」と「サイトアドレス（URL）」を、https://ブログ名（例：https://yokiyoki.life）に変更してください。
設定後は、https://ブログ名/wp-admin（例：https://yokiyoki.life/wp-admin）から管理画面へアクセスできるようになります。
WordPressにCocoonをインストールする
WordPressには無料・有料を含めてさまざまなテーマがあります。私は無料でも機能が充実している「Cocoon」を使用しています。
WordPressの初期設定では、ファイルのアップロード容量は2MBになっています。このままではCocoonのテーマをアップロードできないため、Docker ComposeでWordPressを構築する際に「uploads.ini」を作成し、PHPのアップロード容量を64MBへ変更しました。この設定により、Cocoonの親テーマ・子テーマをWordPressへそのままアップロードできます。
- Cocoon公式サイトから親テーマ・子テーマをダウンロード
- 「外観」→「テーマ」→「テーマのアップロード」
- 親テーマ（Cocoon）をインストール
- 子テーマ（Cocoon Child）をインストール
- 子テーマ（Cocoon Child）を有効化
- 「Cocoon設定」が表示されたら完了
※ テーマの更新時にカスタマイズ内容が消えないよう、このブログでは子テーマを有効化しています。
まとめ
Cloudflare Tunnelを利用することで、ポート開放をすることなく、Synology NAS上のWordPressをインターネットへ安全に公開できました。
一見難しそうに感じますが、実際に行う作業は「Tunnelの作成」「Public Hostnameの設定」「HTTPS化の確認」が中心です。CloudflareがSSL証明書を自動で発行してくれるため、Let's Encryptの設定やポート443の開放も必要ありません。
これで、https://ブログ名 でWordPressにアクセスできるようになりました。
次は第2章です。WordPressの初期設定やCocoonのインストールを行い、ブログを書き始める準備をしていきます。