Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Order allow,deny Deny from all Cloudflare Tunnelを使うための全手順まとめ | hexablog

Cloudflare Tunnelを使うための全手順まとめ

セキュリティ

セクションの目的

Cloudflare Tunnel 認証 → Cloudflare DNS 移行 → XServer 側の設定 を、 本番運用に向けた“完全版まとめ

🚀 準備 1:Cloudflare アカウントを作成(無料)

Just a moment…

🚀 準備 2:VPS側:Cloudflare をインストール

$ curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -o cloudflared
$ sudo mv cloudflared /usr/local/bin/
$ sudo chmod +x /usr/local/bin/cloudflared

① VPS 側:Cloudflare Tunnel の認証を開始する

VPS で以下を実行:

コード

$ cloudflared tunnel login

すると、VPS が URL を表示する:

コード

Just a moment…

これは Cloudflare にログインしてトンネルを紐づけるための URL

② PC(ブラウザ)で Cloudflare にログインし、認証画面を開く

PCでその URL を開くと、Cloudflare がこう表示する:

Authorize Cloudflare Tunnel
Cloudflare Tunnel wishes to serve as an origin on one of your zones.
Please select the zone you want to add a Tunnel to.

しかしこの時点では Cloudflare にドメインが登録されていないため、 ドメインが表示されない

③ Cloudflare にドメインを追加する(Connect a domain)

Cloudflare Dashboard → Add a site ここで必ず:

✔ Connect a domain を選択

ドメイン名サブドメイン名を入力:

例:画像

ブラウザのURL + 
注意:http://は付けない

④ Cloudflare が DNS レコードを自動読み込み

Cloudflare が XServer の DNS をスキャンし、 A / MX / TXT レコードが一覧に表示される。

そのまま Continue to activation を押す。

⑤ Cloudflare がネームサーバー変更を要求

Cloudflare が提示したネームサーバー:

h**k.n*.cloudflare.com
pa***a.n*.cloudflare.com

これを XServer 側に設定する必要がある。

⑥ XServer 側設定

ネームサーバーを Cloudflare に変更 (*DNSの移管作業ではない)

❌ サーバーパネルではなく

✔ インフォパネル(契約管理側)で設定する

手順:

  1. XServerにログイン
  2. 左メニュー → 契約ドメイン一覧
  3. operation-monitor.net を選択
  4. ネームサーバー設定 を開く
  5. 「その他のサービスで利用する」を選択
  6. Cloudflare のネームサーバーを入力:
  1. 保存

⑦ DNS 反映を待つ(5分〜24時間)

Active(緑) → DNS 切り替え完了

  • Pending → 反映待ち
  • Edge 側 → Success(証明書インストール完了)
  • VPS 側 → You have successfully logged in
  • cert.pem → /home/ubuntu/.cloudflared/cert.pem に保存済み
  • Cloudflare DNS → Active
  • ドメイン → Cloudflare 管理下
  • ネームサーバー → Cloudflare に切り替え済み

⑧ Cloudflare DNS が Active になったらトンネルを作成

Cloudflare にログイン済みか確認

VPS で:

$ cloudflared tunnel login

もしすでにログイン済みなら、 「You have successfully logged in」 と出るのでスキップしてOK。

VPS で

$ cloudflared tunnel create icebreaker
  • トンネルID(UUID)
  • 認証ファイル(.json)

が自動生成される。このトンネルID(UUID)は後で config.yml に書くので控えておく

UUID : c68*****-bc1d-4cc2-ab7627d*******20-11

固定URLを作成(DNSルート設定)

$ cloudflared tunnel route dns ********* *********.operation-monitor.net

これで Cloudflare DNS に 固定の WSS URL が登録される。

例:wss://********.operation-monitor.net これが本番で使う URL になる。

設定ファイル(config.yml )を作る(/home/ubuntu/.cloudflared/config.yml)

systemd で自動起動:

$ cloudflared service install
$ systemctl enable cloudflared
$ systemctl start cloudflared

⑨ sender_pi.py と monitor(XServer)の URL を固定化

固定 URL:

wss://**********.operation-monitor.net

これを:

  • sender_pi.py
  • monitor(webrtc.js)

の両方に設定する。

タイトルとURLをコピーしました