<p>macOS に Webサイト開発環境を構築してみます。<br>Docker などを使用せず、ビルトイン / Homebrewのパッケージ を使用して構築を行います。<br>おそらくモダンな環境ではないと思われますので、ご理解頂いた上で作業を進めてください。<br></p><h2 id="ha0f2addaa6">使用するソフトウェア / 動作環境</h2><p>以下のソフトウェアを使用します。<br>複数のバージョンで動作することを確認しました。<br></p><h3 id="h14d355eaa4">動作確認済のOS</h3><pre><code>macOS Mojave 10.14.6
macOS Catalina 10.15.6
macOS Bigsur 11.6.5</code></pre><p><br></p><h3 id="h85da9d5e42">Apache（ビルトイン）</h3><p>Webサーバー用ソフトウェアとして使用します。<br>nginx でも問題ないと思いますが、動作確認はしていません。<br>動作確認済バージョン: 2.4.34<br></p><h3 id="h232052f62e">MySQL（Homebrewパッケージ）</h3><p>WordPressなどCMSを使用する際に、同時にデータベースも使用する必要があります。<br>local など、数ステップでCMSの環境が構築できるソフトウェアも存在しますが、<br>この記事では手動でのインストールを想定し、MySQLをhomebrew経由でインストールします。<br>動作確認済バージョン: 5.7<br></p><h3 id="h15721b400b">Dnsmasq（Homebrewパッケージ）</h3><p><code>/etc/hosts</code> ではワイルドカード <code>（*）</code> が使用できないため、<br>このパッケージをインストールして名前問題を解決します。<br>動作確認済バージョン: 2.84<br></p><h2 id="h00b8af9eb7">仕様</h2><h3 id="he5e3ab3091">フォルダを追加した瞬間からアクセス可能にする</h3><p>サイトを追加するたびに Apacheを再起動するのは面倒です。<br>フォルダを追加した瞬間にサイトにアクセスでき、Apacheを再起動しなくてもアクセスができるようにします。<br></p><h3 id="h3bc1e7da74">OS起動と同時にアクセス可能にする</h3><p>以前は MAMP を使用していましたが、毎回アプリを起動させるのが面倒だったため、<br>OS起動と同時にアクセスできるようにします。<br></p><h3 id="hde2ef02f35">URLを親フォルダの名前にする</h3><p><code>http://localhost:8001</code> などポートによる割当ではなく<br><code>http://example.test</code> などサイト固有のドメインでアクセス出来たほうがわかりやすいです。<br>フォルダの名前がそのままURLになるような仕様にします。</p><pre><code>cafe/ =&gt; cafe.test
example/ =&gt; example.test</code></pre><p><br></p><h3 id="h04acdeca4b">ドメイン名は .test にする</h3><p>dev や .app などより具体的な名前もありますが、<br>Chrome だと強制的に https で接続されてしまいます。<br><a href="https://glatchdesign.com/blog/troubleshooting-chrome-dev-domain/" target="_blank" rel="noopener noreferrer">Chromeで「.dev」ドメインのサイトが強制的にhttpsになる原因と解決法</a><br><br>ローカル開発環境上でのSSL化は必要性が薄く、設定に少々手間がかかるため、<br>今回は開発環境として判別しやすい<strong> .test </strong>を ドメイン名とします。<br></p><h2 id="h7e3a52fc06">インストール手順</h2><p>既に他のサイト様で多数紹介されていますので、<br>URLの紹介 + 私が行った手順を記述しておきます。<br></p><h3 id="h4696f31bb3">Apache</h3><p>以下のサイトを参考にさせて頂きました。<br><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">macOS に標準インストールされている Apache httpd を利用する方法</a></p><pre><code># Apache のインストール先フォルダを確認
$ which httpd
&gt; /usr/sbin/httpd

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

#  Apache のバージョンを確認
$ /usr/sbin/httpd -version
&gt; Server version: Apache/2.4.25 (Unix)
&gt; 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</code></pre><p>次に <code>/private/etc/apache2/httpd.conf</code> の編集を行います。<br>私は以下の記述のコメントアウトを解除しました。</p><pre><code>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</code></pre><p>最後に <code>/private/apache2/extra/httpd-vhost.conf</code> を編集します。<br><code>/Users/tyai-a/sites/</code> の部分は各々書き換えをお願いします。</p><pre><code>&lt;VirtualHost *:80&gt;
&nbsp; &nbsp; ServerAlias *.test
&nbsp; &nbsp; VirtualDocumentRoot /Users/tyai-a/sites/%1
&nbsp; &nbsp; &lt;Directory /Users/tyai-a/sites/*&gt;
&nbsp; &nbsp; &nbsp; &nbsp; Options Includes FollowSymLinks
&nbsp; &nbsp; &nbsp; &nbsp; AllowOverride All
&nbsp; &nbsp; &nbsp; &nbsp; Require all granted
&nbsp; &nbsp; &nbsp; &nbsp; AddType text/html .html
&nbsp; &nbsp; &nbsp; &nbsp; AddOutputFilter INCLUDES .html
&nbsp; &nbsp; &nbsp; &nbsp; Require ip 127.0.0.1 ::1
&nbsp; &nbsp; &lt;/Directory&gt;
&lt;/VirtualHost&gt;</code></pre><h4 id="hcf83e1357e"><br></h4><h3 id="h7605ccc377">その他のオプション</h3><p>必要に応じて使用してください。</p><h4 id="h8a5f213f8c">SSIの構文を2.2.x以前のものに切り替える（任意）</h4><pre><code>SSILegacyExprParser on</code></pre><h4 id="h8311fbb339">.html拡張子でphpを実行する（任意）</h4><p>拡張子が <code>.php</code> 以外のファイルでもPHPの実行が可能となります。</p><pre><code>AddType application/x-httpd-php .php .html</code></pre><p><br></p><h3 id="h7d3a797f05">MySQL 5.7 ※22/08/22追記</h3><p>以下のサイトを参考にさせて頂きました。<br>パスワードを設定していない rootユーザー での使用を想定しています。<br>言うまでもありませんが、本番環境ではこのような設定にすべきではないです。<br><a href="https://weblabo.oscasierra.net/mysql-57-homebrew-install/" target="_blank" rel="noopener noreferrer">MySQL5.7をHomebrewでmacOSにインストールする手順 |</a></p><pre><code># 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"' &gt;&gt; ~/.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.&nbsp; 
Command ... help. Type '\c' to clear the current input statement.
mysql&gt;

# quit と入力して終了してください。
mysql&gt;quit</code></pre><p>次に <code>/usr/local/etc/my.cnf</code><span style="color:#383838"> を編集します。</span><br>最終行に以下の設定を書き換え加えてください。</p><pre><code>character-set-server=utf8</code></pre><p>以上でMySQL側の設定は完了です。<br></p><h4 id="h843a164e78">PHPMyAdminをインストール</h4><p>最後に PHPMyAdmin をインストールしてデータベースをGUIで確認できるようにします。<br><a href="https://www.phpmyadmin.net/" target="_blank" rel="noopener noreferrer">公式サイト</a>からZIPファイルをダウンロードし、解凍後に指定したドキュメントルートへ設置します。<br><br>私の環境ではエラーでログインできなかったため、設定ファイルを書き換えました。<br>設定ファイルは <code>phpmyadminフォルダ/config.sample.inc.php</code> となります。<br>名前を <code>config.inc.php</code> に書き換え後、23行目付近を以下のように書き換えてください。<br>ホスト を 127.0.0.1 とし、パスワードなしでログイン可能なようになります。</p><pre><code>$cfg['Servers'][$i]['host'] = '127.0.0.1';  // locahost =&gt; 127.0.0.1
$cfg['Servers'][$i]['AllowNoPassword'] = true; // false =&gt; true </code></pre><p>以上でPHPMyAdminの設定は完了です。<br>その後、ユーザー名を root パスワードを空白の状態にしてログインを行います。<br>問題なければログインに成功し、データベースの一覧が出力されるはずです。<br></p><h3 id="h1151dab6c1">Dnsmasq</h3><p>以下のサイトを参考にさせて頂きました。<br><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">Mac用にDnsmasqでローカル開発用のドメイン(*.test)を設定する</a></p><pre><code># HomebrewでDnsmasqをインストール
$ brew install dnsmasq

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

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

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

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

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

# Dnsmasqを停止＋自動起動無効化
$ sudo brew services stop dnsmasq</code></pre><p><br></p><h4 id="hf3ed4173c3">/etc/resolver について</h4><p><code>/etc/resolver</code> に設定したいドメイン名と同じファイルを作成することで<br>個別にDNSを設定が可能なようです。<br><a href="http://nauthiz.hatenablog.com/entry/20100929/1285778758" target="_blank" rel="noopener noreferrer">MacのDNSを設定</a><br></p><h3 id="h782687e29f">パーミション600 のファイル表示時に 403 となる ※22/06/16追記</h3><p>デフォルトの設定ではパーミションが600のファイルが表示できません。<br>GoogleDriveFileStream などからファイルをコピペした際に発生します。<br>解決するには <code>/private/etc/apache2/httpd.conf</code> を開き、202行目の付近を以下のように編集してください。</p><pre><code>User ユーザー名
Group staff</code></pre><p><br>ユーザー名は <code>/Users/{ユーザー名}</code> から確認可能です。<br>書き換え後、以下のコマンドを実行して apache を再起動してください。<br>その後、ブラウザなどで正しく表示できるか確認してください。</p><pre><code>$ sudo apachectl -k restart</code></pre><p><br>以上で導入は完了です。快適な開発ライフをお楽しみください。</p>

<ul><li><a href="https://glatchdesign.com/blog/troubleshooting-chrome-dev-domain/" target="_blank" rel="noopener noreferrer">Chromeで「.dev」ドメインのサイトが強制的にhttpsになる原因と解決法</a></li><li><a href="https://weblabo.oscasierra.net/apache-macos-usage/" target="_blank" rel="noopener noreferrer">macOS に標準インストールされている Apache httpd を利用する方法</a></li><li><a href="https://nextat.co.jp/staff/archives/248" target="_blank" rel="noopener noreferrer">Mac用にDnsmasqでローカル開発用のドメイン(*.test)を設定する</a></li></ul>

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

<p><code>Composer</code> をインストールして macOSビルトイン の Apache で使用したかったのですが、「PHPのバージョンアップが必要です」と警告文が表示されて使えなかったので、バージョンアップを行いました。<br></p><h2 id="h5d746a97ca">動作環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>macOS mojave 10.14.6
Apache 2.4.34（macOSビルトイン）</code></pre><p><br></p><h2 id="h69dbf3aaeb">バージョンアップ手順</h2><h3 id="hfa8513a82f">Homebrew で PHP をインストールする</h3><p>以下のコマンドを実行し、インストール可能なPHP系のパッケージを確認します。</p><pre><code>$ brew search php

==&gt; Formulae
brew-php-switcher &nbsp; php-cs-fixer&nbsp; &nbsp; &nbsp; &nbsp; php@7.4 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpmyadmin
php ✔ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; php@7.2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phplint &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpstan
php-code-sniffer&nbsp; &nbsp; php@7.3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpmd &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpunit

==&gt; Casks
eclipse-php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; netbeans-php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; phpstorm</code></pre><p><br>今回は <strong>7.4</strong> をインストールしてみます。パッケージ名のあとに@をつけてバージョンを指定します。</p><pre><code>brew install php@7.4</code></pre><p><br>私の環境では<code>/usr/local/Cellar/php@7.4/7.4.15/lib/httpd/modules/ </code>に  <code>libphp7.so</code> というファイルがダウンロードされました。<br></p><h3 id="h2d8d36cab5">httpd.conf を編集する</h3><p>先程ダウンロードしたファイルを Apache に読み込みさせます。<br><code>/private/etc/apache2/httpd.conf</code> の177行目付近にあるテキストをコメントアウトします。</p><pre><code>#LoadModule php7_module libexec/apache2/libphp7.so</code></pre><p><br>その下に新しくテキストを追加してください。<br>パスは <code>/usr/</code> が起点となっています。間違えると動作しませんので注意してください。</p><pre><code>LoadModule php7_module local/Cellar/php@7.4/7.4.15/lib/httpd/modules/libphp7.so</code></pre><p><br></p><h3 id="h3402b9999f">Apacheを再起動する</h3><p>以下のコマンドで Apache を再起動します。</p><pre><code>sudo apachectl restart</code></pre><p><br>以上で導入は完了です。</p>

カテゴリーが「Apache」の記事

カテゴリ