開発環境構築手順（Mac × MAMP）

0 Comments

MacOS上でのローカル仮想環境の構築方法メモ。
OSのバージョンアップデートにひっかかったり、シンタックスエラーを起こしたり、 SSIエラーがでちゃったり、環境構築だけに何時間もハマってしまって四苦八苦してしまったので、忘れないようにメモしておきます。

はじめに

やること

・ローカル上に仮想環境を構築（Apacheの準備）
・複数ドメインで複数サイトの運用（ルートディレクトリの切り替え）
・ポートなしのドメインのみの運用（ポート変更）
・ SSIも使えるように

つかうもの

・MAMP（無償版のみ）
・Hoster（無くてもよい）
・なんでもいいけど編集用のエディタ

 

１.ソフトウェアのインストール

MAMPのインストール

MySQLとかApacheとかPHPとかをインストールしていくのは面倒なので、 MAMPを使います。

https://www.mamp.info/
特に難しいことは何もなし。上記サイトからインストーラーをダウンロードして、ウィザードに従って普通にインストール。

Hosterのインストール

ローカル上でのホスト解決のために、Hostsに設定を加える必要があるので、それを便利にしてくれるためのソフトウェア Hoster をインストールする。手動で設定してもそこまで大変なわけじゃないので別に無くてもいいけれど、Macだと毎回権限設定しないとHosts編集ができなくて面倒なので、頻繁に Hostsの切り替えをする場合はあったほうが便利かなっていう程度。

※最新版OSだと簡単にインストールはできないので、手動で切り替えたほうが早いかもしれないです。でもHosterを使えば、半角とか全角とかの変なシンタックスエラーを起こしずらくなるっていうメリットはあります！

下記からインストーラーをダウンロード
http://www.redwinder.com/macapp/hoster/

普通にパッケージインストールをすればOK….といいたいところだけれど、これが最新版OSだとバージョンチェックでインストールできないらしいのね。そんなわけで、ちょっと面倒なインストール作業が必要。

１．ダウンロードしてきたファイルを右クリック
「パッケージの内容を表示」をクリック

２．Contents > Packages に移動

３．Packages内にあるファイル１つずつ下記操作をしてインストールしていく
右クリック→→このアプリケーションで開く→インストーラ（デフォルト）

Packeges内にあるファイル３つ全てを３の方法でインストール完了すればHosterのインストール完了！

 

２．仮想環境用ディレクトリの設定

ディレクトリの作成

１．仮想環境に利用したいディレクトリを１つ用意する
（例：htdocs）

２．上記ディレクトリに、ルートディレクトリにしたいディレクトリ作成。
（例：test01, test02）
※いくつでも使いたい分だけ作ってOK
※ディレクトリ名は半角英数小文字にすること（大文字やそれ以外の文字だと、動かない場合があるので念のため）

３．上記ディレクトリ（ test01, test02）の中それぞれに、確認テスト用の index.html を準備する。
表示確認ができれば中身はなんでもOK
htdocs直下にも確認用index.htmlを入れておく。

ルートディレクトリの設定

MAMPを起動し、設定 > Webサーバーの項目から、ルートディレクトリを変更。
上記１で用意した、仮想環境に利用したいディレクトリを選択する。
※上記でいうところのhtdocsにあたるディレクトリ

 

３．ポート設定

ポートの設定

MAMPの設定画面より、ポート設定のタブを表示。下記のポートに設定を変更する。

Apache : 80
NginX : 7888 （ApacheとMySQLと被らなければOK）
MySQL : 3306

※Apacheを80番ポートに設定すると、パスワードをきかれるので、毎回入力する必要があります。

表示確認

ここまで設定したら、一旦表示確認を行う。
MAMPからサーバー起動 → ブラウザを開いてURL部分に「localhost/」と入力して、テスト確認用にhtdocs配下に用意したindex.htmlの内容が表示されればOK

※Apacheが起動すると、緑色のランプがつきます。起動しない場合は前記事参照。

表示できないとき

そもそもApacheが起動していないと「このサイトにアクセスできません」のエラーが出るので、そのエラーがでたら、Apacheが起動していない原因を探る。

用意したindex.htmlの内容ではなく、It works! などの別の表示がされる場合、Macにデフォルトで入っているApacheが80番ポートを利用していて衝突している可能性があるので、どこで Apacheが起動してるのかを確認。（ここまでくると、多分GUIでのチェックは難しいので、コンソールから直接操作したほうがエラーが見られて解決しやすいはず）

４．バーチャルホストの設定

Applications > MAMP > conf > apache
の中にある下記２つのファイルを編集する

・httpd.conf
・extra/httpd-vhosts.conf
※originalディレクトリの中にも同じファイルがあるけど、originalディレクトリの中はいじらず、apacheディレクトリ直下の上記２ファイルを編集すること

httpd.confの編集

下記の箇所を探して、includeのコメントアウトを解除する。（#を消す）

変更前

↓
変更後

これでコメントアウトが解除され、次で設定するhttpd-vhosts.confの設定内容を反映できるようになります。
# Virtual hostsの部分は本当のコメントアウトなので、#を解除しないように注意

 

httpd-vhosts.confの編集

ファイルの一番下に、下記の内容を追記する。

まず、全仮想環境のルートディレクトリになる部分（２でhtdocsと設定したディレクトリ）の設定を入れる。
ServerNameは  localhost にしておく。

次に、仮想環境になる各ルートディレクトリごとに、設定を追記していく。
（２でtest01, test02と仮定したディレクトリの部分）

「開発環境までのパス」の部分には、２−２で用意した、仮想環境用のルートディレクトリのパスを入れる。
「test01.local」の部分には、仮想環境にアクセスする際に利用したい名前を設定する。
わかりやすいように、開発環境のルートディレクトリの名前+ .local の名前にするのがオススメ。（ドメインをつけなくてもOKだけど、ドメインなしにしちゃうと、その単語をgoogle検索したい時などに、仮想環境にアクセスされて検索できない！とかいう面倒なこともおきるので）

上記の設定１ブロックとし、２で設定したルートディレクトリの分だけ設定を追記していく。

 

５．Hostsの編集

１でインストールしたHosterを使ってHostsの編集（Hostsを追記する）
４で設定したServerName をホスト名とし、ローカル用のループバックアドレス（ 127.0.0.1）をhostsに設定する。

例：
127.0.0.1  test01.local
127.0.0.1  test02.local

これも、設定した仮想環境のルートディレクトリの分だけ設定する。

ちなみに、Hosterを使わずに手動でHostsを設定する場合は下記の通り

１．Finderの移動メニューから　private/etc　フォルダに移動
２．Hostsファイルの「情報を見る」を開き、ロックを解除＆自分のユーザーに読み書きの権限を与える
３．デフォルトのエディタ以外のエディタで編集する
（デフォルトエディタだと、ロックを解除してもロック中となってしまい何故か編集できないので…..)

 

６．起動＆確認

ここまでで設定は完了。一度サーバーを再起動しないと設定が反映されないので、MAMPでサーバーを停止＆再起動する。再起動したら、設定したServerNameをURLの箇所に入力して、テスト確認用のindex.htmlの内容が表示されるかどうかを確認する。

例：
localhost/
test01.local/
test02.local/

 

7.SSIの設定

SSIっていうのは、Server Side Includes のことね。HTML内に、コメントアウトでinclude文を入れることで、サーバー側がコメントの場所に別ファイルを置き換えてくれたりする機能です。例えばheadの設定やheaderやfooterをこれでよみこむことで、ソースの共通化ができるので、大きなサイトだとよく使われてます。

そんなわけでよく使われる機能なので、６までで設定は終わりなんだけど、後で使う時に設定しなおさなくて済むように、ここでSSIの設定も済ませておく。

再度、先ほど設定を入れた　httpd.conf　を開き、下記箇所を変更すればOK。

１．変更箇所１つ目
変更前（510行目あたり）

↓
変更後（コメントアウトを解除して、２行目に .html　を追加する）

 

１．変更箇所２つ目
変更前（210行目あたり）

↓
変更後（１行目に ExecCGI Includes を追記する）

 

これでおわり！！！！