ご存知の方はご存知でしょうが、ちょっとつまずく時があるのでメモしておきます。
IPアドレス直叩きとMacの共有機能を使った方法です。
はじめに
Macと対象端末を同一のローカルネットワークに接続します。
いつの間にか切り替わっている時があるので、アクセスできない場合は真っ先に確認しましょう。
iPhoneではコントロールセンター内のWiFiアイコンを長押しすることで接続先を確認できます。
Macの共有機能を利用する場合
対象端末はiOSに限定されますが、IPアドレスが変更されてもアクセスできるため、管理しやすい方法です。
まず、 システム環境設定 → 共有 → (コンピュータ名の)編集 → ローカルホスト名 に任意の名前を設定します。
ここでは hanako ( hanako.local )としました。
ローカルサーバを起動する
共有設定が済んだらローカルサーバを起動します。ここでは個人的に良く使うサーバの起動コマンドを取り上げてみました。
なお、ローカルサーバのデフォルトのホスト名は localhost ですが、このままでは端末からアクセスできません。先に設定した hanako.local とする必要がある点に注意してください。
PHP
MacにビルトインされているPHPのデバッグサーバを使うケースです。これが一番簡単ですね。
$ php -S hanako.local:8080 -t /Users/hanako/www/
webpack
webpack-dev-server では --host と --port でホスト名とポート番号を指定できます。
$ webpack-dev-server --content-base ./dist --watch-content-base --hot --inline --open --open-page index.html --host hanako.local --port 8080
Parcel
Parcelでは最近追加された --hmr-hostname でホスト名を、 --port でポート番号を指定できます。
$ parcel ./src/index.html --hmr-hostname hanako.local --port 8080
ポート番号では似たようなパラメータに --hmr-port がありますが、本件で使うのはこちらではありません。
React
create-react-apps ではあらかじめ環境変数に設定する形になります。
$ HOST="hanako.local" PORT=8080 react-scripts start
Vue
Vue CLIの vue-cli-service は内部的には webpack-dev-server らしく、設定の仕方も同じなんですが…
$ vue-cli-service serve --host hanako.local --port 8080
ネットワークエラーが出て起動できませんでした。正直Vue CLIは良くわからないので頑張ってください(ぶん投げ)。
ローカルサーバに接続する
後はもうお察しの通り、端末のブラウザから http://hanako.local:8080 にアクセスするだけです。
油断すると www.hanako.local のように www. を頭に付けられる時があるのでお気を付けください。
IPアドレスにアクセスする場合
MacのIPアドレスに直接アクセスする方法です。
言うまでもなく、あらゆる端末で利用できるのが強みですね(Kindleからでもアクセスできます)。
まず、下記コマンドでMacのIPアドレスを取得しましょう。
$ ipconfig getifaddr en0
機能しない場合は、下記コマンドの出力内にある en0: の inet 横に表記されているアドレスを探してください。
$ ifconfig
私の環境では 192.168.100.100 でした。
後はローカルサーバをデフォルト設定のまま起動し、 http://192.168.100.100:8080 のようにしてアクセスするだけです(ポート番号はサーバによって変わるので注意)。