最終更新日:
Mac版XAMPPでドメインを設定してローカル環境を作る手順
こんにちは。五平餅くんです。
普段ローカルでサイトを構築するときはMacに特化したローカルサーバー「MAMP」を使うのですが、会社がWindows環境を推奨している場合など、時々会社の都合によってはWindowsに特化したローカルサーバー「XAMPP」をMacで使わなければいけないことがあります。
MacでXAMPPを使えるようにする方法は、他の方がたくさん書かれているので、もしよろしければ読んでいただければと思います。
【初心者向け】MacにXAMPPをインストールする方法から使い方まで解説!
今回は、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 Address | Hostname |
---|---|
127.0.0.1 | local.goheymochikun.com(ドメイン名) |
入力が完了したら、再度鍵をロックしてアプリを閉じます。
ファイルで変更する場合
hostsファイルの編集方法は、↓の記事がわかりやすいです。
[共通] hostsファイルの編集(MacOSのPCの場合)
「「hosts」を編集して上書き保存」の手順では、↓のように記述してください。
127.0.0.1 local.goheymochikun.com(ドメイン名)
※IP Addressとドメイン名の間に半角スペースが必要になります。
手順6:Mac再起動
Hostsを記憶させるために、Macを再起動します。
手順7:XAMPPを再起動
XAMPPを再起動します。
①「Stop All」をクリック
②「Start All」をクリック
手順8:ブラウザで確認
「http://local.goheymochikun.com」にアクセスします。
無事に表示されていたら、XAMPPでのドメイン設定は完了です!
なお、他にもドメインを追加したい場合は、新しいドメイン名にて手順1から再度同じように行っていただければOKです。
今回は、MacでXAMPPを設定する方法についてお話ししました。
MacでXAMPPを使わなければいけないときは、ぜひ参考にしていただけますと幸いです!
今回は以上になります。
最後まで読んでいただきありがとうございました!