背景#

リバースプロキシを利用した何も考えずに TLS 対応のサーバーを立てる方法という記事を以前書いていたのですが、知人から「それ、Cloudflare Tunnel 使えばもっと楽だよ」と教えていただいたので、実際に使ってみることにしました。

感想としては、神でした。

背景としては前回と同じで、

1. ウェブアプリが NodeJS でポート 3030 で起動中(ポート自体は何でも良い)
2. HTTP に対応してポート(80)でウェブアプリにアクセスできるようにしたい
3. TLS に対応して HTTPS(ポート 443)でウェブアプリにアクセスできるようにしたい
4. TLS の更新に Cloudflare の SSL/TLS を利用したい
5. IP アドレスが変更されたときに DDNS で自動的に対応したい

という内容です。

今回の変更により TLS 対応はウェブ上から Cloudflare SSL/TLS で Full(strict)を選ぶだけで TLS 対応可能、アプリ以外は Cludflare Tunnel に丸投げできるというとてつもなく単純化できることがわかりました。

自宅でサーバーを立てている人なら外部からのアクセスに対してポートフォワードを設定している人もいたと思うのですが、それすらも不要。もはや詰まる所がないと言っても過言ではありません。

Cloudflare Tunnel#

Cloudflare のダッシュボードからAccess>Launch Zero Trustを選択して別のサイトを開きます。

すると何やらまた似たようなサイトが開くのでAccess>Tunnelsを開きます。開いたらそこからCreate a tunnelを選択します。

作成したいトンネル名を決めたら何やら設定画面が表示されます。今回は Docker で動作させることを目的としているので Docker のアイコンをクリックします。

docker run cloudflare/cloudflared:latest tunnel --no-autoupdate run --token XXXXXXXXXXXXXXXX

みたいな内容が表示されます。ただ、これだと Docker でしか使えないのでこれを Docker compose で使える形に直します。

version: "3.9"

services:
  app:
    image: tkgling/salmon_stats_app:latest
    container_name: salmon_stats_app
    restart: unless-stopped
    ports:
      - 3000:3000

  cloudflare_tunnel:
    restart: always
    image: cloudflare/cloudflared
    command: tunnel run
    environment:
      TUNNEL_TOKEN: $TUNNEL_TOKEN

.env にTUNNEL_TOKENの値を記載しておきましょう

このように書けば Cloudflare Tunnel がdocker compose upで立ち上がり、自動的にポートフォワードをしてくれます。

どのポートをどのポートにとばすかは Web 上で決めます。

今回はhttps://api.splatnet3.comでサービスを公開することを考えます。

version: "3.9"

services:
  app: #ここが大事
    image: tkgling/salmon_stats_app:latest
    container_name: salmon_stats_app
    restart: unless-stopped
    ports:
      - 3000:3000 #ここも大事