Quantumleap
1022 words
5 minutes
Cloudflare Tunnelでもっと簡単にサーバーを立てよう
2023-11-17

背景#

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

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

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

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

という内容です。

タスク新手法以前の記事従来
1NodeJSNodeJSNodeJS
2Cloudflare TunnelNginxNginx
3Cloudflare TunnelNginxNginx
4Cloudflare SSL/TLSCloudflare ProxyLet’s encrypt
5Cloudflare TunnelCloudflare DDNSCloudflare 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でサービスを公開することを考えます。

設定#

設定できるのは以下の五つですので、下のように設定します。ドメインに関しては Cloudflare に登録されているものしか使えないので、使いたいドメインが未登録の場合は先に登録しましょう。

パラメータ
Subdomainapi
Domainsplatnet3.com
Path-
TypeHTTP
URLapp:3000

別の方法で既にサブドメインが登録されている場合は同じサブドメインが登録できないので事前に前の設定を消去しなさいとの警告がでます

Path に関してはルートに設定するのであれば空っぽで大丈夫です。

URL のところが結構大事で、Cloudflare Tunnel 自体が Docker の中で動いているのでlocalhostは使えず、サービス名で指定することになります。

version: "3.9"

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

今回、アプリはサービス名がappで外部に公開しているポートが3000なので HTTP://app:3030 となるように修正します。

と思ったけれど、Docker compose の中で完結しているのであれば Dockerfile 内で EXPOSE 3000 しているのであれば ports で 3000 は公開する必要がないのでは…とも思ったのであった

あとはこれでdocker compose up -dを実行すればサーバーが立ち上がります。余計なことは一切不要です。

記事は以上。

Cloudflare Tunnelでもっと簡単にサーバーを立てよう
https://fuwari.vercel.app/posts/2023/11/cloudflare_tunnel/
Author
tkgling
Published at
2023-11-17