簡単!MAMPをインストールしてローカルサーバー設置

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

PHPやデータサーバー使ったHPやWEBアプリを、ローカルでデザインや動作確認ができるMAMPさん(通称ぞうさん)をダウンロード&インストールしていく。

【研修のときの先生】
MAMPを使えば、Webアプリケーション開発に必要なウェブサーバー、データベース、プログラミング言語などがインストールできて、自分のPC(ローカル)で開発ができるんだよ!

つまり、MAMPを使うことでローカルサーバー(http://localhost)が使えるようになるので、ネットにいきなりデータをUPすることなく、ローカル上でデザイン表示や動作確認ができるようになる、らしい!
(macoは開発初心者なので、研修で指示されるがままローカルサーバーを構築。先生の言う通りにしておけば間違いない!)

※MAMPを入れていないなら、ローカルサーバー(http://localhost)をたたいても

上記のようなサーバーエラーページしか表示されないはず。
これがMAMP実装すると、自分の作ったあれこれが見れるようになる。

では、さっそくMAMPをインストールしていく。

目次

MAMP公式ページからインストーラーをダウンロード

>> MAMP公式サイト

MAMPはPro版(有料)と無料版がある。
個人でちょろっとPHPがやりたいくらいなら無料で十分。

必ず「mac」か「ウィンドウズ」のどっちをインストールしたいのか、確認してインストーラーをダウンロード。
地味にデータ重くて、ダウンロードに時間がかかる。
さすが、ぞうさん重量級。

MAMPをインストール

インストーラーのダウンロードが終わったら、インストールスタート。

STEP
ダウンロードしたインストーラーを起動

下の「next」をクリック

STEP
MAMP(無料)を選択する

有料版である「MAMP PRO」と「Install app Bonjour(used for MAMP viewer)」のチェックを必ず外す!
はじめからチェックが入っているので、ここでチェック外しておかないと有料版になってしまうので要注意!

STEP
「I accept the agreement」をチェック入れてクリック
STEP
MAMPをダウンロードするフォルダを指定する

ほとんどの人はCドラにインストールするんだろうけど、自分はDドラ(外部SSD)を選択。
Cドラは少しでも開けておきたい民である。

STEP
メニューフォルダを選択しクリック(とくに変更しなくてよい)

「MAMP」のままで、下部の「Next」をクリック

STEP
デスクトップにMAMPのアイコンを置きたい人はチェックを入れる

デスクトップにMAMPアイコンを置くかどうか選んで、「Next」をクリック

STEP
最終確認

MAMPをインストールする場所やフォルダを確認し、下部の「Install」をクリック。
これでMAMPのインストールが開始される。

STEP
MAMPインストール完了

1、2分くらいでMAMPインストール完了。
インストーラーのダウンロードよりはるかに早く終わった。

これで、とりあえずMAMPをPCにインストールは完了した。
しかし、実際にMAMPを起動して、初期設定を確認・設定し、さらに本当にローカルサーバーが見れる状態になっているのか?までがMAMPである。

MAMPを起動・初期設定し、動作確認する

STEP
スタートメニューからMAMP起動
MAMP

ぞうさんアイコン可愛い

起動するとMAMPのウィンドウが表示される。
※Cドラにインストールした人は、「パソコンに影響のある~なんとかかんとかを起動しますか?」みたいな注意文言が表示されるらしいが、OKで。

自分はPCを少しでも軽くしたいからMAMPはDドラにインストールした。
なので、そんな注意文言は表示されず、スムーズにこの画面がでてきた。

STEP
初期設定を確認しておく。

上部メニューにあるMAMP→設定(PREFERENCE)とクリック

STEP
Ports設定を確認。必要があれば修正

ポートが上から80、80、3306になっていればOK。
インストール直後は稀に違う数字が入っているときがあるらしい。
そういう人は、80、80、3306にしてOKをクリック。

STEP
ローカルサーバーが見れるようになっているか確認。

ローカルサーバー(http://localhost)をブラウザで見ると、上記のようなページが表示されていれば、MAMPがきちんと動いているのでOK!

もし表示されないときは、一度MAMPのTOP画面で、右側の電源アイコンがグレーになって「Start Servers」になっていないか確認。
グレーだったら電源アイコンをクリックして、アイコンがグリーンの「Stop Servers」にする。
そして、もう一度ローカルサーバー(http://localhost)を更新してみてみる。

※とりあえず、MAMP設定してもローカルサーバーがエラーで見えないときはときは、何度か電源アイコンをStart ・Stop繰り返してみたり、PCを再起動してみたりすると、だいたい表示されるようになるってー。
知らないけど。

STEP
エラー最終手段はポートを8000にする。

MAMPの電源アイコンをStart ・Stop繰り返してみたり、PCを再起動してもローカルサーバー(http://localhost)がきちんと表示されないとき………。

原因は知らない。
でも、地味にいるらしい。
パソコンのせいなのか、うまくインストールできなかったからなのか、よくわからないが。

そんなときは、ヘッダーメニューから、MAMP→設定(PREFERENCE)→Portsを開いて、Apach Portを8000に修正。
そしてOKする。

それからMAMP起動ウィンドウの「Start Servers」を2回クリックし、ローカルサーバーを再起動。

ローカルサーバーパスにポートナンバーを追加したパスにしてみる。

http://localhost:8000

すると、結構な確率でローカルサーバーが見えるようになるらしい。
なんでか分からないけど、ちゃんと表示されるならいい。
(研修の先生曰く、初めてローカルサーバー設定したはずなのに、すでにPC内の何かがポート80使ってんだろうな、とかなんとか。)

実際にhtml/cssの簡単ページをMAMPを使ってローカルサーバーを使ってみる

MAMPをインストールして、ローカルサーバーも見れるようになったものの、どこにファイルやデータを入れたらいいのか分からない。
そう、それが初心者!

なので、どこにデータを入れてたらいいのかも備忘録しておく。

STEP
MAMPの「htdocs」フォルダを開く。

インストールしたMAMP大元のフォルダの中にある「htdocs」フォルダを開く。
自分はDドライブ(外部SSD)にMAMPをインストールしたので、Dドラ>MAMP>htdocsというファイルパスになる。

「htdocs」の中は、MAMPインストール直後のPHPファイルと画像が入っている。
http://localhostで表示されているデータ)

せっかくだからこの2つのデータをテストで使う。

※今後、何かの開発などでローカルサーバーを使うときは、この「htdocs」の中にデータを入れてデザインや動作チェックをしていくことになる。

STEP
index.phpをテキストで開いて、中身を入れ替える

テキストでもXcodeでもなんでもいいので、「index.php」を開く。
(自分はVSコード使ってる)

中身を開いたらいっぱい色々書かれているが、全部消して、下記のコードをコピペして上書き保存。
シンプルhtml/css。

<html>
<head>
<meta charset=”utf-8″ />
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” href=”stylesheet.css” />
<title>PHPサンプルページ</title>
</head>
<body>
<img src=”MAMP-PRO-Logo.png” alt=”画像”>
<p>HTMLで記述部分</p>

<!– ここより下がPHPの処理対象 –>
<?php echo ‘PHPで記述部分’; ?>
<!– ここより上がPHPの処理対象 –>

</body>
</html>

STEP
STEP2で作ったindex.phpをブラウザで見てみる

(普通にブラウザで見るときとMAMPで見るときの違いを確認するために見てみる)
chromeでもファイアフォックスでもedgeでもなんでもいいので、index.phpをブラウザで見てみる。
当然コードが丸見えでちゃんと表示されていない。

STEP
MAMPアプリを起動して、サーバースタート

MAMPアプリを起動して、右側の電源ボタン(Start Servers)をクリック。
サーバーオンにする。

STEP
ローカルサーバーを確認

ローカルサーバー(http://localhost)を見てみる。

ちゃんとコードが見えなくなって、画像やテキストが表示されている!
成功!

複数開発をしながらローカルサーバーを使うとき

一個上ではhtdocsフォルダの中に、直置きでphpファイルや画像を置いたけれど、開発や制作サイトごとにフォルダ分けなどして、ファイルがごちゃごちゃにならないように気を付ける。
自分一個しか使わないからー!っていうなら全然直置きでもいいけど……。

こんな感じに ↑

ローカルサーバーを見るときのパスは、各フォルダごとに

http://localhost/test/

みたいにフォルダの名前を後ろにくっつければOK。

MAMPのおかげで簡単になったローカルサーバー設置。

一昔前は、ローカルサーバーを構築するためにXAMPPをインストールしたり、ターミナルでPHPインストールされているか調べたり。
基本的にローカルサーバーを使うときはターミナルでコマンド使っていたらしい。

そんな面倒だった作業が、ぞうさん(MAMP)で簡単にローカルサーバー実装でき、かつWEBアプリなどをできるようになった。

すばらしい。

できる限りターミナルを使いたくないmacoにぴったりだ。
どれを見たいか、確認したいかも、ファイルをMAMPのhtdocsにぽいって入れるだけだし、簡単で助かる。

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

WEB系の仕事をしつつ法律の勉強をしている社会人大学生です。犬猫飼いたくてペット可マンションに家を買い替え進行中。保護犬猫希望。バスケのBリーグは宇都宮BREX推し(6/7/9/13/18/42)

目次