【決定版】VSCode Live ServerとMAMPの連携！ローカル開発を快適にする方法。

投稿日：2025年11月15日

前回の記事では、MAMP環境でSSI（Server Side Include）を使う方法について紹介しました。
普段、エディターは VSCode（Visual Studio Code） を使用していますが、VSCodeのプラグイン「Live Server」は残念ながらSSIをサポートしていません。

「ローカル環境でもSSIを使えないだろうか？」と思い、いろいろと検証してみたところ、Google Chromeの拡張機能「Live Server Web Extension 」を利用することで、MAMP環境下でもLive ServerとSSIを併用できることがわかりました。

この記事では、その実装手順をステップごとに解説します。
検証環境は macOS Tahoe 26.0.1（25A362）、MAMP Mac版（Versiion7.2(2737)）になります。

「LiveServer」のインストール「LiveServer」の設定「Live Server Web Extension」のインストール MAMPとVSCode動作検証「LiveServer」の設定その2

「LiveServer」のインストール

▲VSCode に Live Server をインストールします。

「LiveServer」の設定

▲インストールしたら歯車をクリックし設定を開きます。

▲Settings:Proxyを上図のように設定します。
enable: true
プロキシ機能を有効にするかどうかを指定。
true にすると、Live Server がリクエストを指定したプロキシサーバー（この場合 MAMP などのローカルサーバー）に転送します。
これを有効にしないと、Live Server は単に静的HTMLファイルをローカルで配信するだけになります。
つまり PHP などのサーバーサイドスクリプトは動作しません。

baseUri: /
Live Server が処理する際のベースとなるパス（URI）を指定。
/ はルートディレクトリを意味します。

proxyUri: http://127.0.0.1:8888
実際に処理を行うサーバー（プロキシ先）を指定。
MAMP などのローカルサーバーのアドレスを指定します。
MAMP の Apache が http://localhost:8888 で動いている場合、この設定によって Live Server がそのサーバーにリクエストを転送します。
つまり、Live Server → MAMP (Apache+PHP) のルートを作るわけです。
具体的には、ブラウザで http://127.0.0.1:5500/index.php にアクセス（Live Server のポート）Live Server は PHP を直接処理できないので、proxyUri に指定された http://127.0.0.1:8888/index.php にリクエストを転送。
MAMP が PHP を処理して HTML を返す。
Live Server がそれをブラウザに返す。
という流れです。

Setting:Use Local Ext （正式には liveServer.settings.useWebExt）の You have to install a browser extension. That will be works for your dynamic pages(like PHP). （訳：ブラウザー拡張機能をインストールする必要があります。それを使えば、PHPのような動的ページでも動作するようになります。）にチェックを入れます。

VS Code の Live Server は、通常は静的ファイル（HTML/CSS/JS）をローカルサーバーで動かすだけの拡張機能です。
しかし、index.php のような動的ページ（サーバーサイド言語）は Live Server 自体では処理できません。
ここで登場するのが、Live Server Web Extension（ブラウザー拡張機能）です。
Use Local Ext は useWebExt の意味。
liveServer.settings.useWebExt: true
これを true にすると、VS Code の Live Server とブラウザー拡張機能（Live Server Web Extension）を連携させます。

「Live Server Web Extension」のインストール

Google Chromeの機能拡張 Live Server Web Extension をインストールします。

▲Chromeに追加をクリックします。

▲Chromeの右上、機能拡張アイコンから Live Server Web Extension を選択します。

▲Live Reload をオンにします。
I don’t want proxy setup (recommended) （訳：プロキシ設定は不要（推奨））にチェックを入れます。
Actual Server Address に実際に処理を行うサーバー（＝プロキシ先）を入力します。
Live Server Address に Live Server のローカルアドレス http://127.0.0.1:5500/ を入力します。
最後に Apply をクリックします。

Windows11環境で検証していたところ、port:80を使用してましたが、
http://localhot:80と入れると接続できませんでした。
が下図のように、
http://localhotと入力しないと接続できないケースもありました。

ここまでで準備完了です。
一度、MAMPサーバーをSTOPし、再起動。
VSCodeも再起動します。

MAMPとVSCode動作検証

▲VSCodeでプロジェクトを開きます。
必ずエクスプローラーから指定してフォルダを開きます。

▲VSCode右下のPort:5500をクリックします。

▲これまでは Port:5500 でページを表示できていましたが、Settings の Proxy 設定で enable: true に変更したため、「Not Found」と表示されるようになってしまいました。
しかし、Port:5500 で確認するわけではないので、これはこれで大丈夫です。

▲MAMP で指定した port からプロジェクトを開きます。

▲表示されました。
これで VSCode で保存すれば自動的に反映されるようになります。

「LiveServer」の設定その2

上記の「LiveServer」の設定では、他の案件でもport: 5500でNot Foundになってしまいます。
VSCode全体の設定ではなく、対象のディレクトリに対して設定することもできます。

▲Localhostを指定しているディレクトリに.vscodeという不可視フォルダを作ります。
その不可視フォルダ.vscode内にsettings.jsonを作成します。
settings.jsonに以下を記述します。

{
  "liveServer.settings.proxy": {
    "enable": true,
    "baseUri": "/",
    "proxyUri": "http://localhost:8888"
  }

  "liveServer.settings.useWebExt": true,
}

▲先ほどの「Live Server の設定」で指定した内容を、別の JSON ファイルとして用意し、対象のディレクトリに配置する仕組みです。