最終更新日:

Mac版XAMPPでドメインを設定してローカル環境を作る手順

Mac版XAMPP設定方法

こんにちは。五平餅くんです。

普段ローカルでサイトを構築するときはMacに特化したローカルサーバー「MAMP」を使うのですが、会社がWindows環境を推奨している場合など、時々会社の都合によってはWindowsに特化したローカルサーバー「XAMPP」をMacで使わなければいけないことがあります。

MacでXAMPPを使えるようにする方法は、他の方がたくさん書かれているので、もしよろしければ読んでいただければと思います。

【初心者向け】MacにXAMPPをインストールする方法から使い方まで解説!

https://dezanari.com/mac-xampp-install/

今回は、Mac版のXAMPPでドメインを設定してローカル環境を作る手順についてお話します。

Mac版XAMPPで独自ドメインを設定する手順

今回は、「local.goheymochikun.com」というドメインを作る想定でお話ししていきます。

手順1:ドメインのフォルダを作る

まずは、↓のディレクトリにドメイン名のフォルダを作ります。

ディレクトリ:/Applications/XAMPP/xamppfiles/htdocs/

ドメイン名のフォルダを作る

手順2:作ったフォルダの中にindex.htmlを置く

確認用に、先程作った「local.goheymochikun.com」の中にindex.htmlを作成します。

index.htmlのコードは、↓のようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  五平餅くんのローカルサイトです。
</body>
</html>

手順3:httpd.confの編集

以下ディレクトリにある「httpd.conf」を編集していきます。

ディレクトリ:/Applications/XAMPP/xamppfiles/etc/httpd.conf

ドメインを設定できるようにするために、以下の記述を変更します。

変更前:

# Virtual hosts
#Include etc/extra/httpd-vhosts.conf

変更後:

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

手順4:httpd-vhosts.confの編集

続いて、「httpd-vhosts.conf」というファイルを編集していきます。

以下ディレクトリに、httpd-vhosts.confがあります。

ディレクトリ:/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

このファイルの一番下に、↓の記述を追加します。

<VirtualHost *:80>
  DocumentRoot "/Applications/XAMPP/htdocs/local.goheymochikun.com"
  ServerName local.goheymochikun.com
  <Directory "/Applications/XAMPP/htdocs/local.goheymochikun.com">
    Require all granted
  </Directory>
</VirtualHost>

「local.goheymochikun.com」という部分がドメイン名になります。

設定するドメインに合わせて「local.goheymochikun.com」(3箇所全て)を変更してください。

手順5:hostsの編集

続いて、hostsファイルというものを変更していきます。

2通りの方法がありまして、「アプリで変更する方法」と「ファイルで変更する方法」があります。

アプリで変更する方法

サイトから「HOSTS」アプリをダウンロードします。

https://permanentmarkers.nl/software.html

ダウンロードが完了したら、まずは左下の鍵ボタンをクリックしてMacのパスワードを入力し、鍵を外してください。

左下の鍵ボタンをクリックして鍵を外す

その後、「+」ボタンを押したのち、下記のように入力します。

「+」ボタンを押したのち、IP Adressとドメイン名を入力
IP AddressHostname
127.0.0.1local.goheymochikun.com(ドメイン名)

入力が完了したら、再度鍵をロックしてアプリを閉じます。

再度鍵をロックする

ファイルで変更する場合

hostsファイルの編集方法は、↓の記事がわかりやすいです。

[共通] hostsファイルの編集(MacOSのPCの場合)

https://faq.wadax.ne.jp/s/article/1527

「hosts」を編集して上書き保存」の手順では、↓のように記述してください。

127.0.0.1 local.goheymochikun.com(ドメイン名)

※IP Addressとドメイン名の間に半角スペースが必要になります。

手順6:Mac再起動

Hostsを記憶させるために、Macを再起動します。

手順7:XAMPPを再起動

XAMPPを再起動します。

①「Stop All」をクリック

「Stop All」をクリック

②「Start All」をクリック

「Start All」をクリック

手順8:ブラウザで確認

「http://local.goheymochikun.com」にアクセスします。

XAMPPでドメイン設定したサイトをブラウザで確認

無事に表示されていたら、XAMPPでのドメイン設定は完了です!

なお、他にもドメインを追加したい場合は、新しいドメイン名にて手順1から再度同じように行っていただければOKです。


今回は、MacでXAMPPを設定する方法についてお話ししました。

MacでXAMPPを使わなければいけないときは、ぜひ参考にしていただけますと幸いです!

今回は以上になります。

最後まで読んでいただきありがとうございました!

関連記事

人気記事