1. トップページ
  2. macOS に Webサイト制作用の開発環境を構築する

macOS に Webサイト制作用の開発環境を構築する

macOS に Webサイト開発環境を構築してみます。
Docker などを使用せず、ビルトイン / Homebrewのパッケージ を使用して構築を行います。
おそらくモダンな環境ではないと思われますので、ご理解頂いた上で作業を進めてください。

使用するソフトウェア / 動作環境

以下のソフトウェアを使用します。
複数のバージョンで動作することを確認しました。

動作確認済のOS

macOS Mojave 10.14.6
macOS Catalina 10.15.6
macOS Bigsur 11.6.5


Apache（ビルトイン）

Webサーバー用ソフトウェアとして使用します。
nginx でも問題ないと思いますが、動作確認はしていません。
動作確認済バージョン: 2.4.34

MySQL（Homebrewパッケージ）

WordPressなどCMSを使用する際に、同時にデータベースも使用する必要があります。
local など、数ステップでCMSの環境が構築できるソフトウェアも存在しますが、
この記事では手動でのインストールを想定し、MySQLをhomebrew経由でインストールします。
動作確認済バージョン: 5.7

Dnsmasq（Homebrewパッケージ）

/etc/hosts ではワイルドカード （*） が使用できないため、
このパッケージをインストールして名前問題を解決します。
動作確認済バージョン: 2.84

仕様

フォルダを追加した瞬間からアクセス可能にする

サイトを追加するたびに Apacheを再起動するのは面倒です。
フォルダを追加した瞬間にサイトにアクセスでき、Apacheを再起動しなくてもアクセスができるようにします。

OS起動と同時にアクセス可能にする

以前は MAMP を使用していましたが、毎回アプリを起動させるのが面倒だったため、
OS起動と同時にアクセスできるようにします。

URLを親フォルダの名前にする

http://localhost:8001 などポートによる割当ではなく
http://example.test などサイト固有のドメインでアクセス出来たほうがわかりやすいです。
フォルダの名前がそのままURLになるような仕様にします。

cafe/ => cafe.test
example/ => example.test


ドメイン名は .test にする

dev や .app などより具体的な名前もありますが、
Chrome だと強制的に https で接続されてしまいます。
Chromeで「.dev」ドメインのサイトが強制的にhttpsになる原因と解決法

ローカル開発環境上でのSSL化は必要性が薄く、設定に少々手間がかかるため、
今回は開発環境として判別しやすい .test を ドメイン名とします。

インストール手順

既に他のサイト様で多数紹介されていますので、
URLの紹介 + 私が行った手順を記述しておきます。

Apache

以下のサイトを参考にさせて頂きました。
macOS に標準インストールされている Apache httpd を利用する方法

# Apache のインストール先フォルダを確認
$ which httpd
> /usr/sbin/httpd

# apachectl のインストール先フォルダを確認
$ which apachectl
> /usr/sbin/apachectl

#  Apache のバージョンを確認
$ /usr/sbin/httpd -version
> Server version: Apache/2.4.25 (Unix)
> Server built: Feb 6 2017 20:02:10

# apachectl 経由で Apache を起動
$ sudo /usr/sbin/apachectl start

* http://localhost にアクセスし、「It works!」と表示されれば起動が完了しています。
* Apache を停止する場合は、以下のコマンドを実行してください。
* $ sudo /usr/sbin/apachectl stop

# macOS起動時にApacheを自動起動させる
$ sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

* Apache httpd の自動起動を止めたい場合は、次のコマンドで設定できます。
* $ sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist

次に /private/etc/apache2/httpd.conf の編集を行います。
私は以下の記述のコメントアウトを解除しました。

LoadModule include_module libexec/apache2/mod_include.so
LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
LoadModule php7_module libexec/apache2/libphp7.so

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

#
# Filters allow you to process content before it is sent to the client.
#
# To parse .shtml files for server-side includes (SSI):
# (You will also need to add "Includes" to the "Options" directive.)
#
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

最後に /private/apache2/extra/httpd-vhost.conf を編集します。
/Users/tyai-a/sites/ の部分は各々書き換えをお願いします。

<VirtualHost *:80>
    ServerAlias *.test
    VirtualDocumentRoot /Users/tyai-a/sites/%1
    <Directory /Users/tyai-a/sites/*>
        Options Includes FollowSymLinks
        AllowOverride All
        Require all granted
        AddType text/html .html
        AddOutputFilter INCLUDES .html
        Require ip 127.0.0.1 ::1
    </Directory>
</VirtualHost>


その他のオプション

必要に応じて使用してください。

SSIの構文を2.2.x以前のものに切り替える（任意）

SSILegacyExprParser on

.html拡張子でphpを実行する（任意）

拡張子が .php 以外のファイルでもPHPの実行が可能となります。

AddType application/x-httpd-php .php .html


MySQL 5.7 ※22/08/22追記

以下のサイトを参考にさせて頂きました。
パスワードを設定していない rootユーザー での使用を想定しています。
言うまでもありませんが、本番環境ではこのような設定にすべきではないです。
MySQL5.7をHomebrewでmacOSにインストールする手順 |

# MySQL 5.7 が存在しているか確認
$ brew search mysql@5.7

＃　MySQL 5.7 のインストール
$ brew install mysql@5.7

# パスを通す
$ echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' >> ~/.bash_profile

# MySQL を起動します。この作業を行わない場合、以下のようなエラーが表示されます。
# ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
$ brew services start mysql@5.7

# root でログインします。
#　mysql とだけ入力してログインしようとすると、以下のようなエラーが表示されます。
＃　ERROR 1045 (28000): Access denied for user 'xxxxx'@'localhost' (using password: NO)
$ mysql -uroot

# 以下のように表示されれば成功です。
Welcome to the MySQL monitor.  
Command ... help. Type '\c' to clear the current input statement.
mysql>

# quit と入力して終了してください。
mysql>quit

次に /usr/local/etc/my.cnf を編集します。
最終行に以下の設定を書き換え加えてください。

character-set-server=utf8

以上でMySQL側の設定は完了です。

PHPMyAdminをインストール

最後に PHPMyAdmin をインストールしてデータベースをGUIで確認できるようにします。
公式サイトからZIPファイルをダウンロードし、解凍後に指定したドキュメントルートへ設置します。

私の環境ではエラーでログインできなかったため、設定ファイルを書き換えました。
設定ファイルは phpmyadminフォルダ/config.sample.inc.php となります。
名前を config.inc.php に書き換え後、23行目付近を以下のように書き換えてください。
ホスト を 127.0.0.1 とし、パスワードなしでログイン可能なようになります。

$cfg['Servers'][$i]['host'] = '127.0.0.1';  // locahost => 127.0.0.1
$cfg['Servers'][$i]['AllowNoPassword'] = true; // false => true

以上でPHPMyAdminの設定は完了です。
その後、ユーザー名を root パスワードを空白の状態にしてログインを行います。
問題なければログインに成功し、データベースの一覧が出力されるはずです。

Dnsmasq

以下のサイトを参考にさせて頂きました。
Mac用にDnsmasqでローカル開発用のドメイン(*.test)を設定する

# HomebrewでDnsmasqをインストール
$ brew install dnsmasq

# Dnsmasq設定
# *.testドメインをローカルループバックアドレスとして解決する
$ echo 'address=/.test/::1' >> $(brew --prefix)/etc/dnsmasq.conf
$ echo 'address=/.test/127.0.0.1' >> $(brew --prefix)/etc/dnsmasq.conf

# MacのDNS設定
# *.testドメインの名前解決をローカルのDnsmasqに任せる
$ sudo mkdir -v /etc/resolver
$ sudo bash -c 'echo "nameserver ::1" >> /etc/resolver/test'
$ sudo bash -c 'echo "nameserver 127.0.0.1" >> /etc/resolver/test'

# Dnsmasqの自動起動設定＋起動
$ sudo brew services start dnsmasq

# 名前解決ができることを確認
$ ping test.test 
$ ping6 test.test

# Dnsmasqの再起動（設定ファイルの再読込のために必要）
$ sudo brew services restart dnsmasq

# Dnsmasqを停止＋自動起動無効化
$ sudo brew services stop dnsmasq


/etc/resolver について

/etc/resolver に設定したいドメイン名と同じファイルを作成することで
個別にDNSを設定が可能なようです。
MacのDNSを設定

パーミション600 のファイル表示時に 403 となる ※22/06/16追記

デフォルトの設定ではパーミションが600のファイルが表示できません。
GoogleDriveFileStream などからファイルをコピペした際に発生します。
解決するには /private/etc/apache2/httpd.conf を開き、202行目の付近を以下のように編集してください。

User ユーザー名
Group staff


ユーザー名は /Users/{ユーザー名} から確認可能です。
書き換え後、以下のコマンドを実行して apache を再起動してください。
その後、ブラウザなどで正しく表示できるか確認してください。

$ sudo apachectl -k restart


以上で導入は完了です。快適な開発ライフをお楽しみください。

参考にさせていただいたページ