Webブラウザで表示されるWebサイトを構築するためにはWebサーバーが必要です。
Macでは、Webサーバー機能をもつ「MAMP(マンプ)」というソフトウェアをインストールします。MAMPは、Webサーバー機能だけでなく、PHPやデータベースの開発をサポートする機能も備えています。
![MAMPの概要図](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_summary_1_compressed-1024x532.png)
MAMPのダウンロード
こちらからMAMPのダウンロードページを開きます。
※このMacについてを開き、バージョンが合致する方を選択します。
![MAMPのダウンロード](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_download_7_compressed-1-1024x464.png)
![MAMPのダウンロード](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_download_4_compressed-1024x539.png)
![MAMPのダウンロード](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_download_5_compressed-1024x745.png)
![MAMPのダウンロード](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_download_6_compressed-1024x483.png)
これで、MAMPのインストーラーである「MAMA_MAMP_PRO_*.pkg」がダウンロードできました。
MAMPのインストール
ダウンロードしたインストーラー「MAMA_MAMP_PRO_*.pkg」をダブルクリックして実行します。
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_1_compressed-1024x729.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_2_compressed-1024x733.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_3_compressed-1024x733.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_4_compressed-1024x731.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_5_compressed-1024x731.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_6_compressed-1024x731.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_7_compressed-1024x735.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_8_compressed-1024x729.png)
![MAMPのインストール](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_install_9_compressed-1024x731.png)
これで、MAMPがインストールできました。
Webサーバーの起動
以下の手順に従って、Webサーバーを起動します。
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_1_compressed-1024x891.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_2_compressed-1024x463.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_3_compressed-1024x465.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_4_compressed-1024x829.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_5_compressed-1024x819.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_6_compressed-1024x828.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_7_compressed-1024x829.png)
![MAMPの起動](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_8_compressed-1024x829.png)
「Apache」がWebサーバーの名称です。(ここではApacheを使いますが、他にもNginxやIISという名前のWebサーバーがあります。色々な種類のWebサーバーがある、と覚えておいて下さい)
これで「Apache(=Webサーバー)」が起動した状態になり、Webブラウザからの指示を受け付けることができるようになりました。
Webブラウザを起動します。
※Google Chromeを推奨します。以後、断りがない場合はGoogle Chromeを使用します。
WebブラウザのURLで「http://localhost」と入力して実行します。(localhost=ローカルの同一環境にあるWebサーバーに指示する、という意味です)
以下のようなページ(apacheのデフォルトのWebページ)が表示されればOKです。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/mamp_9_compressed-1024x339.png)
同様に、WebブラウザのURLで「http://localhost:80」と入力して実行してみて下さい。同じWebページ(ApacheのデフォルトのWebページ)が表示されるはずです。
これは「http://localhost」と「http://localhost:80」が同じであることを示しています。WebブラウザはWebサーバーの80番ポートへの指示をデフォルトとしているため、「http://localhost」と実行すると、内部的には「http://localhost:80」に変換して指示しています(=ローカルの同一環境にあるWebサーバーの80番ポートに指示しています)。
ポートとは、フロントエンドからのアクセスポイントを指します。ポート番号ごとに異なるアクセスポイントを持つことができます。
以下が概要図になります。
![ポートの概要図](https://tech-popeye.com/wp-content/uploads/2021/11/port_summary_compressed-1024x515.png)
同様に、WebブラウザのURLで「http://127.0.0.1」と入力して実行してみて下さい。同じWebページ(ApacheのデフォルトのWebページ)が表示されるはずです。
これは「http://localhost」と「http://127.0.0.1」が同じであることを示しています。すなわち、”localhost” = “127.0.0.1”であり、Webブラウザが内部的に変換して指示しているということです。
出来ましたか!?おめでとうございます。これであなたも、Webエンジニアとして大きな一歩を踏み出しました!
いまはApacheのデフォルトのWebページが表示されていますが、これからあなたのWebページを作成していきます。
本節の説明は以上になります。