はじめに
前回は、（ステップ１）自宅内専用（外部公開しない）Webサーバーの作成
の紹介をしました。
今回は（ステップ2）作ったWebサーバーの外部公開（Cloudflare Tunnelを利用）を紹介します。
Cloudflare Tunneを使用することで、ルーターのポート開放不要、アクセス先のIPアドレスがWebサーバーのある自宅などの固定IPアドレスでないため、サーバーの場所が特定されないなど、安全に公開することができます。
なお、Cloudflareのユーザー登録（無料ライセンスでOK）とドメイン登録はすでに終わっているものとして記載しています。
Cloudflare Tunnel（Docker）を設定
Cloudflareから token を取得し、Webサーバーであるラズパイで、これもDockerをつかって、Cloudflareとの通信を経路をつくります。
tokenの取得
Cloudflareにログインします。
左のメニューの中から、「Zero Trust」をクリックします。
左のメニューの中から、「ネットワーク」ー「コネクタ」をクリックします。
「トンネルを追加する」をクリック
「選択する Cloudflared」をクリック
トンネル名に、任意の名前（例：Rpi5）を入力して、「トンネルを保存」をクリック。
表示された画面で、「Docker」をクリック。
dockerのコマンドが表示されるので、右上のコピーボタンで、コピーします。
・・・token 以降の文字列を使います。
Docker Cloudflare
Webサーバー（ラズパイ）Cloudflare Tunnelをつくります。
フォルダ、ファイル構成
<ユーザーフォルダ>
└ docker/
├── Cloudflare/
│ └── docker-compose.yaml
cd ~/docker
mkdir Cloudflare
# Cloudflareへ移動
cd Cloudflaredocker-compose.yaml
テキストエディタnanoを使って作成します。
nano docker-compose.yamlservices:
cloudflared:
image: cloudflare/cloudflared:latest
container_name: cloudflared
restart: unless-stopped
command: tunnel --no-autoupdate run --token <token>
#<token>には、Cloudflare Tunnel のDockerコマンドの--token以下にかかれた
#トークンを入力
networks:
- wpnet
networks:
wpnet:
external: true
Docker ネットワーク名を変えた場合は、「wpnet」の部分（2か所あり）を変更してください。
command行の<token>は、Cloudflare Tunnel のDockerコマンドの--token以降にかかれた文字列に置き換えてください。
起動（参考：停止）
cd ~/docker/Cloudflare
docker compose up -d通信状態の確認
うまくいけば、先ほどの<token>を取得した画面で、ステータスが「接続済」となります。
もしくは、「コネクタ」の画面で、ステータスが「正常」と表示されます。
アプリケーションルートの設定
CloudflareとWebサーバーを結びつけます。
「コネクタ」画面に表示されるトンネル名（例ではRpi5）をクリックします。
(1)「公開されたアプリケーションルート」をクリックしたあと、
(2) 「＋公開されたアプリケーションルートを追加する」をクリックします。
ホスト名に、サブドメイン、ドメインと分けて入力します。ドメインはCloudflareに登録したものから選択になります。
サービスは、タイプは「HTTP」、URLにはWordpressの<コンテナ名>:80 を入力して
保存します。
問題なければ、上図のようになります。
外部からのWebページxxx.comのアクセスは、なにも設定しなくとも、https接続になります。
Cloudflareが証明書等の処理をしてくれます。
接続を確認して終了
外から（スマホで4Gや5G回線をつかうなど）http://xxx.comでアクセスして、Webサイトが表示されればOKです。
おわりに
これで、ポート開放なしでWebサーバーを公開することができました。
ここまでで、Cloudflareを経由するメリットである、ルーターのポート開放不要、アクセス先のIPアドレスがWebサーバーのある自宅などの固定IPアドレスでないため、サーバーの場所が特定されない、は実現できてます。
ほかにも、Wordpressの管理画面のアクセス前に認証を追加し、セキュリティを向上させる方法もありますので、別途紹介する予定です。
コメント