Cloudflare Tunnelを使うと、手元のPCやVPSで動いているHugoのローカルプレビューを、ポート開放なしでHTTPSの外部URLとして公開できます。 自分のブラウザだけで確認するならlocalhost:1313で十分ですが、誰かに見てもらうには外からアクセスできるURLが必要です。

開発中に一時的に共有したいだけなら、cloudflared tunnel --urlで十分です。 同じURLを継続して使いたい場合は、Cloudflare管理下の独自ドメインをTunnelへ紐付けます。

この記事では、一時URLで試す最短手順と、preview.example.comのような固定URLにする手順を分けて整理します。

先に結論

Hugoのローカルプレビューを一時的に外部共有したいだけなら、次の2ステップで足ります。

  1. Hugoのローカルサーバーをhttp://localhost:1313で起動する
  2. 別ターミナルでcloudflared tunnel --url http://localhost:1313を実行する

これでtrycloudflare.comの一時的なHTTPS URLが払い出されます。 確認相手へそのURLを送れば、相手は自分のブラウザからHugoプレビューを見られます。

同じURLを継続して使いたい場合だけ、cloudflared tunnel login、cloudflared tunnel create、config.yml、cloudflared tunnel route dnsへ進みます。固定URL化する場合は、Cloudflareに追加済みのドメインと、Cloudflare側のDNS管理が必要です。

Cloudflare Tunnelでできること

Cloudflare Tunnelは、ローカルやprivateなoriginをCloudflareへつなぐための仕組みです。

Hugoのプレビュー用途では、次のような場面で便利です。

  • 公開前の記事やデザインを、固定URLで確認してもらいたい
  • ルーターやVPS側のinboundポートを開けずに、外部から見える確認URLを作りたい
  • 手元のHugoサーバーを、HTTPSでスマホや別のネットワークから確認したい
  • 最初は一時URLで試し、必要になったらpreview.example.comのような固定URLにしたい

逆に、公開サーバーとして恒久運用するなら、Tunnelだけでなく、再起動、ログ、監視、nginx側の設定も別で考える必要があります。VPS上で本番配信する流れは、Ubuntuでnginxを導入して最初の公開設定をする手順 も参考になります。

Cloudflare Tunnelは何をしているのか

cloudflaredは、手元のPCやVPS上で動くCloudflare Tunnel用のコネクタです。

外から直接localhost:1313へアクセスするのではなく、cloudflaredがローカル側からCloudflareへoutbound接続を張ります。ブラウザから来たリクエストはCloudflareに入り、Tunnelを通ってcloudflaredへ届き、最後にHugoのローカルサーバーへ流れます。

この形にすると、ローカル側でinboundポートを開けたり、ローカルサーバーのために証明書を直接管理したりしなくても、HTTPSの外部URLを作れます。

インストール

macOSならHomebrewでcloudflaredを入れます。

brew install cloudflared

最短で一時URLを発行して試す

まずHugoのローカルサーバーを起動します。

hugo server --bind 127.0.0.1 --port 1313 --disableFastRender

別ターミナルで、HugoのローカルサーバーをCloudflare Tunnelへ渡します。

cloudflared tunnel --url http://localhost:1313

実行すると、https://xxxx.trycloudflare.comのような一時URLが表示されます。 このURLは開発・テスト・一時共有向けです。固定URLや継続運用が必要になったら、次のnamed tunnel構成へ進みます。

ブラウザからtrycloudflare.comの一時URLへアクセスし、Cloudflareとcloudflaredを経由してlocalhost:1313のHugoプレビューへ届く流れ

Hugo以外の開発サーバーでも考え方は同じです。ViteやNext.jsなどでlocalhost:3000やlocalhost:5173を使っている場合は、--urlに渡すポートを自分の開発サーバーに合わせます。

独自ドメインで固定URLにする

一時URLではなく、https://preview.example.com/のような固定URLでHugoプレビューを共有したい場合の手順です。

ドメイン準備

固定URL化するには、対象ドメインをCloudflareに追加し、DNSをCloudflareで管理できる状態にしておきます。

  • ドメインを取得する
  • Cloudflareにサイトを追加する
  • ドメイン管理サービス側のnameserverをCloudflare指定のものへ変更する

この記事では例としてpreview.example.comを使います。

preview.example.comへのアクセスがCloudflare DNSのCNAMEからCloudflare Tunnelへ向かい、cloudflaredを通ってlocalhost:1313へ届く構成

Cloudflare にログイン

CLIからCloudflareにログインし、Tunnelで使うドメインを選択します。

cloudflared tunnel login

認証が完了すると、CloudflareをCLIから操作するための証明書が保存されます。

~/.cloudflared/cert.pem

トンネルを作成

cloudflared tunnel create hugo-preview

このコマンドで、名前付きTunnel、Tunnel UUID、credentials fileが作られます。 出力されたUUIDとcredentials fileのパスは、次のconfig.ymlで使います。

~/.cloudflared/<Tunnel-UUID>.json

config.yml を作成

vi ~/.cloudflared/config.yml

tunnel: <Tunnel-UUID>
credentials-file: /Users/your-name/.cloudflared/<Tunnel-UUID>.json

ingress:
  - hostname: preview.example.com
    service: http://localhost:1313
  - service: http_status:404

hostnameは外からアクセスする固定URLのホスト名です。 serviceは、cloudflaredが最終的に転送するローカルサービスです。Hugoプレビューならhttp://localhost:1313になります。

最後のhttp_status:404は、上のルールに一致しなかったリクエストを404にするためのcatch-all ruleです。

DNS に CNAME を自動作成

固定URLのホスト名をTunnelへ向けます。

cloudflared tunnel route dns hugo-preview preview.example.com

Cloudflare DNSに、Tunnel向けのCNAMEが作成されます。 このコマンドはDNSレコードを作るだけなので、実際にアクセスできるようにするには次のcloudflared tunnel runでTunnelを起動します。

トンネルを起動して確認する

Hugoサーバーを起動した状態で、named tunnelを実行します。

cloudflared tunnel run hugo-preview

これで次のURLから、HugoのローカルプレビューへHTTPSでアクセスできます。

https://preview.example.com/

Cloudflare Accessと組み合わせる場合

Cloudflare Tunnelは、Cloudflareからローカルサーバーへ届く道を作る仕組みです。 誰を通すかを制御したい場合は、Cloudflare Accessを組み合わせます。

この記事ではTunnel自体の手順に絞り、Accessの細かい設定は別記事で整理します。考え方としては、Tunnelが「道」、Accessが「認証の関門」です。

Cloudflare TunnelはCloudflareからlocalhostへ届く道を作り、Cloudflare Accessはその手前で許可された利用者だけを通す関門になることを示す図

向いているケース、向いていないケース

Cloudflare Tunnelが向いているのは、次のようなケースです。

  • Hugoのローカルプレビューを短期間だけ共有したい
  • preview.example.comのような固定URLで、確認相手に何度も見てもらいたい
  • ローカルやVPSのinboundポートを開けずに、HTTPSの確認URLを用意したい
  • Cloudflare Accessなどと組み合わせて、公開前サイトの確認環境を作りたい

一方で、次のようなケースでは追加の設計が必要です。

  • 本番サーバーとして長期運用したい
  • 大容量ファイル配信や高負荷アクセスを想定している
  • 認証なしで機密情報を外部共有しようとしている
  • nginx、ログ、再起動、監視を何も整えないまま常時公開したい

Hugoで生成したpublic/を本番配信するなら、Tunnelでローカルプレビューを見せる話とは別に、nginxやデプロイ手順を整理した方が安全です。

関連記事