npm run devで立てたローカルサーバーにスマートフォンからアクセスする - Suzu Mono-gram

astro-notion-blogの開発では、npm run devでローカルサーバーを起動し、ブラウザからhttp://localhost:3000を開くことで、開発用のブログページにアクセスすることができます。

astro-notion-blog開発者のおとよさんに、カバー画像とアイコンはビルド時に読み込まれると教えていただきました。ビルドを実行すると読み込まれたので、問題解決です。

アクセス時にページを生成するので割と重いのですが、ローカルでの変更が即座に反映され、見た目も同じなので、このままでも十分カスタマイズが可能です。ブラウザの開発者ツールを使えばスマートフォンサイトでの表示を確認することもできます。

しかし、たったの2画面で沢山ウィンドウを並べて作業をやるのが面倒になってきたので、iPhoneでこのローカルサーバーにアクセスできたら便利だと思い方法を探しました。

Windows ローカルサーバー iPhone みたいな検索語句で調べまくりました。

ファイアウォールやプロキシの設定だのなんだのが出てきたんですが良く分からず、結局成功しませんでした。

WindowsのIPアドレスを調べ、同一ネットワークに接続しているiPhoneにIPアドレス:8000と打ち込めば接続できるというのはAstroのこれも同じなんですかね。

npm run devを実行した時に、ローカルサーバーのアドレス(http://localhost:3000)の下にNetwork: use --host to exposeというのが出ていたので、これが気になりバカ正直に

Local    http://localhost:3000/
Network  use --host to expose

で検索したところ、出てきた情報でうまくいきました。

BTW
npm run dev --host doesn't work.
npm run dev -- --host works.

これです。つまり、npm run devではなくnpm run dev --hostでもなくnpm run dev -- --hostと入力してローカルサーバーを起動することで、同一ネットワークに接続している別の端末からもアクセス可能なリンクができます。

この場合は192.168.1.61:3000/のみiPhoneから接続できました。

ℹ️

接続に使用するネットワークが、Windows上でプライベートネットワークとして設定されている必要がありました。

Windowsのブラウザでページを表示した後、QRコードで共有する機能を使ってiPhoneに読ませるのが一番楽で早いのでおすすめです。