ご存知の方はご存知でしょうが、ちょっとつまずく時があるのでメモしておきます。
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
のようにしてアクセスするだけです(ポート番号はサーバによって変わるので注意)。