MAMPの環境構築 / ローカルサーバーを作成して静的サイトを表示させる

Web制作

今日は、MAMPの環境構築の備忘録です。ローカルサーバーを作成して静的サイトを表示させます。

こんにちは。Webコーダーのはるです。

新しい制作パートナーさんの開発環境がMAMPとCodeKitだったため、急遽、環境構築を行いました。

今回は、わたしのMAMP設定の備忘録を残します。

本記事のゴール
・MAMPの設定をして、ローカルサーバーで静的サイトのデータを閲覧する
(動的サイトは後日..!)

MAMPツールについて

MAMPについて簡単にまとめます。

MAMPとは

・Mac
・Apache
・MySQL
・PHP  の略でMAMP(マンプ)。

動的サイトのローカルサーバーを作るのに使用されますが、もちろん静的サイトの閲覧も可能です。もともとMac用に開発されたツールですが、現在はWindows用もあります。

今回、構築したのは静的サイトのファイルを表示させるまで、です。MAMP PROという有料ツールもありますが、今回はフリー版を使用しました。

MAMPの環境構築

まず、MAMPの設定です。

MAMPの公式サイトより「Free Download」をクリック。案内にそってインストールを進めます。(インストールの手順についてはこちらが参考になりました:Chot design)

インストール後、MAMPを起動します。このような画面が開きます。

今、お試しでMAMP PROの表示になってしまっています..。

ここから、実際にローカルサーバーを作成して、静的データを閲覧していきます。

ローカルサーバーを作成する

まず、画面、左下の + ボタンを押下。

「EMPTY」を選択し「continue」を押下。

Nameに任意の名前を入力。Document rootには、「choose...」から表示させたいデータのルートディレクトリを選択します。今回は、配布中のテンプレートを表示させてみることにしました。

「Create Host」を押下。

左側の画面に「chk.templete」(自分で設定したName)がお家マークと一緒に表示されました!ローカルサバーの出来上がりです。

右上のステータスがStopとなっていますが大丈夫です。この状態がStart(Run)の状態で、押せばサーバーがStopになります。このままでOK。

SSLを機能させる

SSLが使えるように設定します。

MAMPツールのファイルから、configファイルをたどります。パスは以下です。

/Applications/MAMP/conf/apache/httpd.conf

 こちらのhttpd.confファイルを、エディターで開きます。

617行目に「# Secure (SSL/TLS) connections」の項目があるので、その下の行のコメントアウト(#)を外す。

Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

configファイルを保存する。Ctrl + S

ブラウザで閲覧できることを確認

https://〇〇:8890/

でブラウザより閲覧が可能。〇〇には、最初に設定したローカルサーバーの名前が入ります。

わたしは「chk.templete」という名前にしたので、https://chk.templete:8890/ で接続してみます。

:8890はポート番号です。ポート番号とは、ネットワークを通じたデータの送受信の際に通過する「ドア」のような役割です。たくさんのドアがあり、その中の1つを通ってデータは送受信されます。ネットワークとパソコンの間にあるドアの番号がポート番号です。

ポート番号の説明は、こちらがとてもわかりやすかったのでぜひ!

IT用語に全然強くないので、こちらのサイトにいつもお世話になっております。初心者にもわかりやすい噛み砕かれた解説が大好きです。

ブラウザのURL蘭に、https://chk.templete:8890/を入力してEnter。

アクセス許可のOKを選択。

選んだディレクトリを後悔する見た目ですが(笑)、選択したtempleteディレクトリのデータがローカルサーバーで表示されました!

 

 

あとがき

今まで、一緒にお仕事するクライアントさんの開発環境に合わせる、という経験をほぼする機会がなかったので大変勉強になりました。

さまざまな環境に対応できるように、勉強していきたいと思います。

次回は、同じく導入したCodeKitの設定や、MAMPの動的サイトの環境構築をアウトプットしたいと思います。

今日は簡単ですが以上です。

 

*もりけん塾で、フロントエンドの技術をご指導いただいています。
Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

タイトルとURLをコピーしました