MAMPを便利に長く汎用的に使う方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

MAMPを設定した方は、まず最初に「これ何に使うんだろう」とか、「よくわからない」とか思うと思います。

というか今までのエントリー(記事)でMAMPにぜんぜん触れてないのにこの時点でインストールした人偉いです。

MAMP(まんぷ)のインストール方法について

MAMPのインストール方法についてはポートがどうたらいろいろ調べたら出てくると思いますが。基本的にいろいろいじらずそのままインストールしたら良いかと思います。
まずは無料版のほうをインストールすると良いとおもいます。

MAMPとは簡単に言うとなんなのか?

よくわからないけど、とりあえず設定したと言う方は、

ローカルのパス


/Applications/MAMP/htdocs

というフォルダになにか適当に書いたindex.htmlファイルを作って、

MAMPでできたローカルホストのURL


http://localhost:8888/

を開いたらそのhtmlが表示されます。
/Applications/MAMP/htdocs/ イコール http://localhost:8888/
ということですね。
そしてそもそもgoogle chromeなどの「ウェブブラウザ」というものは、.xlsという拡張子のファイルをエクセルというソフトでを見るのと同じように、.htmlという拡張子のものを見るための単なるソフトです。
なので、ローカルに保存したHTMLファイルを右クリックして、「このアプリケーションで開く」から規定のWebブラウザを選択してみてください。普通にブラウザが立ち上がり、まるでインターネットをみているように、自分のパソコン内の.htmlファイルをブラウザで確認することができます。

ただし、このhtdocsを何かに使おうと思ってはいけません。
通常なにかHTMLなりエクセルを保存するなりするときなんかは、「Documents(書類)」フォルダなどでファイルを作ったりしますよね?(デスクトップ使いの方もいますが)
しかし、
/Applications/MAMP/htdocs/ イコール http://localhost:8888/
なので、mampの規定のドキュメントルートは/Applications/MAMP/htdocs/なのです。なにか使いづらいと思いませんか?

もしここで1個サイトを立ち上げてWordPressとかインストールしてみたりしてとかしても、他のサイトを作ろうと思った時に困りますよね?
違うサイトを作ろうにも
いちいち全部消して〜などとはやってられません。http://localhost:8888/site2/などとフォルダで分けて作ることもできますが、前回のエントリーで書いたように、スラッシュからの絶対パスを使うことができなくなります。なぜならそのままサーバにアップしてもフォルダ構造が変わってきてリンク切れになってしまうからです。

ローカルの会社概要へのリンクの書き方 → <a href=”/site2/company.html”>
サーバでの会社概要のリンクの書き方 → <a href=”/company.html”>

としなければならないので、サーバにアップ(本番公開:インターネットに公開すること)する際には上記のようにわざわざ画像やリンクのタグを全部書き換えないとならなくなります。すると今度はローカルでブラウザで確認してもリンク切れになるという。悪循環。

こんなのやってられないので(フォルダも使いやすい場所で作業したいので)、まずポートでわけて別サイトを作れるようにします。

  • http://localhost:8001/ ・・・ サイトA
  • http://localhost:8002/ ・・・ サイトB
  • http://localhost:8003/ ・・・ サイトC

みたいなイメージで、いろいろなサイトを立ち上げられるようにします。これがローカルホストを複数立ち上げるということですね。

ローカルホストを使うメリット

ローカルホスト(http://localhost:XXXX)を複数立ち上げると何が幸せなのかと言うと、以下の3点かと思います。

  • データベース(MySQL)が使えるのでWordPressなどのCMSをローカルで作れる
  • スラッシュからの絶対パスが使える
  • PHPが使える

厳密にいうと、/Applications/MAMP/htdocs/で、http://localhost:8888/だってローカルホストなので、データベースやPHPは使えるんですけど、もうこのmampのデフォルトのhtdocsとかいうフォルダのことは忘れてもらって結構ですまず使わないです。

WordPressはテーマ(テンプレート)を編集した瞬間ページに反映するので時間短縮になって便利です。ていうかいちいちサーバにアップして確認してもいいんですけど、やってみたらわかるけどかなり便利です。早い。
WordPressの話はまた今度します。

WordPressが使えるんで、当然PHPも使えてしまいます。PHPが使えるといろいろと便利です。というかWPがローカルで組めるのが便利です。
WP案件めちゃめちゃ多いので。

すぐわかるメリットとしては、スラッシュからの全体パスでHTMLをかけると言うことですね。これが便利。
普通にローカルでスラッシュからの絶対パスを使ってたら、それはつまり「Macintosh HD」からのパスということになりますからね。そんなの使えねーということです。
その点、TOPページへのリンクを<a href=”/”></a>で書けるのは便利です。

では複数のローカルホストを立ててみましょう。

最初の一回の作業。httpd.confを編集

# /Applications/MAMP/conf/apache/httpd.conf 575行目(行数ちがうかも)をみてください。
エディタはサブライムなどを使った方が良いかと。(エディタはあんまり関係ないかな。わからない。)

で、以下のようにコメントアウトを外す。コメントアウトとは、この場合あたまの「#」のことです。

httpd.conf



# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

↓↓↓ コメントアウトを外す。

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

これで「バーチャルホストの設定ここにかくよ」状態になったということになります。よくわかりませんね。

さらにhttpd-vhosts.confというよくわからないファイルを編集

次は/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf をエディタで開いて最下部に、

httpd.conf


# サイト名とかわかるように書いとく。シャープ始まりの行はスルー(コメントアウト)されます。書かなくてもいいけど。
Listen 8001
<VirtualHost *:8001>
    DocumentRoot "/Users/[USER NAME]/Documents/[TOPページにしたいフォルダのパス。最後に「/」は不要]"
    <Directory "/Users/[USER NAME]/Documents/[TOPページにしたいフォルダのパス。最後に「/」は不要]">
        AllowOverride All
    </Directory>
</VirtualHost>

を、丸っとコピペして、赤字のところを書き換えてください。
赤字のところ(ファイルのパス)は、作業しているフォルダ内のファイル(index.htmlなど。フォルダそのものではない)を右クリックして、「情報を見る」を押すとファインダーの小窓みたいなのが開くので、場所と書いてある右側を選択してコピーすることができます。
フォルダそのものを右クリックしても、そのフォルダがあるフォルダのパスが出てくるので間違えちゃうのでご注意。
パスというのはフォルダの住所のことですね。パソコン内の。

情報からパスのコピーする時に、わかりにくい。

これわかりにくいですよねそのまま書いてくれればいいのに書いてる内容とコピーした内容が違うという。
Macintosh HD ▶︎ ユーザ ▶︎ [USER NAME] ▶︎ 書類 ▶︎ website ▶︎ site-1
と書いていてこれをコピペすると、
/Users/[USER NAME]/Documents/website/site-1
というようになりますが、ペーストされた内容をそのまま使ってください。

すると指定したフォルダが指定したポート(8001)で開くようになっています。ポートというのはURLの末尾についている4桁の数字です。

・・・と思いきや、開かないと思います。

MAMPの設定を変えたらMAMPを再起動

PCの再起動の必要はありません。MAMPを一旦落とし(電源マークみたいな緑のボタンをクリック)、そしてまたつけてください。
パスワード聞かれたら正直に入力してください。
すると、さきほど指定したフォルダのファイルがhttp://localhost:8001/で開くようになっているはずです。なにかhtmlファイルを入れないと当然エラーというか確認できないので、テキストエディタで「テスト」だけでもいいので書いて、拡張子を.htmlにしたファイルをその場所に保存して開いてみてください。画面に「テスト」と出れば成功です。

httpd-vhosts.confに書いたものをどんどん下にコピペで追加していけば、たくさんのローカルホストが使えると言うわけです。
最初は特に便利に感じないかもしれないですが、あとあとじわじわ効いてくるので設定しておいて損はありません。

MAMPの注意点

(1)
まず、経験則からの注意点ですが、データベースを使っているとMACの電池切れなどで強制シャットダウンされたときに、DB内のデータが吹っ飛んでぶっ壊れることがあります。これはやばいので気をつけてください。せっかく作ったWPの記事が全部パーになったことが何度もあります。最近のMAMPのバージョンではあんまりない気がするけど、お気をつけください。

(2)
日本語のフォルダ名はあんまりお勧めしません。後々タスクランナーとか入れるのにnpm installができないなどの問題が出たり出なかったりしたような気がしないでもないです。曖昧。

ということで特に現時点で注意することはないですね。
ここまで読んだ方は、「これ何に使うんだろう」ということはもううないですよね?
「よくわからない」というのはよくわからないままかもしれないですが、私もよくわかりません。でも使えるんでいいのです。まずはそのレベルで良いと思っておきましょう。

以上!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*