Astroのローカルサーバーをスマホからアクセスする

Astroの本番サイトでPCではうまく表示されているけれど、スマホだとうまく動いていないということがありました。ただChromeのエミュレーターでは不具合が再現できなかったので、ローカル環境をスマホで確認する必要がありました。

1. PCとスマホのWi-Fi設定を同じにする
2. package.jsonのnpm run devの部分に「—host」オプションを追加する

package.jsonのscriptを以下のように「—host」オプションを付けたscriptsを追加します。
(いつもNetworkに公する必要はないため、devhを追加しています。)

"scripts": {
    "dev": "astro dev",
    "devh": "astro dev --host",
}

NOTE

npxで実行するのであれば、npx astro dev --hostでOKです。

3. Astroのローカルサーバーを起動する

npm run devh

4. スマホからPCのIPアドレスにアクセスする

起動コマンドを実行すると以下のような表示になると思います。
そのうちのNetworkと書かれている方のアドレスにスマホからアクセスすると、ローカルサーバーにアクセスできます。

 astro  v4.7.1 ready in 921 ms

┃ Local    http://localhost:xxxx/
┃ Network  http://192.xxx.xxx.xxx:xxxx/