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

2023.07.16最終更新日：2023.09.17

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

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

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

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

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

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

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

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

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

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

手順１：ドメインのフォルダを作る

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

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

手順２：作ったフォルダの中に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>

手順３：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

手順４：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」（３箇所全て）を変更してください。

手順５：hostsの編集

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

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

アプリで変更する方法

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

https://permanentmarkers.nl/software.html

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

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

IP Address	Hostname
127.0.0.1	local.goheymochikun.com（ドメイン名）

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

ファイルで変更する場合

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

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

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

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

127.0.0.1 local.goheymochikun.com（ドメイン名）

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

手順６：Mac再起動

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

手順７：XAMPPを再起動

XAMPPを再起動します。

①「Stop All」をクリック

②「Start All」をクリック

手順８：ブラウザで確認

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

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

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

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

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

今回は以上になります。

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

環境設定