【2023年版】MAMPのインストールから使い方までを3ステップ解説!

mampでローカル環境構築

MAMPのインストール方法を知りたいなぁ。

指示通りにやるから、サクッとインストール + 使えるようになるまでを教えて!

環境構築って、初心者の方にとっては意味不明ですよね。。。

この記事では、指示通りにやるだけでMAMPがインストールでき、PHPファイルをブラウザで表示できるまでを解説しています。

つまりこの記事を読めば環境構築がサクッと終わるので、メインのプログラミングやコーディング学習に進めます♪

【MAMPを使えるようになるまでの道のり3ステップ】

  1. MAMPをダウンロード
  2. MAMPをPCにインストール
  3. hostsファイル等の初期設定

やぁみんな!僕が現役エンジニアのさかしだ。

僕も大昔に環境構築をするフェーズで気持ち悪くなった経験がある。。

この記事では僕と同じ経験をしないよう、MAMPでの環境構築をわかりやすく解説するぜ!

MacとWindows両方説明するから、目次で君が使っているOSを選んでそこから読み始めてくれ♪

※WindowsではMAMPより「XAMPP」というアプリで環境構築するのがおすすめなので、MAMPにこだわりがなければ以下の記事を参考にしてください。

XAMPPをサクッとインストールする方法と使い方を徹底解説!

↓↓弊社スクールなら入会金69,800円 + 月額10,800円だけで、PHPとWordPressやLaravelをマルっと学べます。

WEB食いオンラインスクールへのお申し込みはこちら

MAMP(マンプ)って何?なんで必要なの?

MAMPとは

MAMP(マンプ)とは、WEBアプリケーション作成の際に必要な複数のソフトウェアを、マルッと一つにまとめてパッケージ化したものです。

具体的には、Apache(アパッチサーバー)、PHP( PHPプログラム)、MySQL(データベース)がまとめて入っています。

中身についてはよくわからないと思うので、今の段階では「PHPファイルを自分のパソコンで表示するのに必要なものが全て詰まった宝箱」だと思ってもらえればOKです!

つまりMAMPだけインストールしておけば、お金をかけてレンタルサーバーを借りなくても、WEBサイトやアプリケーションを自分のパソコンで作成できる環境が整うということです。

これが一種の「環境構築をする」ということですね。

PHPでサービス開発する人だけでなく、WordPressサイトでのWEB制作、PHPフレームワークの「Laravel(ララベル)」を使ったWEB制作でも利用可能です◎

これからPHPを習得する予定の方は、必ずインストールしておきましょう!(特にMacユーザー)

ちなみにMAMPの名前は、ApacheやPHPなどの頭文字を取ってつけられていて、初めのMは「Macintosh」のMです。

昔はMac専用でしたが今はWindowsにも対応しているので安心してくださいね!

ふ〜ん、良くわかんないけどPHPファイルを開くにはMAMPをインストールする必要があるのか。

PHPファイルを表示するのに必要なものが全て詰まってるなんて、初心者にとっては嬉しいね♪

無料で簡単にPHPファイルをブラウザで確認できるから、PHP初心者は導入必須だぜ!

昔はWEBアプリケーションを作るときに、サーバーやデータベースとかをそれぞれ自分で用意しなきゃいけなかったから、大変だったらしいよ。

MAMPはその苦労を全て解決してくれる画期的な超便利ツールなのさ♪

実際の仕事で使うこともあるの?

今でもローカル開発でMAMPを使ってる人は多いよ♪

特にMacユーザーはXAMPPよりもMAMPを使う人が多いね。

うちの社員はMacユーザーが多くて、今でもMAMPを使ってWordPressサイトを構築することが多いぜ!

へぇ〜、現役エンジニアやWEBデザイナーも使うんだね。

XAMPPとどう違うの?

実は内容的に大きな違いはないから、どっちを使ってもいいんだ。

ただ、MAMPは元々Mac専用でMacと相性が良かった経緯があったから、今でもMacユーザーに選ばれてるってだけなんだよ。

あと、ネットの情報もMAMPはMacユーザー向け、XAMPPはWindowsユーザー向けのものが多いから、環境構築でのエラー解決策とかを探すのにも便利という理由もあるね。

だからなるべくMacならMAMP、WindowsならXAMPPって使い分けるのがおすすめだよ♪

郷に入れば郷に従うのは環境構築でも鉄則なんだね!

けどローカル開発って面倒くさそう…。

サーバーをレンタルしていきなり本番と同じように表示するのじゃダメなの?

WEB制作の現場では、環境を「本番用」と「ローカル用」に分けるのが基本だ。

というのも、試作段階でサービスを本番環境にデプロイ(使える状態にすること)して、エラーが出て評価が落ちるなんて最悪でしょ?

せっかく作ったのに水の泡になってしまうからね。

たしかに。。。

メイク途中で好きな人に会ったら「誰?(笑)」って言われるのと同じだね。

僕はメイクが崩れたキャバコも好きだよ。

一生ローカルにいてよ。

WEBサイトやサービスを作るたびに設定しなきゃダメ?

MAMPの設定は、基本的に一回やったら他のサイトでも使えるから安心してくれ◎

  1. MAMPをダウンロード
  2. MAMPをPCにインストール
  3. 初期設定

こんな風にたった3ステップで使えるようになるから、思ったより簡単だぜ!

じゃあ今回だけ…がむばるっ!

ちなみに、MAMPには無料版と、MAMP PROっていう有料版があるんだけど、無料版で十分だよ♪

さぁ、WEBサービス開発の一歩を踏み出そう!

Windowsユーザーはこちらをクリックして、Macの情報をスキップしてくださいね♪

【Macユーザー向け】MAMPのダウンロードからインストールまで

ここからは、実際にMAMPをインストールしていきます。

画像や解説に沿ってやっていただければ簡単にできますので、1つずつ進みましょう♪

MAMPを公式サイトからダウンロードしよう!

まずはMAMPの公式サイトからMAMPのファイルをダウンロードしましょう!

以下から公式サイトに飛んでください。

【MAMP公式サイトはこちら】
MAMP公式サイト

公式サイトに飛びましたら、ヘッダーメニューの「Downloads」をクリックします。

MAMPのインストール方法

ここではMacユーザー向けに解説しているので、リンゴマークのファイルを選択してください。

MAMPのインストール

「MAMP_MAMP_PRO_6.3.pkg」というインストーラーがダウンロードされたら、それをダブルクリックで開きましょう!

MAMPのインストーラー

よし!これでPHPファイルをブラウザで見られるんだね♪

んなわけあるか〜い。

でも、これで第一ステップ「MAMPのダウンロード」は完了だよ♪

この後もこんな感じで進むから、気楽に進めていこう!

MAMPを自分のPCにインストールしよう!

次は、MAMPを自分のPCにインストールする作業です。

インストーラーを開いたら、MAMPのインストールまでの案内が始まります。

「はじめに」の画面が出たら、「続ける」をクリックします。

MAMPのインストール

続いて「大切な情報」では英語で何やら色々と書いてありますが、「インストールされたらファイルの場所やファイル名を変えないでね」と言っているだけなので、「続ける」をクリックしてOKです。

MAMPのインストール

次に「使用許諾契約」というちょっと難しそうな画面が表示されますが、「規約に同意してね」と言っているだけなので「続ける」をクリックします。

MAMPのインストール

すると「このソフトウェアをインストールするには〜」というポップアップが表示されるので、問題なければ「同意する」を選択しましょう!

MAMPのインストール

「インストール先」という画面に切り替わったら「Macintoshにインストールするけどいい?」と聞かれるので、問題なければ「続ける」をクリックします。

(デフォルトだとApplicationsフォルダにインストールされます)

MAMPのインストール

「インストールの種類」が表示されたら、コンピューターの必要な空き容量について説明されるので、「インストール」をクリックしましょう!

MAMPのインストール

「インストーラが新しいソフトウェアをインストールしようとしています。」というポップアップが表示されたら、ご自身のMacのパスワードを記入し、「ソフトウェアをインストール」をクリックしてインストールを許可してあげます。

MAMPのインストール

インストールが開始されるので、1~3分程度待ちましょう!

MAMPのインストール

「インストールが完了しました」という嬉しいお言葉をいただいたら、「閉じる」をクリックします。

MAMPのインストール

最後にポップアップが表示され、「インストーラーはゴミ箱にいれる?」と聞かれるので、必要なければ「ゴミ箱に入れる」をクリックして、インストールは完了です♪

MAMPのインストール

Macユーザーの方は、こちらをクリックして「MAMPの使い方」へスキップしましょう♪

【Windowsユーザー向け】MAMPのダウンロードからインストールまで

WindowsでMAMPをインストールしていきましょう!

画像や解説に沿ってやっていただければ意外と簡単にできますので、1つずつ進みましょう♪

MAMPの公式サイトからダウンロードしよう!

まずはMAMPの公式サイトからMAMPのファイルをダウンロードします。

以下から公式サイトに飛んでください。

【MAMP公式サイトはこちら】
MAMP公式サイト

公式サイトに飛びましたら、ヘッダーメニューの「Downloads」をクリックします。

MAMPのインストール方法

ここではWindowsユーザー向けに解説しているので、Windowsマークのファイルを選択してダウンロードしましょう!

MAMPのインストール方法

ダウンロードが終わったらインストーラーをダブルクリックで開きます。

MAMPをPCにインストールしよう!

ここからはMAMPをお使いのPCにインストールしていきます。

以下のような「MAMP and MAMP PRO」という画面が出たら、「MAMP PRO」「Install Apple Bonjour(used for MAMP viewer)」のチェックマークを外し、「NEXT」をクリックしましょう!

MAMPのインストール

「License Agreement」でライセンスの同意を求められるため、「I accept the agreement」を選択して「NEXT」をクリックします。

MAMPのインストール

続いてMAMPをインストールするフォルダを選択します。

Cドライブがデフォルトですが、Cドライブの容量を開けておきたい場合はDドライブ(あれば)などを選択してあげましょう♪

MAMPのインストール

「Select Start Menu Folder」で「ショートカットはどこに作成する?」と聞かれるので、任意の場所を選択します。

MAMPの中がデフォルトとなります。

選択したら「NEXT」をクリックしてください。

MAMPのインストール方法

「select additional tasks」の画面になりましたら、「Create a desktop icon」にチェックを入れた状態で「NEXT」で次に行きます。

MAMPのインストール方法

「Ready to Install」画面になりましたら、内容を確認した上で「Install」をクリックしましょう!

MAMPのインストール方法

Windows版のMAMPは、これでインストールが完了です♪

MAMPの使い方

インストールが完了しましたら、ここからはMAMPの使い方を習得します。

習得するとはいえ、MAMPの使い方はとても簡単です。

なぜなら、Apacheというサーバーと、MySQLというデータベースを起動させれば完了だからです♪

コントロールパネルを開きましょう!

まずはMAMPを操作するための「コントロールパネル」を開きましょう。

MAMPをインストールしたフォルダの中にあるMAMPフォルダの、Macなら「MAMP.app」、Windowsなら「MAMP.exe」をダブルクリックするとコントロールパネルを開けます♪

MAMPの使い方

▼MAMPのコントロールパネル(バージョンやOSによってデザインは変わります)

MAMPのコントロールパネル

MAMPを起動・停止させるときには必ずコントロールパネルを使うから、場所だけは覚えておこうね!

MAMP PRO.appは有料版のアプリだから、必要なければ消しても大丈夫だぜ♪

あれ、なんか変な画面がでた。

MAMP起動時の広告

Macユーザーの場合この画面が出ちゃうね。

MAMPを毎回起動するごとに出て邪魔だから、左下の「Show this window when starting application」のチェックを外そう!

そうすれば次からは表示されなくなるよ♪

mampの広告の消し方

サーバーとデータベースを起動しよう!

コントロールパネルを開いたら、「Apache(サーバー)」と「MySQL(データベース)」を起動しましょう!

MAMPのコントロールパネル

Macの場合は右上の「start」をクリックすれば、どちらも起動してくれます。(MAMP6のデフォルトだと、コントロールパネルを開いた段階で起動した状態になっています)

MAMPのコントロールパネル

「start」の上が緑に変わり、文字が「stop」になったら、起動完了ですね♪

Windowsの場合は、「Start Servers」をクリックすれば起動します。

MAMPの使い方

「Apache Server」と「MySQL Server」の四角に色がついたら、起動完了です。

これがMAMPの基本的な使い方となります♪

え、以上?めっちゃ簡単じゃん!!

と思ったけど、Apacheがなんか起動してないっぽい…。

なぁぁあぁぁぁんでやぁぁぁ!!!!

Apacheが動かないことは結構あるから、冷静になろう!

解決策を以下に紹介していくよ♪

上手く起動した人は、以下は読み飛ばして欲しい。

Apache(アパッチ)が起動しない場合の解決策

まずはエラーの原因を特定しよう!

まずはApacheが起動しない原因を探ります。

原因を探るには、MAMP/logsの中にあるapache_error.logを開いてください。

ここに起こったエラーが記述されていくので、エラーが起こった日の日付を探し、エラー内容を確認します。

英語で何が書いてあるかわからないか場合が多いので、エラー文をブラウザにコピペし、原因と解決方法を検索しましょう!

誰かしらが同じエラーに直面し、解決策を提示してくれている場合が多いです。

その他のMAMPが動かない時の解決策リスト

エラーログを見てもいまいち解決策がわからなかった場合は、以下も参考にしてみてください。

envverのファイル名を変更してみる

PHPのバージョンを変更してみる

mod_perlが悪さをしている

ポートの競合、モジュールエラー

実は、ここまでの方法で解決しない場合もある。

原因不明の場合は、MAMPを再インストールしてみよう!

もう一度インストールすると、何事もなかったかのようにApacheが起動する場合があるぜ!

どうしても原因不明なエラーは起こるんだったね。

動くまでやり直し続けよう!

表示したいファイルの設置場所

ブラウザでPHPファイルを開くには、MAMPの「htdocsフォルダ」に開きたいファイルを設置する必要があります。

そのためMAMPを使ったWEB制作を行う場合は、必ずhtdocsフォルダにファイルを配置すると覚えておきましょう♪(htdocs/サイトのフォルダ/phpファイルという構造にするのがおすすめです)

MAMPの直下にhtdocsはあるので、探してみてくださいね。

以下の画像のように、htdocsの中にはフォルダをいくつも保存可能です。

htdocs

複数のWEBサイトを作る場合も安心ですね♪

htdocsに…ほっっぞーーーん!

これでローカル環境でブラウザからPHPファイルを確認できるってことだよね?

実はまだなんだ。。

これから「hosts(ホスツ)ファイル」と「vhosts(ブイホスツ)ファイル」とかを設定しないと、ブラウザでPHPファイルは確認できない。

いつもごめんな。

ががーーーん。。。

ファイル名もわけわかめだし、やりたくないよ〜!

なんでなんで?

ここまでの状態だと、ブラウザがどのファイルを開けば良いかわからない状態なんだよ。

でも大丈夫!簡単に設定できるから、一歩ずつ進めばキャバコでも誰でもできるものだぜ!

僕が手取り足取り教えるから安心してよ♡

体には触れない形でお願いします。

ヤバい…何言ってるか分からない、自分には出来ないかも。。
→ ここまできてもったいないので、挫折する前にスクールを検討しましょう♪
PHPを学べるスクール13社を現役エンジニアが徹底比較してみた。
※諦めなければ誰でもできるようになります。

↓↓弊社スクールなら入会金69,800円 + 月額10,800円だけで、PHPとWordPress・Laravelをマルっと学べます。

WEB食いオンラインスクールへのお申し込みはこちら

hosts(ホスツ)ファイルを設定しよう!

hostsファイルを設定しよう

ここまででMAMPのインストールと使い方を学んできました。

上記が設定できた状態は、PHPファイルを開く土台ができた状態です。

さてここからは、「作成したPHPファイルをブラウザで表示できるようにする」ための設定を行います。

その第一歩として「hosts(ホスツ)ファイル」の設定をしていきましょう!

hostsファイルって何?

hostsファイルというのは、ただのテキストファイルだ。

メモ帳とかでも開けるよ。

このhostsに情報を書き込むことで、IPアドレスと任意のURL(ドメイン)を紐づけることができるんだ。

ドメインって、webgui.jpみたいなURLの部分のことだよね!

IPアドレスってなぁに?

IPアドレスっていうのは、パソコンの識別番号(数字が並んだもの)のことだ。

実はパソコンとかサーバーとか、ネットにつなげられる機器には、ひとつひとつをネットワーク上で識別できるように、番号がふられているんだ。

その番号がIPアドレス。

ウェブサイトのデータが保存されているレンタルサーバーにも、IPアドレスがふられているぜ。

IPアドレス=住所っていう捉え方で問題ないよ!

英語のaddressって、住所っていう意味だしね。

IPアドレスについての説明動画、3つピックアップしておくぜ。

理解を深めたい時は見てみてくれ~!

良い動画だね!

なんとなくIPアドレスは理解したわ!

それで、なんでIPアドレスとドメインを紐づけないといけないの?

みんながブラウザで見ているURLって、それ単独だと住所の役割を果たせないのよ。

本当は、IPアドレスを指定しないといけないからね。

でもさ、「google.comにアクセスしたいな~」って思った時、ブラウザのURL欄にわざわざIPアドレスを打ち込むのって面倒でしょ?

うん、IPアドレスって数字だけだから、覚えられないし。。。

そうそう。

だからwebgui.jpみたいなURLを利用するのさ。

で、「webgui.jpにアクセスがあったら、このサーバーのIPアドレスにアクセスしてね~!」っていう設定をするんだ。

その役割を果たすのがhostsファイルってわけ。

うん、あんまり理解してないけど、とりあえずドメインとIPアドレスを紐づけろってことなんだね。

さっそくやってみよーっと!

あれ?hostsファイルが見当たらないよ。。。(泣)

もうやめたい。

hostsファイルは階層が深いところにあるから、普段触らないところにあるんだ。

hostsファイルの探し方から解説するぜ!

hostsファイルの場所

Macの場合

Macの場合、hostsファイルは以下にあります。

/private/etc/hosts

ファインダーを選択 → メニューバーの「移動」 → 「フォルダを移動」 → 「/private/etc」を選択して「移動」 → hostsファイルを探す

Macの場合は上記の流れでhostsファイルを見つけられます♪

また、ファインダーを選択した状態で「Cmd + Shift + G」のショートカットキーを使えば、すぐにフォルダを移動可能なので、試してみてくださいね!

▼以下記事もご参考になるかと思います。

【macOS】hostsファイルの場所と編集方法、書き換え方法

Windowsの場合

Windowsの場合、hostsファイルは以下にあります。

C:\Windows\System32\drivers\etc\hosts

hostsファイルの場所

▼見つからない場合はこちらの記事も参考にしてください。

hostsファイルの開き方・設定方法

hostsファイルはわりと深い階層にあり、アクセスするのが面倒なので、デスクトップにhostsのショートカットをおくのがおすすめです。

▼hostsショートカットの作成方法▼

hostsを管理権限で編集するショートカットを作成する

hostsファイル発見!

こんなところに隠れてやがったか。

意外と大切なファイルだからね。

コピーして別の名前(hosts2など)をつけて、バックアップを取っておくのをおすすめするぜ!

オッケー!編集編集…。

よしできた!

あれ?hostsファイルが保存できないよ?

hostsファイル編集時の注意点

hostsファイルは、普通に編集しても、保存ができない仕様となっています。

そのため、以下の方法で編集する必要があります。

Windowsユーザーはこちらをクリックしてhostsを編集しましょう!

Macでのhostsファイルの編集方法

Macの場合はhostsファイルの編集方法が3つありますが、Mac標準搭載のツール「ターミナル」を使ったやり方が1番簡単かと思います。

初めのうちは戸惑いますが、ターミナルを使えるようにすると便利なことが多いので、初めのうちからトライするのがおすすめです!

※ターミナルとは、「コマンド」と呼ばれる命令文を使って、自分のパソコンの設定などを変更するために使うツールです。

ターミナルでhostsファイルを開こう!

Finder→アプリケーション→ユーティリティの中にターミナルがあります。

ターミナルを開いたら、以下を入力してenterを押しましょう。

sudo vi /private/etc/hosts

パスワードの入力を求められるので、Macのパスワードを入力してください。

これでターミナル内にhostsファイルが表示されました。(以下のような画面が表示されればOKです)

hostsファイルの例

「i」を叩いて編集できるようにしよう!

キーボードで「i」を叩く(押す)と「INSERT」という表示が下にでます。

hostsファイルを編集する

この状態が編集できる状態です。

何を書くかについては後で詳しく解説するので、今は試しに「127.0.0.1 anshinweb.localhost」と記述しましょう。

「control + C」でインサートモードを終了しよう!

「127.0.0.1 anshinweb.localhost」と記述したら、「control + C」を叩きます。

こうすることで、編集モード(インサートモード)が終了されます。

「:wq」で保存しよう!

最後に、「:wq」というキーを叩けばhostsファイルは保存されます♪

「:(半角コロン)」wqです。

これでhostsファイルを編集・保存できました。

うぅ…気持ち悪くなってきた…。

ターミナルじゃなきゃダメ?

確かに最初は拒否反応でるよね(笑)

1番簡単なのはターミナルだと思うんだけど、他の方法でも編集できるから、ターミナルが嫌な人は以下サイトを参考にしてみてね♪

macでhostsを書き換える3つの方法

Windowsでのhostsファイルの編集方法

windowsの場合、hostsファイルは管理者権限を使って開かないと、保存することができません。

そのため、メモ帳を管理者権限で開きます!

Windowsボタン → Windowsアクセサリ → メモ帳を左クリック → その他 → 管理者として実行

上記の流れで簡単に実行可能なので、hostsファイルを編集するときはこの流れを覚えておくと良いでしょう♪

またウイルスソフトによっては、セキュリティの観点から、hostsファイルの保存を禁止させるものもあります。

例えば、Aviraというウイルス対策ソフトだと、設定画面で「Windows hostsファイルの書き込みを防ぐ」のチェックボックスを外しておかないといけません。

hosts編集時の注意点,hosts書き換え時の注意点

普通に保存はできない仕様だったのね。

さっそくhostsファイルの書き方を教えてちょ!

hostsの記述方法

hostsファイルの設定方法は、「IPアドレス(127.0.0.1)」を記述し、その横に「ドメイン名」を記載するだけです。

例えば、

127.0.0.1 yahoo.jp

と追記して保存すると、yahoo.jpにアクセスした時に、あなたのローカルパソコン(127.0.0.1)にアクセスされるようになります。

「127.0.0.1」と「yahoo.jp」の間には半角スペースが必要なことに注意しましょう。

追加する際の例を挙げます。

anshinweb.localhostというURLを追加する場合は、

127.0.0.1 yahoo.jp
127.0.0.1 anshinweb.localhost

という形で下に追記していきます。

以下画像のようになっていればOKですよ。

hostsファイルの例

文頭の#(シャープ)はコメントアウトです。

メモを残したい時に使うと良いでしょう。

anshinweb.localhostは、任意のURLで大丈夫です♪

ローカルで表示するためのドメインと認識しやすいよう、「サイト名」+「.localhost」と記載するのがおすすめです。

これでブラウザに「anshinweb.localhost」って記述したら、自分のパソコン(127.0.0.1)にアクセスしてくれるようになるぜ♪

これだけでいいんだ…思ったより簡単だ。

ところでさ、127.0.0.1ってIPアドレスでしょ?

他の人と同じものを複数回使ってもいいの?

127.0.0.1はIPアドレスのことなんだけど、「ループバックアドレス」ってもののひとつなんだ。

簡単にいうと「127.0.0.1を指定したら、自分のパソコンを見に行く」っていうルールが組み込まれてる。

例えば、僕のPCで127.0.0.1をブラウザに打ち込んだら僕のPCが指定されるけど、キャバコのPCで127.0.0.1をブラウザに打ち込んだらキャバコのPCが指定されるって感じだ。

だから他の人と同じでも、絶対にかぶらないから問題ないぜ。

じゃあ、「127.0.0.1 = 自分のPCにアクセスするための番号」って覚えておけばいいのかな?

そうね、その覚え方で問題ないぜ!

なんとなく理解した!

次は「vhosts」だっけ?

詳しく教えてよ!

vhostsの設定をしよう!

vhostsを設定しよう

vhostsは「virtual host(バーチャルホスト)」というもので、「二つ以上のWEBサイトを扱う運用方法」のことです。

最初から意味を理解する必要はありませんが、1つのIPアドレスで複数のサイトを運用する場合はvhostsの設定が必要だと覚えておきましょう!

これからいくつもローカルでサイトを作ると思いますが、新規サイトを立ち上げるたびにvhostsの設定が必要となります。

vhostsについてもう少し教えて。

積極的なんだから♡

hostsを設定することで、「IPアドレスとドメインの紐付け」までが完了したよね?

けど実はさ、hostsファイルを設定しただけだと「anshinweb.localhostが自分のPCのIPアドレス(127.0.0.1)と紐づいた」だけで、anshinweb.localhostにアクセスした時に”どのフォルダにあるファイルを表示すればいいのか”は、設定されていない状態なんだ。

だから、「anshinweb.localhostにアクセスした時は、ここのフォルダにあるファイルを表示して!」っていう設定をしないといけないんだよね。

ふんふん、フォルダの指定が必要なのね!

どのファイルをイジイジすればいいの?

Apacheの設定ファイル「httpd-vhosts.conf」をイジイジしていこう!

vhostsなんて聞くと難しく感じるかもしれないけど、コピペして一部を変えていくだけで設定できるから、安心してくれ♪

httpd.confの設定をしよう!

httpd.confは、httpd-vhosts.confの親のようなファイルです。

初期状態のMAMPでは、このhttpd-vhosts.confが有効化されていないので、反映されるように設定します。

まずはhttpd.confファイルを探してみましょう!

以下の階層にあります。

【Macの場合】
/Applications/MAMP/conf/apache/httpd.conf

【Windowsの場合】 
C:MAMP/bin/apache/conf/httpd.conf

httpd.confを開いたら、550~605行目ぐらいにある以下をいじります。

#Include conf/extra/httpd-vhosts.conf

もしくは、

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

といった記載になっているかもしれません(OSの環境によります)。

 

ここで何をするかというと、#(コメントアウト)を取り除きます。

コメントアウト(無効化)を取ることで、有効化されるのです。

//Windowsの場合▼
Include conf/extra/httpd-vhosts.conf
//Macの場合▼
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

上記のように、コメントアウトを外したら、httpd.confを保存しておきましょう。

次はApacheの設定ファイル「httpd-vhosts.conf」をイジイジしていこう!

vhostsなんて聞くと難しく感じるかもしれないけど、コピペして一部を変えていくだけで簡単だから安心してくれ♪

httpd-vhosts.confはどこにあるの?

httpd-vhosts.confは、MAMPフォルダの以下にあります。

【Macの場合】
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 

【Windowsの場合】
C:MAMP/bin/apache/conf/extra/httpd-vhosts.conf

httpd-vhosts.confが見つかったら、テキストエディタで開いてみましょう♪

vhostsの記述方法

以下をコピーした上で、httpd-vhosts.confに追記します。

意味も1つずつ見ていきましょう!

#【Macの場合】
# anshinweb.localhost
<VirtualHost *:8888>
    DocumentRoot "/Applications/MAMP/htdocs/anshinweb"
    ServerName anshinweb.localhost
</VirtualHost>

#【Windowsの場合】
# anshinweb.localhost
<VirtualHost *:8888>
    DocumentRoot "C:\MAMP\htdocs\anshinweb"
    ServerName anshinweb.localhost
</VirtualHost>

#はコメントアウト

# の後ろはコメントアウト(メモ)として使えるので、任意の文字を書いてOKです(どのサイトのvhosts設定かわかるようにするのが吉)。

DocumentRootはアクセス時に表示されるフォルダ

DocumentRoot(ドキュメントルート)というのが、anshinweb.localhostにアクセスした時に表示されるフォルダです。

上記でhttpd-vhosts.confを保存すると、anshinweb.localhost/test.htmlにアクセスした際に、/Applications/MAMP/htdocs/anshinweb/test.htmlが表示されるようになります。

(Windowsの場合は、C:\MAMP\htdocs\anshinweb\test.html)

ドキュメントルートはよく出てくるワードなので、ぜひ覚えておきたいですね!

ServerNameはhostsで発行したドメイン名と紐付ける

ServerNameは、紐づけるドメインです。

あなたがhostsで設定したドメインを入力してください。

うわぁ〜やる気失くす〜。

確かに意味わかんないよね〜(笑)

ポイントは、「DocumentRoot」と「ServerName」を変えれば、あとはコピペでOKってところだ!

2つだけね。

これ以上は無理よ。。。

新しく「webgui」ってサイトをローカルで作るなら、vhostsは以下のようになるよ!

#【Macの場合】
# anshinweb.localhost
<VirtualHost *:8888>
    DocumentRoot "/Applications/MAMP/htdocs/anshinweb"
    ServerName anshinweb.localhost
</VirtualHost>

# webgui.localhost
<VirtualHost *:8888>
    DocumentRoot "/Applications/MAMP/htdocs/webgui"
    ServerName webgui.localhost
</VirtualHost>

#【Windowsの場合】
# ahshinweb.localhost
<VirtualHost *:8888>
    DocumentRoot "C:\MAMP\htdocs\anshinweb"
    ServerName anshinweb.localhost
</VirtualHost>

# webgui.localhost
<VirtualHost *:8888>
    DocumentRoot "C:\MAMP\htdocs\webgui"
    ServerName webgui.localhost
</VirtualHost>

ホントだ!

変更してるのは2箇所だけだね♪

これならキャバコでもできそう!

基本は前回のものをコピペして2箇所変えるだけでOKだよ。

新しくローカルにwebサイトを作るたびにvhostsの追記が必要だから、忘れないようにしようね!

ローカルでもhttpsに対応させる場合のvhosts設定方法

ローカルでもhttpsに対応させたい場合は追記が必要です。

以下の記事に詳しく解説があるので、SSL環境を構築したい場合は参考にしてくださいね♪

MAMPでSSL環境を構築する方法

※SSL化でエラーが出る可能性も高いので基本は設定しないでOKです!

vhostsの設定後はApacheの再起動が必須

vhostsの設定は新規サイトを追加するたびに行いますが、vhostsの設定を行っただけでは反映されません。

httpd-vhosts.confに修正を加えたら、必ずApacheの再起動をするようにしましょう!

Apacheの再起動方法

Apacheの再起動は、コントロールパネルの「Apache」の「Stop」をクリックし、少し待って「Start」に切り替わるので、再度「Start」をクリックするだけで完了です(MAMPを毎回閉じる必要はありません)。

これで、httpd-vhosts.confに追記した設定が反映されます。

スタートした時にエラーが出てapacheが起動しなかった場合は、httpd-vhosts.confに何らかの記載ミスがありますので、見直しましょう。

うまく動けば、完了です!

新規サイトを作成してvhosts設定までしたのにブラウザで表示ができない場合は、Apacheの再起動を忘れている場合がかなり多いぜ!

httpd-vhosts.confに限らずMAMPのファイルをいじったら、再起動するという癖をつけよう!

実際にブラウザでPHPファイルを表示させてみよう!

PHPファイルを表示させてみよう

これまでの作業で、PHPファイルをブラウザで表示する準備が整いました。

試しに、あなたがhttpd-vhosts.confで設定したフォルダにPHPファイルを配置していきましょう!

「site01」という架空のサイトを作る想定でPHPファイルを表示してみましょう!

【PHPファイルをブラウザで表示させるまでの手順】

  1. MAMPのhtdocsにsite01というフォルダを作る(名前は任意)
  2. site01フォルダの中にindex.phpファイルを作成※中身は下記に記載
  3. hostsでsite01.localhostというURLを発行し、IPアドレスと紐付ける
  4. httpd-vhosts.confファイルにvhostsの設定を記述する
  5. XAMPPを起動 or 再起動
  6. ブラウザで表示

※index.phpの中身は以下のようにしておきましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MAMPのインストールデモ</title>
    </head>
    <body style="background: orange; color: white;">
        <?php
            echo 'MAMPのインストールからブラウザでの表示までできたぜ!';
        ?>
    </body>
</html>

ブラウザで表示させる際は、ブラウザに「https://site01.localhost:8888」と打ち込みます。(「:8888」は、MAMPのデフォルト設定だとURLの最後につける必要があります。)

ブラウザによっては、localhostの後ろのスラッシュ(/)まで入れないと表示されないことがあるので、注意が必要です。

HTTPSの場合は、設定が正しくても以下のような画面が出ます。

(ブラウザによって多少画面に違いがあります)

ブラウザでPHPファイルを表示させる

この場合は「site01 にアクセスする(安全ではありません)」をクリックすればOKです!

ブラウザで以下の画像のように文字を表示できたら完成となります!

PHPファイルをブラウザで表示してみる

ちゃんと表示されましたか?

うまく表示されない場合は、もう一度このページを見返してみましょう!

ここまでできれば、MAMPのインストールから使い方、設定をマスターしたといっても過言ではありません♪

ふおぉぉ…!!!

無事に表示できたよ!

素晴らしすぎるぜ!

これで環境設定は完了だから、あとはコーディングやプログラミングを存分に学んでもらえればOKだ!

正直、hostsとvhostsの設定はやってれば勝手に覚えるから、何度もこのページを見返してもらえば問題ないぜ。

【WordPressでオリジナルテーマを作れるようになりたい方はコチラ】
【初心者向け】WordPressテーマの自作方法を徹底解説!

phpMyAdminの開き方

phpmyadminでデータベースに触れよう!

最後に、データベースに触れるために「phpMyAdmin」の開き方について学習しましょう!

PHPでWEBサービスを作成していると「データベース」に触れる機会が増えてきますし、WordPressサイト作成にいたっては必ず必要だからです。

データベースを操作するには「phpMyAdmin」というツールを使います。

コントロールパネルからphpMyAdminを開こう!

phpMyAdminは、MAMPのコントロールパネルから開くことができます。

右上の「Web Start」をクリックし、MAMPのスタートページへ飛んでみてください。

phpMyAdminの開き方

スタートページに飛んだら、左上の「Tools▼」をクリックし、phpMyAdmin」を選択しましょう。

phpMyAdminの開き方

以下のような画面に移れば、phpMyAdminの表示が完了です♪

phpMyAdminを表示する

phpMyAdminでデータベースをいじるってことでOK?

その通り!

データベースって、コマンドでSQL文という言語を使わなきゃ操作できなかったんだけど、phpMyAdminが登場してからは直感的に操作できるようになったんだ♪

これからローカル開発でデータベースを触るってなったら、phpMyAdminを開くことになるから、開き方だけでも覚えておこう♪

【SQLについて学ぶならこちら】
SQLの勉強!基礎をガバガバに習得しよう

これでMAMPをダウンロード、インストール、初期設定の全てが完了だよ!

あとはPHPでWEBサイトやサービスを作りまくってくれ♪

あぁ〜〜疲れた。。。

2度と環境設定はしたくない…。

お疲れ様!

基本的には環境構築は最初だけだから安心してくれ♪

PHPのバージョンを変えたいときとか、入れ直す可能性もあるけど、2回目はすんなりできるはずだ。

↓↓弊社スクールなら入会金69,800円 + 月額10,800円だけで、PHPとWordPress・Laravelをマルっと学べます。

WEB食いオンラインスクールへのお申し込みはこちら

メニューを閉じる