てくのーと
292 文字
1 分

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

2024-05-15
2024-05-28

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です。

  1. Astroのローカルサーバーを起動する
npm run devh
  1. スマホからPCのIPアドレスにアクセスする

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

 astro  v4.7.1 ready in 921 ms

 Local    http://localhost:xxxx/
 Network  http://192.xxx.xxx.xxx:xxxx/
\てくのーと おすすめ書籍!/

変更に強いコードとはどんなものかが学べます! →感想詳細はこちら!