【MAMP】ローカルと本番のルートパスを揃えて「画像が表示されない」エラーをなくす方法

「自分のパソコン（MAMP）では正常に表示されていたのに、インターネットにアップロードしたら画像だけが消えてしまった」「デザインが崩れてしまった」—これは、Webサイトを公開する際、多くの人が経験する最も多いエラーの一つです。

この原因のほとんどは、指定した「ファイルの置き場所（ルートパス）」が、パソコンの中と、インターネット上のサーバーとで食い違っていることにあります。

この記事では、「画像が表示されない」エラーを起こさないため、MAMPを使った開発でローカル環境と本番環境の「ファイルの置き場所」を正しく統一するための具体的な設定方法を、初心者の方にも迷わずできるように解説します。

一度この設定を済ませてしまえば、公開時のチェックが不要になり、作業効率もあがります！それでは、みていきましょう。

なぜ本番サイト移行で「画像が表示されない」エラーが起こるのか？

この問題は、MAMPと本番サーバーで「ファイルの場所（パス）」の指定の仕方がズレているために起こります。

 MAMPがなにかわからない・初期設定をしていない方はこちらの記事も参考にどうぞ

あわせて読みたい

【Mac】ローカルでワードプレス構築ができるMAMPインストール手順と初期設定方法 WordPressの開発やテストをローカル環境で行いたいとき、ありますよね。 テスト環境をサーバー上に構築する方法もありますが、管理が大変になったり、ちょっとした修正…

【ローカル環境（MAMP）の場合】

MAMPでサイトを制作する際、サイトフォルダ（例：test-site）はhtdocsの中に置かれ、アクセスURLは通常

http://localhost:8888/test-site/となります。

このとき、ブラウザは**/**（ルート）を太字の部分、「/test-site」というサブフォルダだと認識しています。

例として、logo.pngを表示するためのパスは、サブフォルダ名を含めた以下のような形になります。

<img src="/test-site/assets/images/logo.png">

【本番環境（サーバー）の場合】

一方、本番サーバーではサイト全体がドメイン直下に置かれます。

https://test-site.co.jp

このとき、ブラウザは**/**（ルート）をドメイン直下の全体だと認識しています。

【エラーが起こる原因は「場所の勘違い」】

ローカルで動いていたパス（サイト名を含む）をそのまま本番サーバーにアップロードすると、ブラウザは「本来存在しないはずの場所」を探しに行ってしまいます。

このように、本番サーバーのファイル構成には「/test-site」というフォルダは存在しないため、画像ファイルが見つからず、「画像が表示されない」というエラーになってしまうのです。

解決方法①：環境判定でルートを切り替える（おすすめ）

PHPの $_SERVER['HTTP_HOST'] で「localhost」かどうか判定して、ルートパスを自動的に分けます。

例）共通設定ファイルを作る（例：config.php）

<?php
// 環境ごとにベースパスを切り替える（MAMP環境ならサブフォルダ、本番なら直下）
if (strpos($_SERVER['HTTP_HOST'], 'localhost') !== false) {
    // ローカルMAMP環境
    $root = $_SERVER['DOCUMENT_ROOT'] . '/test-site';
    $base_url = 'http://localhost:8888/test-site';
} else {
    // 本番環境
    $root = $_SERVER['DOCUMENT_ROOT'];
    $base_url = 'https://test-site.co.jp';
}
?>

各ページの読み込み

作成したconfig.phpを、すべてのPHPファイルの冒頭で読み込みます。

<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/config.php');
include($root.'/head.php');
?>

画像パス指定もこう書けます

<img src="<?php echo $base_url; ?>/assets/images/image-01.jpg" alt="テスト画像">

これなら、ローカルでも本番でも同じファイル構成・記述のまま動作します。

あわせて読みたい

【ナノバナナ】画像からフィギュア化｜VTuber風アニメも簡単生成！かわいい3Dモデル手順＆プロンプト公開 最近SNSでよく見かける「お気に入りの画像をフィギュア化した投稿」。 一目見てとても可愛かったので私も実際作ってみたい！と思い今回フィギュア化チャレンジしてみま…

解決方法②：仮想ホスト設定で本番構成に合わせる（安定志向の方向け）

この方法は、MAMPのApache設定を変更し、http://test-site.local/ のようなオリジナルの開発用URL（仮想ホスト）を作成します。

こうすることで、ローカル環境でも本番サーバー（例：http://test-site.co.jp/）と完全に同じファイルのルート構成を再現できます。

メリットと注意点

• メリット:
  開発環境と本番環境が完全に一致するため、パスに関するエラーを根本的になくせます。
• 注意点:
  MAMPの設定変更が必要なため、方法①（PHPの環境判定）に比べて環境構築の手間が少し増えます。

ゴール

ローカル環境で

http://localhost:8888/test-site/から、

http://test-site.local/でアクセスできるようにする。

 http://test-site.local/
にアクセスすると、
MAMPの /Applications/MAMP/htdocs/test-site/ フォルダのサイトが開くようにします。

事前準備：MAMP のポートを変更する

1. MAMP を開く
2. メニューの ⚙️マークPreferences（環境設定） → Ports
3. Set Web & MySQL ports to: 80&3306 をクリック
   または手動で： Apache Port → 80 MySQL Port → 3306（またはそのまま）
4. 保存 → MAMP を再起動

もし「This port is in use（使用中）」と出たら
システム設定 → 一般 → 共有 → AirPlayレシーバー → オフ にして再トライ

ローカルドメイン設定の手順

STEP

フォルダの確認

まず、MAMPのWebサイト置き場を確認します。

Finderでこのパスを開いてください：

/Applications/MAMP/htdocs/

その中に自分のサイトのフォルダ（例：test-site）があることを確認。

/Applications/MAMP/htdocs/test-site/

STEP

Apacheの設定ファイルを開く

Apache（アパッチ）という全体の基本設定を変更します。

1. Finderで
   /Applications/MAMP/conf/apache/
   に行く。
2. 中にあるファイル
   httpd.conf
   を右クリック → 「テキストエディタで開く」（例：Visual Studio Code、またはテキストエディット）

STEP

VirtualHost設定を有効化

仮想ドメインを使うには、Apache（アパッチ）で「仮想ドメイン設定をONにする」作業をしていきます。

開いたファイルで
「httpd-vhosts.conf」 という行を探します。
（⌘＋F で検索してOK）

 こんな感じの行があります：

#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

→ 先頭の「#」を削除してコメントを外します。

Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

保存して閉じます。
（これで「仮想ドメイン設定を読み込む」ようになります）

STEP

手順②：仮想ドメイン設定ファイルを編集（メインの設定）

次に、仮想ドメインの設定ファイルを開きます。

パスはこちら：

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

このファイルを同じようにエディタで開き、
ファイルの一番下に、サイトごとの設定を追加します。

例として「test-site」を追加 

<VirtualHost *:80>
    ServerName test-site.local
    DocumentRoot "/Applications/MAMP/htdocs/test-site"
    <Directory "/Applications/MAMP/htdocs/test-site">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

ポイント

• DocumentRoot と <Directory> の中のパスは、サイトフォルダの場所に合わせる。
• "test-site" の部分は自分のフォルダ名に合わせてOK。

保存して閉じます。

（追加したいときはこの <VirtualHost> ブロックをコピーして増やすだけ）

補足

元々他のテストサイトなど動かしてる場合、ポート番号が80に変更されている状態

ポート番号8888の例：

http://localhost:8888/test-site02/

→ポート：8888へ切り替えしないと見れなくなるため、本番用に追記するまでもないサイトがあれば以下の記述も追加しておくと便利です！

# ①「localhost 用」デフォルトルート
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "/Applications/MAMP/htdocs"
    <Directory "/Applications/MAMP/htdocs">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

• http://localhost:80/test-site02/
• http://localhost/test-site02/

ポート：8888へ切り替えせずとも、いずれかでアクセスできるようになります！

STEP

Macのhostsファイルを編集する

「test-site.local = 自分のパソコン（127.0.0.1）」というルールを
Macのシステムに教える作業です。

 ターミナルを開く

• Finder右上の検索バー（Spotlight）または（⌘＋Space）で「ターミナル」と入力して開きます。

  次のコマンドをコピーして貼り付け、Enter

sudo nano /etc/hosts

sudo は「管理者権限で実行する」コマンドです。
パスワードを聞かれたら、Macのログインパスワードを入力します（入力中は見えません）。

 ファイルに以下を追加

127.0.0.1   test-site.local

 保存と終了
保存と終了のショートカットは少し独特です👇

• control + O（オー） → Enter（保存）
• control + X（終了）

STEP

MAMPを再起動

MAMPアプリを開いて「Stop Servers」→「Start Servers」をクリック。

STEP

確認！

• ブラウザでhttp://test-site.local/ を開く

それぞれのフォルダの中身が見えたら成功！

補足（覚えておくと安心）

「test-site.local ＝ 自分のPCの中」と教えてる感じです 

• /etc/hosts は「どのドメインをどこに接続するか」をMac全体で管理してるファイル。
• 127.0.0.1 は「自分自身（ローカルPC）」という特別なIPアドレスです。

まとめ

この記事で解説した通り、テスト環境から本番にもっていったときに「画像が消える」「画像が見えなくなった」エラーのほとんどは、パソコン（MAMP）で指定した「ファイルのスタート地点（ルートパス）」と、インターネット上のサーバーが考える「スタート地点」がズレているせいで起こります。

一度この設定を済ませてしまえば、公開前にパスを直す面倒な作業が不要になり、開発の効率が上がります。

解決方法は主に以下の2つ！

1. PHPで自動切り替え！（一番簡単でおすすめ）
   • やり方： PHPのコードを使って、「これはローカル環境だね」「これは本番環境だね」と自動で判断させ、画像などへのパスを自動で切り替える方法です。
   • メリット： コードに $base_url のような変数を使うだけで、ローカルでも本番でも動くようになります。
2. 仮想ホストで完全に本番に合わせる！（安定感バツグン）
   • やり方： MAMPの設定を変えて、ローカルでも本番サイトと同じURL（例：http://test-site.local/）でアクセスできるように環境自体を改造する方法です。
   • メリット： 設定の手間は少し増えますが、環境が完全に一致するため、パスに関するエラーが原理的になくなります。

自分のスキルや作りたいものに合わせて、どちらかの方法を試して実際に設定してみてください。では、またお会いしましょう！