超初心者だけどOS X El Capitan上に爆速でローカル開発環境を構築してみる

今回はストレージ容量と手間を惜しみまくって、必要最低限のローカル開発環境をmac上に構築してみたいと思います。

「ローカル開発環境」って何？

WEBページやWEBアプリをお手軽に作ろうと思うと、まずレンタルサーバーを借りることになると思います。安いサービスはサーバーを大勢で共有して使いますので、誰かが重たいプログラムを動かしたり、エラーを起こしてサーバーを停止させたりすると他の人に多大の迷惑がかかってしまいます。そこでレンタルサーバーでプログラムを動かす前に、普通まずは自分のPCでテストしてエラーがないことを確認します。

しかしPHP等のプログラムはそのままPC上で実行することはできません。まずは自分のPC上にApache等のWEBサーバーアプリを稼働させてサーバーと似た環境を作り、その上に自作プログラムをアップロードしてやらねばなりません。この条件を整えたものを「ローカル開発環境」と言います。

…なんだか面倒臭いですね。

macには最初からWEBサーバーがインストールされている？！

なので、世の中にはローカル開発環境を自動でサクッと構築してくれる便利なツールがいくつかあります。XAMPPやMAMPと呼ばれるものがそうです。

■ XAMPP

■ MAMP

ただし、これらは結構ストレージ容量を食います。Excel数百行程度しか扱わないような小規模なシステムを作る分には、ちょっとこれは大袈裟です。私はというと、面倒臭いしmacのSSD容量も逼迫しているので、いままでローカル開発環境なんて作ってませんでした。

しかし！実はmacには、買った時から既にApacheがインストールされているらしいのです。しかもOSのアップデート時にシステムと一緒に常に最新版に更新されているとの噂。これが使えれば、何もインストールせずに自作PHPコードを気軽にテストできるようになりそうです！

試しに起動してみる。

早速ターミナルを起動して、Apacheの起動コマンドを実行してみます。

「ターミナル」とはwindowsで言うところのコマンドプロンプトみたいなもので、コマンドを打ち込むことでマシンを操作する画面のことです。Dock内のLanchpadから起動して利用できます。

sudo apachectl start

「sudo」とは、管理者権限でコマンドを実行してね！という意味です。なので、実行時にパスワードを訊かれます。普段macにログインする時に使うパスワードを入れてEnterを押せば大丈夫です。

ちなみに、mac再起動後も常に自動でApacheが起動するようにするには下記コマンドを実行すればよいようです。

sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

試しにブラウザのURL欄に「localhost」と入力してみます。

「It works!」と出ればめでたくApacheが稼働しています！

残念ながらエラーが出た人も大丈夫、この後いろいろ初期設定します。

ちなみに停止コマンドは、

sudo apachectl stop

です。

ドキュメントルートを作成

ドキュメントルートとは、作ったHTMLファイルやPHPファイルをアップロードする公開フォルダのことです。（公開と言ってもLAN内ですが。）先ほど「It works!」と表示されていたHTMLファイルは、/Library/WebServer/Documentsフォルダに置かれており、初期設定ではここがドキュメントルートになっています。

しかしこのフォルダは通常Finderから見えません。後々アクセス権設定も面倒臭いので、自分のユーザーディレクトリ以下に「Sites」というフォルダを作っておき、そこをドキュメントルートに設定しておくと便利です。わざわざアップロード作業をしなくても、作成中のプログラムをFinderから直接編集できるようになります。

※Apache側の設定方法は後述します。

Apacheの初期設定をしてみる

Apacheの設定ファイルを3種類編集します。

まず最初は、/etc/apache2/フォルダ内の「httpd.conf」というファイルです。これをお好きなテキストエディタ等で開いて編集してやれば良いのですが、macのFinderでは通常このフォルダは見えません。Finderメニューの「移動」→「フォルダへ移動…」をクリックします。

表示したいフォルダのパスを入力して「移動」をクリック。

普段Finderには表示されないシステムフォルダの中が見れました。

設定ファイルをいじった後に不具合が出ても元に戻せるよう、バックアップを取っておきましょう。「httpd.conf」ファイルを右クリックして「複製」をクリックします。

システムフォルダ内でファイル操作を行う場合は毎回こうやってパスワードを訊かれますので、普段ログイン時に使用するパスワードを入力します。

設定ファイルを書き換える度にフォルダのパスを打ち込むのは面倒臭いので、apache2フォルダをドラッグしてFinderのサイドバーに入れておくと便利です。次回からワンクリックでアクセスできるようになります。

バックアップができたら「httpd.conf」をお好みのテキストエディターで開きます。macに標準装備の「テキストエディット.app」でも構いません。（行番号が出ませんが…）

私はAtomを利用しています。

開いたら66行目〜170行目付近の、読み込むモジュールを選択する部分を探します。

行頭に「＃」のついた行はコメントアウトと言って、モジュールの読み込みが無効にされています。逆に「＃」が付いていない行に記載されたモジュールは、Apache起動時に読み込まれる仕組みになっています。

初期状態では下記モジュールの読み込みが無効にされていますので、テキストエディターの検索機能を使って対象の行を探し、行頭の「＃」を消してやります。

#LoadModule include_module libexec/apache2/mod_include.so
#LoadModule authz_host_module libexec/apache2/mod_authz_host.so
#LoadModule authz_core_module libexec/apache2/mod_authz_core.so
#LoadModule userdir_module libexec/apache2/mod_userdir.so
#LoadModule rewrite_module libexec/apache2/mod_rewrite.so
#LoadModule php5_module libexec/apache2/libphp5.so
#Include /private/etc/apache2/extra/httpd-userdir.conf

編集が終わったら結果を保存します。保存時にまたパスワードを求める画面が出ますのでログイン時に使用するパスワードを入力します。

２つ目に、/etc/apache2/extra/フォルダにある「httpd-userdir.conf」という設定ファイルを編集します。このフォルダも非表示フォルダなので、Finderの「移動」→「フォルダへ移動…」からフォルダの場所を入力して表示・編集します。

16行目のコメントアウトを外して保存します。

#Include /private/etc/apache2/users/*.conf

３番目に、/etc/apache2/users/フォルダ内に、以下の内容で「*ユーザー名*.conf」というファイルを新規作成します。

※　*ユーザー名*は、ご自身のユーザー名に置き換えて下さい。ドキュメントルートを作成した時のユーザーディレクトリの名前です。

<Directory "/Users/*ユーザー名*/Sites/">
  AllowOverride All
  MultiviewsMatch Any
  Require all granted
</Directory>

これで設定ファイルの編集は完了です！

Apache再起動

最後に設定内容を反映させるために下記コマンドでApacheを再起動します。

sudo apachectl restart

これでHTMLやPHPプログラムをドキュメントルートに放り込めば、URL「http://localhost/~*ユーザー名*/ファイル名/」で動作確認できます！

設定ファイル３つ書き換えてApache再起動コマンド叩けばローカル開発環境がサクッと出来上がるなんて素敵すぎます！

あ、ちなみにエラーは/var/log/apache2/フォルダの「error_log」に記録されます。何かあったら、エラーメッセージをググれば大抵の不具合は解決です！