MAMPのhtdocs以外の場所に複数のローカル開発環境を作る方法!!

投稿日 2023年9月22日
更新日 2023年10月5日
著者ゆきしょう
カテゴリー WEB制作

今回はMAMPのhtdocs以外の場所に複数のローカル開発環境を作る方法をご紹介します。

これまでいろいろ試しましたが一番シンプルで使いやすいです。

同時に複数のサイトを制作していても管理しやすくて重宝します。

MAMP（マンプ）とは、Macintosh、Apache、MySQL、PHPの頭文字をとった略称で、MacOSやWindowsのコンピューターにWeb開発を行うためのローカル開発環境を構築できるソフトウェアです。

最低限必要な開発環境を簡単に整えることができます。

Windowsの場合はXAMPPが使用されることが多いです。

PHPだけではなく、WordPressサイトでのWEB制作、PHPフレームワークのLaravelを使ったWEB制作でも利用できます。

無料版と有料版がありますが、無料版で構築できます。

通常は/Applications/MAMP/htdocsだけで動かすので、１つのローカルホストしか使用できません。

httpd.confを編集する

最初はhttpd.confを編集します。

編集方法はいろいろありますが、Visual Studio Code（Microsoft社が開発している無償のコードエディタ）がおすすめです。

ファイルの場所は/Applications/MAMP/conf/apache/httpd.confです。

バージョンによって記述箇所が違いますが、このファイルの下の方に次の記述があります。(およそ613行目あたり)

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

2行目の先頭の#を削除してコメントアウトを解除します。

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

httpd-vhosts.confを編集する

次にhttpd-vhosts.confを編集します。

ファイルの場所は/Applications/MAMP/conf/apache/extra/httpd-vhosts.confです。

以下がデフォルト時です。

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

このファイルの一番下に作成したいローカルホストを記述します。

Listen 8001

<VirtualHost *:8001>
    DocumentRoot "/Users/userId/localhosts/localhost_8001/"
    <Directory "/Users/userId/localhosts/localhost_8001/">
        AllowOverride All
    </Directory>
</VirtualHost>

この場合は、http://localhost:8001/にアクセスすると、/Users/userId/localhosts/localhost_8001/にあるファイルが表示されます。

今回はポート番号の8001番を使うので、一番上にListen8001、その下に<VirtualHost *:8001>と記述します。

その下のDocumentRoot””と<Directory “”>の“”の中にはMacの「Users(ユーザー)」から「ローカルで使用するフォルダ」までのパスを書きます。

userIdの部分は管理者のフォルダです。

localhostsとlocalhost_8001の部分は自分で作成したフォルダです。

ポート番号はすでに使われているものを割り当ててしまうとMacの挙動がおかしくなりますので気をつけてください。

8000番台が良いでしょう。

hostsファイルを編集する

次にhostsファイルを編集します。

Finder→アプリケーション→ユーティリティの中にターミナルがあります。

ターミナルはよく使うのでDockに入れておくと便利です。

ターミナルを開いたら、以下を入力して「enter」を押してください。

sudo vi /private/etc/hosts

パスワードの入力欄が出てくるのでMacにログインする時のパスワードを入力してください。

ターミナル内に以下のようなhostsファイルの画面が表示されます。

起動時は編集することができません。

キーボードの「i」を押すと左下にINSERTという表示が出ます。

矢印のキーを使いながらhostsファイルの記述の一番下までいきます。

今回は127.0.0.1 demo.localhostと記述します。（IPアドレス半角スペース URL）

hostsファイルの設定方法は、「IPアドレス（127.0.0.1）」を記述し、その横に「ドメイン名」を記載するだけです。

demo.localhostの部分は任意のURLで大丈夫です。

ちなみにIPアドレスの127.0.0.1は「ループバックアドレス」というものの1つで、自分のパソコンを見に行くというルールが組み込まれています。

記述したら「control + C」を押します。

最後に「:wq」と打てばhostsファイルが保存されます。

以上の設定ができたらMAMPを再起動してください。

新しく設定したローカルホストhttp://localhost:8001/にファイルを置いて正しく設定されているか確認してみてください。

例えば以下のように記述すれば（8001、8002、8003)の3つのローカルホストを使用できます。

これ以上増やすことも可能です。

Listen 8001

<VirtualHost *:8001>
    DocumentRoot "/Users/userId/localhosts/localhost_8001/"
    <Directory "/Users/userId/localhosts/localhost_8001/">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen 8002

<VirtualHost *:8002>
    DocumentRoot "/Users/userId/localhosts/localhost_8002/"
    <Directory "/Users/userId/localhosts/localhost_8002/">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen 8003

<VirtualHost *:8003>
    DocumentRoot "/Users/userId/localhosts/localhost_8003/"
    <Directory "/Users/userId/localhosts/localhost_8003/">
        AllowOverride All
    </Directory>
</VirtualHost>

ローカルホストを3つ作成した全体の記述例が以下です。

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

Listen 8001

<VirtualHost *:8001>
    DocumentRoot "/Users/userId/localhosts/localhost_8001/"
    <Directory "/Users/userId/localhosts/localhost_8001/">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen 8002

<VirtualHost *:8002>
    DocumentRoot "/Users/userId/localhosts/localhost_8002/"
    <Directory "/Users/userId/localhosts/localhost_8002/">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen 8003

<VirtualHost *:8003>
    DocumentRoot "/Users/userId/localhosts/localhost_8003/"
    <Directory "/Users/userId/localhosts/localhost_8003/">
        AllowOverride All
    </Directory>
</VirtualHost>

以上、MAMPのhtdocs以外の場所に複数のローカル開発環境を作る方法をご紹介しました。

とても便利ですので試してみてください。