<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サイト制作用の開発環境を構築する

<h2 id="h5cc2fd1f1e">MailHogとはなにか</h2><p>ローカル開発環境上でメールの送受信ができるようになります。<br>入力したメールアドレスに実際に送信はされず、<br>ローカル上でメールが受け渡しされます。<br></p><h3 id="h33495751c6">導入するメリット</h3><p>クライアントにメールが送信される事故を防ぐほか、<br>編集の都度サーバーにアップロードする手間が省けるため、<br>デバッグ作業の効率化が期待できます。<br></p><h3 id="h99f256a9ec">似たようなソフトはあるのか</h3><p>Ruby製の<a href="https://mailcatcher.me/" target="_blank" rel="noopener noreferrer">Mailcatacher</a>など、似たようなソフトはいくつかあります。<br>WordPressのローカル開発環境が構築できる <a href="https://localwp.com/" target="_blank" rel="noopener noreferrer">Local</a> に同梱されており、<br>とても使いやすかったのでこのソフトを選びました。<br></p><h2 id="h0c57c4244c">作業環境</h2><p>今回は<code>macOS Mojave 10.14.6 </code>で動作を確認しました。<br>ビルトインのapacheで使用できるように設定していきますが、<br>MAMPやXAMPPなどでも同様の手順で設定が可能かと思われます。<br></p><h2 id="hdbf4e8e455">MailHogをインストールする</h2><p>以下のコマンドを実行してMailHogをインストールします。</p><pre><code>$ brew install mailhog</code></pre><p><br>以下のコマンドを実行して、MacOS起動時にMailHogが自動的に起動するようにします。</p><pre><code>$ brew services start mailhog</code></pre><p><br>ここまで完了したら <a href="http://localhost:8025/" target="_blank" rel="noopener noreferrer">http://localhost:8025/</a> をブラウザで開いてください。<br>Gmail風のページが表示されればインストールは完了しています。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/mailhog-empty.png" alt=""><br></p><h2 id="hb453b15b64">mhsendmailをインストールする</h2><p>インストールすることで、<code>sendmail</code>の代替として動作し、<br>SMTPポート<code>1025</code>を使用して電子メールが送信されます。<br><strong>必ず必要なので一緒にインストールしてください。</strong><br><br>GOのインストールが必要なので、以下のコマンドを実行してインストールします。</p><pre><code>$ brew install go</code></pre><p><br>続いて以下のコマンドを実行して<code>mhsendmail</code>をインストールします。</p><pre><code>$ go get github.com/mailhog/mhsendmail</code></pre><p><br></p><h3 id="h74e373122c">追記 22/08/22</h3><p>Go1.16 からは以下のようなコマンドを実行してください。</p><pre><code>$ go install github.com/mailhog/mhsendmail@latest</code></pre><p><br>成功すれば、<code>~/go/bin/</code>に<code>mhsendmail</code>というファイルが追加されているはずです。<br></p><h2 id="h0be038064f">php.ini を編集する</h2><p>続いて<code>php.iniを</code>編集します。<br><code>sendmail_path</code>を以下のように書き換えてください。保存場所は好きな場所で問題ありません。</p><pre><code>sendmail_path = "/Users/{ユーザ名}/go/bin/mhsendmail"</code></pre><p><br>以上でインストール作業は終了です。<br></p><h2 id="hd5344867c3">テストメールを送信する</h2><p>実際にメールを送信してみます。<br><code>mail.php</code> など適当な名前をつけ、お好きな場所に設置して実行してください。</p><pre><code>&lt;?php
&nbsp;&nbsp;var_dump(
&nbsp;&nbsp;&nbsp;&nbsp;mail(
&nbsp;&nbsp;&nbsp;&nbsp;'to@example.com',
&nbsp;&nbsp;&nbsp;&nbsp;'TEST MAIL',
&nbsp;&nbsp;&nbsp;&nbsp;'This is test mail',
&nbsp;&nbsp;&nbsp;&nbsp;'From: from@example.com'
&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;);
?&gt;</code></pre><p><br>実行後 <a href="http://localhost:8025/" target="_blank" rel="noopener noreferrer">http://localhost:8025/&nbsp;</a> を開いてみて、<br>メールが1件追加されていれば動作確認は終了です。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/mailhog-download.png" alt=""></p>

<ul><li><a href="https://blog.mailtrap.io/mailhog-explained/" target="_blank" rel="noopener noreferrer">Mailhog: How to Use It and Why | Mailtrap Blog</a></li><li><a href="https://gyun.hatenablog.com/entry/2020/03/04/234114" target="_blank" rel="noopener noreferrer">MailHog入れるときはmhsendmailも忘れずに</a></li></ul>

カテゴリーが「開発環境」の記事

カテゴリ