Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away