作りかけのサイトを、別のパソコンやスマホから見る

「スマホでどう見えるか」を確認したい

サイトを作っていると、必ず「これ、スマホだとどう見えるんだろう」という場面が来ます。ブラウザの画面を狭めて確かめる方法もありますが、実機で見るのが一番確実です。

けれど、開発中のサイトは自分のパソコンの中でしか動いていません。世の中に公開する（デプロイする）前に、他のデバイスから見る方法が欲しくなります。

Tailscaleをインストールしておくと、自分の持っているデバイス同士が、インターネットを経由しつつも自分だけのプライベートな回線でつながった状態になります。世の中には公開されていないのに、自分のiPhoneから自分のMac miniの中を覗ける、というわけです。

これを使えば、開発中のサイトを他のデバイスから確認できます。世界に公開する必要はありません。

開発サーバーは、初期設定だと「自分のパソコンの中からのアクセスしか受け付けない」状態で起動します。これを外からも受け付けるように変えます。Astroの場合はこうです。

npm run dev -- --host 0.0.0.0

0.0.0.0は「どこからのアクセスでも受け付ける」という意味です。毎回打つのが面倒なので、package.jsonに短い名前で登録しておくと楽です（aliasという救世主と同じ発想）。

Tailscaleは、デバイスごとに固定の名前（MagicDNS名）を付けてくれます。別のデバイスのブラウザで、その名前とポート番号を打つだけです。

http://（自分のパソコンのTailscale名）:4321

これで、スマホでも別のパソコンでも、作りかけのサイトが表示されます。

手順どおりにやっても、真っ白な画面に「Blocked request」とだけ表示されることがあります。これは開発サーバーの安全装置で、知らない名前でアクセスされたので念のため断ったという状態です。

設定ファイルに「この名前は許可していい」と書いてあげれば通ります。Astro（Vite）の場合はastro.config.mjsにこう書きます。

server: {
  allowedHosts: ['.ts.net'],
}

.ts.netはTailscaleの名前の末尾に必ず付く部分なので、こう書いておけば自分のデバイスすべてに対応できます。

エラーメッセージだけ見ると壊れたように思えますが、これも承認地獄と同じで、安全装置がちゃんと働いている証拠です。

公開する前に実機で確認できると、安心感がまるで違います。Tailscaleはスマホから自分の開発機に繋ぐような使い方が有名ですが、こういう地味な場面でもかなり効いてきます。