今日は、MAMPの環境構築の備忘録です。ローカルサーバーを作成して静的サイトを表示させます。
こんにちは。Webコーダーのはるです。
新しい制作パートナーさんの開発環境がMAMPとCodeKitだったため、急遽、環境構築を行いました。
今回は、わたしのMAMP設定の備忘録を残します。
MAMPツールについて
MAMPについて簡単にまとめます。
MAMPとは
・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
ブラウザで閲覧できることを確認
でブラウザより閲覧が可能。〇〇には、最初に設定したローカルサーバーの名前が入ります。
わたしは「chk.templete」という名前にしたので、https://chk.templete:8890/ で接続してみます。
ポート番号の説明は、こちらがとてもわかりやすかったのでぜひ！
IT用語に全然強くないので、こちらのサイトにいつもお世話になっております。初心者にもわかりやすい噛み砕かれた解説が大好きです。
ブラウザのURL蘭に、https://chk.templete:8890/を入力してEnter。
アクセス許可のOKを選択。
選んだディレクトリを後悔する見た目ですが(笑)、選択したtempleteディレクトリのデータがローカルサーバーで表示されました！
あとがき
今まで、一緒にお仕事するクライアントさんの開発環境に合わせる、という経験をほぼする機会がなかったので大変勉強になりました。
さまざまな環境に対応できるように、勉強していきたいと思います。
次回は、同じく導入したCodeKitの設定や、MAMPの動的サイトの環境構築をアウトプットしたいと思います。
今日は簡単ですが以上です。
＊もりけん塾で、フロントエンドの技術をご指導いただいています。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
