MAMP環境で作ったサイトをPC以外の端末から見たい - 29歳からエンジニア目指すブログ

MAMP環境を使ってます。

開発段階でサイトをPC以外の端末から覗きたい時ってありますよね。

自分はスマホで見られるように設定しています。

その設定を見ていきます。

【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7

まず同じWi-Fiに設定してください。

このWi-FiのIPアドレスをApacheのhttpd.confの設定で許可していく流れです。

念のためIPアドレスの確認方法です。

画面上のメニューバーのリンゴマークから「システム環境設定」>「ネットワーク」と表示すると、上の方にIPアドレスが書いてあります。

「●●●.●●●.●.●●」のような数字の羅列です。

Applications/MAMP/conf/apache ディレクトリの中のhttpd.confファイルをエディターで開きましょう。

中にいろいろな設定があります。

以下のように設定しましょう。

#Listen 12.34.56.78:80 // 既存の行
Listen 8888 // 既存の行
Listen ●●●.●●●.●.●●:8888 // 追加する行

「●●●.●●●.●.●●」は自身のIPアドレスに置き換えてください。

Apacheの設定を反映させるため、MAMPを再起動してください。

起動しましたら、タブレット端末やスマホのWebブラウザで「●●●.●●●.●.●●:8888」でローカル開発環境にアクセスすることができるようになります。

MAMPのアプリケーションのページですと「●●●.●●●.●.●●:8888/MAMP/」でアクセスできます。

これでWi-Fiに接続していればスマホでも何でもサイトを見ることができます。

試してみてください。

たまにスマホのキャッシュが残っていると、うまく接続できないです。

キャッシュを消してアクセスすると、すんなり入れるかと思います。

以上となります。

割と簡単な設定でPC以外の端末での閲覧を許可できます。

デザインを見たりする際に必要になるので、使ってみてください。

ありがとうございました。