Astro開発環境をCloudflare Tunnelで公開したらViteのallowedHostsでハマった話

Web開発を行っている際、手元のローカル開発環境を一時的に外部から接続してテストしたい場面があるかと思います。

今回は、そのような時に非常に便利な「Cloudflare Tunnel」の設定方法と、Astroにアクセスする際に発生したエラー内容について解説したいと思います。

やりたかったこと

Cloudflare Tunnelを使ってAstroの開発環境を外部公開

発生したエラー

設定手順の前に、まずは発生したらエラーについて。

アクセスエラー

エラーメッセージ

Blocked request. This host ("test-tunnel.alpaca-press.com") is not allowed.
To allow this host, add "test-tunnel.alpaca-press.com" to `server.allowedHosts` in vite.config.js.

エラーの原因

これは、Vite（Astroの内部で使用されているビルドツール）のセキュリティ設定によって、予期しないホスト名からのアクセスがブロックされているためです。

プロジェクトの astro.config.ts に設定を追加し、アクセス元のホスト名を許可してあげる必要があります。以下のように vite.server.allowedHosts を追記してください。

export default defineConfig({
  // ...その他の設定
  vite: {
    server: {
      allowedHosts: [
        "test-tunnel.alpaca-press.com",
      ],
    },
  },
});

ここからはトンネルの作成の手順です

まずはCloudflareのダッシュボードにログインし、左側のメニューから「Zero Trust」をクリックします。続いて、左メニューの「ネットワーク」から「コネクタ」を選択し、「トンネルを追加」をクリックします。

トンネル追加

トンネルのタイプを選択する画面が表示されるので、「Cloudflared」を選択して次に進みます。

Cloudflared

トンネル名を入力する欄が表示されます。任意の名前を記入し、「トンネルを保存」をクリックしてください。今回の例では test-tunnel と設定しています。

トンネル作成

cloudflaredのインストールと起動

画面上に、使用しているOSに合わせたインストール手順が表示されます。

私の環境（Mac）では、画面の指示に従って cloudflared をインストールし、ターミナルで以下のコマンドを実行して起動しました。起動後、ダッシュボード画面で「次へ」をクリックします。

cloudflared tunnel run --token xxxxx

トンネル作成

ルーティングの設定

次に、外部からアクセスするためのパブリックホスト名（URL）と、ローカル環境のルーティング先を設定します。

私は alpaca-press.com でAstroのWorkerを動かしているため、同じドメインを選択し、サブドメインには先ほど決めた test-tunnel を指定しました。

ルーティング先のURLには、ローカルで稼働しているWebサイトのアドレスを入力します。私の環境では以下のように設定しました。

URL: http://localhost:4321

ルーティング設定

DNSレコードの自動登録

上記の設定が完了すると、自動的にCloudflareのDNSにレコードが登録されます。

※設定を確認したい場合は、Cloudflareダッシュボードの左メニュー「ドメイン」から対象のドメインを選択し、「DNSレコード」をクリックしてください。

以下のようなCNAMEレコードが追加されているはずです。

名前: test-tunnel
タイプ: CNAME
ターゲット: 先に作成したトンネルID

DNS確認

動作確認とエラー時の対処法

これで基本的な設定は完了です。ブラウザから設定したURL（例: https://test-tunnel.alpaca-press.com ）にアクセスすると、ローカルの開発環境が外部から閲覧できるようになります。

動作確認

独自ドメイン以外で使う場合

今回は独自ドメインを使用して設定を行いましたが、独自ドメインを持っていなくても、Cloudflare Tunnelの機能（Quick Tunnelsなど）を利用して外部公開用のURLを発行することが可能です。

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

実行すると以下のようなメッセージが出るので、表示されているURLにアクセスすればOKです。

動作確認

その際に、astro.config.tsのvite.server.allowedHostsには.trycloudflare.comを設定してください。

ローカル開発時のテストや、他のメンバーへのプレビュー共有などに非常に役立つので、ぜひ活用してみてください。