macで開発環境構築、Apacheでローカル確認!

macでコーディングなどをする時にApacheでローカル確認をできるように設定をしてるのですが、忘れたりするのでメモです。

スポンサーリンク

Apacheでローカル確認するための設定

注意事項

  • 責任を取りかねるので、できればファイルはバックアップを取っておきましょう!
    間違えても元ファイルは存在するのでわかる方は作らなくてもいいですが、基本的にわけがわからなくなった時用に取っておいたほうがいいです。
    バックアップ方法は作業するテキストファイルをただコピペでデスクトップなどに保存しておけばいいと思います。
    復元はコピペでとっておいたファイルを作業してわけがわからなくなったファイルに上書きすれば元に戻せるので簡単です!
  • 前提として{username}と言う記述が出てくるのですが、{username}にはユーザー名を入れます
    確認方法は「Sitesフォルダの作成」の記事にある画像内の「ここにユーザー名が書いてある〜」の部分がユーザー名です。
  • 開発環境を簡潔に設定できるように箇条書き程度に書いているので、細かい説明は省いていますのでご了承ください。
  • テキストファイルを保存するときはスーパーユーザー権限が必要なのでsudoを使って保存してください、パスワードを聞かれるのでPCを開くときのパスワードで問題ないはずです。

Sitesフォルダの作成

Sitesフォルダを作っていきたいと思います。
ユーザーディレクトリが表示されてない方もいるかもしれないので、そこから始めていきたいと思います。
下記の画像のようにFinderの環境設定を押して、サイドバーを選びます。
するとユーザー名が書いてあるので、その部分にチェックを入れるとサイドバーにユーザーディレクトリが表示されます。

ユーザーディレクトリを表示できたら、下記の画像のように①のユーザーディレクトリ内でフォルダを作ってSitesと名前を変更して作成完了です。

httpd.confの編集

httpd.confの編集をします。
httpd.confファイルはWebサーバの動作に関する情報を記述したテキストファイルで、Apacheの主な設定はここで記述します。

下記の通りmacの上にある「移動」からフォルダへ移動を選択します。
選択したら/etc/と入力してetcディレクトリまで移動します。

移動できたら、etcディレクトリ内の/apache2/httpd.confを開きます。
開いたら下記部分を修正していきましょう。

108行目あたり#を削除

#LoadModule include_module libexec/apache2/mod_include.so

168行目あたり#を削除

#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

174行目あたり#を削除

#LoadModule userdir_module libexec/apache2/mod_userdir.so

176,177行目あたり#を削除

#LoadModule rewrite_module libexec/apache2/mod_rewrite.so
#LoadModule php7_module libexec/apache2/libphp7.so

190行目あたり下記の通り編集

User _www
Group _www

User _wwwの「_www」をユーザーネームに変更。
tanaka.tarouなら
User tanaka.tarouにします。

227行目あたり下記の通り変更

<Directory/>
 AllowOverride none
 Require all denied
</Directory>

これを下記のように記述する。

<Directory/>
 AllowOverride all
 Require all granted
 Options Indexes FollowSymLinks
</Directory>

448,449行目あたり#を削除

#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml

502行目あたり#を削除

#Include /private/etc/apache2/extra/httpd-multilang-errordoc.conf

511行目あたり#を削除

#Include /private/etc/apache2/extra/httpd-userdir.conf

517行目#を削除

#Include /private/etc/apache2/extra/httpd-vhosts.conf

できたら保存して終了です!

{username}.confの編集

{username}.confを作っていきます。
場所は/etc/apache2/users/になりその中に{username}.confというテキストファイルを作りましょう。
/etc/への行き方は上の「httpd.confの編集」を参照してください。
また、すでに{username}.confが存在する方はそのファイルに下記を記入、又は上書きしてください。

{username}.confに下記を記入して保存します。

<Directory "/Users/{username}/Sites">
 AddType text/html .shtml .html
 AddHandler server-parsed .shtml .html
 Options Indexes MultiViews FollowSymlinks Includes
 AllowOverride all
 Require all granted
</Directory>

これで{username}.confの設定は完了です!

httpd-vhosts.confの編集

場所は/etc/apache2/extra/にあります。
/etc/への行き方は上の「httpd.confの編集」を参照してください。

httpd-vhosts.confを開いたら下記を記入していきます。

<VirtualHost *:80>
    DocumentRoot "/Users/{username}/Sites/normal/webroot/"
    ServerName local.test
    <Directory "/Users/{username}/Sites/normal/webroot/">
        allow from all
    </Directory>
</VirtualHost>

見てもらうとわかるのですが、DocumentRootDirectoryには上記事の「Sitesフォルダの作成」で作ったSitesディレクトリを指定しています。
ServerNameには好きな文言(英数字)を入れていいです。
DocumentRootDirectoryで指定したディレクトリ内のサイトをServerNameをブラウザで叩くことでローカルで見れるようにしているわけです。
例えば、testというディレクトリ配下に作ったサイトがあったとしたら、Sitesの中に作ったtestを入れます。
そして、DocumentRootDirectoryを/Users/{username}/Sites/test/として、ServerNameをlocal.testとします。
指定したら下の記事の「hostsを編集する」をさらに設定することで、ブラウザにhttp://local.testと入れればローカルでtestというサイトを確認できるというわけです。
サイトが増えるに下記のように記述を増やしていけばOKです!

<VirtualHost *:80>
  DocumentRoot "/Users/{username}/Sites/test/"
  ServerName local.test
  <Directory "/Users/{username}/Sites/test/">
    allow from all
  </Directory>
</VirtualHost>
<VirtualHost *:80>
  DocumentRoot "/Users/{username}/Sites/test2/"
  ServerName local.test2
  <Directory "/Users/{username}/Sites/test2/">
    allow from all
  </Directory>
</VirtualHost>

hostsの編集

hostsを編集していきます。
場所は/etc/配下にあります。

下記のようにhostsに登録していきます。
local.testは上の記事の「httpd-vhosts.confの編集」で指定したServerNameを記入してください。

127.0.0.1 local.test

サイトが増えるにつれてhttpd-vhosts.confServerNameと合わせて下記のように増やしていけばOKです!

127.0.0.1 local.test
127.0.0.1 local.test2

最後に

最後にApacheを再起動して完了です。
Apacheのコマンドは下記を参照してください^^

コメント

タイトルとURLをコピーしました