Posted at

Macのローカルサーバにアクセスする2つの方法とサーバの起動例

ご存知の方はご存知でしょうが、ちょっとつまずく時があるのでメモしておきます。

IPアドレス直叩きとMacの共有機能を使った方法です。


はじめに

Macと対象端末を同一のローカルネットワークに接続します。

いつの間にか切り替わっている時があるので、アクセスできない場合は真っ先に確認しましょう。

iPhoneではコントロールセンター内のWiFiアイコンを長押しすることで接続先を確認できます。


Macの共有機能を利用する場合

対象端末はiOSに限定されますが、IPアドレスが変更されてもアクセスできるため、管理しやすい方法です。

まず、 システム環境設定共有(コンピュータ名の)編集ローカルホスト名 に任意の名前を設定します。

ここでは hanakohanako.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 のようにしてアクセスするだけです(ポート番号はサーバによって変わるので注意)。