MAMP Proでローカル開発環境をHTTPS化する

Macでは定番のWeb開発のローカル環境を簡単に構築することができるMAMP。
MAMPには通常の無料版MAMPと有料版のMAMP PROがありますがMAMP Proを使うと簡単にローカル開発環境をHTTPS化することができます。

MAMP PROでローカルホストの作成からHTTPS化まで解説します。

MAMPの設定

ポートの設定

1. MAMP ProメインウィンドウのサイドサイドバーのメニューからPortsを選択する
2. 画面中央あたりのSet ports to80,81,443,7443,3306 & 11211と書かれたボタンを押す
   ボタンを押すと上部のApache、Nginx、MySQLのポート番号が変更されます。
   ※ポート番号を初期値に戻す場合は下のSet default MAMP portsボタンを押してください。
3. 右下のSaveボタンを押すと設定が反映される

新規ホストの作成

1. MAMP Proのメインウィンドウから+(Create New Host)から新規ホストの入力ウィンドウを開く
2. 開いたウィンドウのNameにホスト名をつける
   ホスト名がURLになります。https://(ホスト名)/
   今回はssl-testとしました。
3. ドキュメントルートとなるフォルダを選択する
   https://ssl-test/にアクセスした時に表示されるフォルダを選択します。
4. ホスト名とドキュメントルートを設定したらCreate Hostボタンでホストが作成される

ここまでの設定で右下のSaveボタンを押して設定反映させ、ブラウザでhttp://ssl-test/にアクセスするとドキュメントルートのindexが表示されます。

SSLの設定

1. HTTPS化したいホストを選択する
2. 右側のタブからSSLを選択する
3. SSL設定メニューのSSLチェックボックスにチェックをする
4. Create self-signed certificate…ボタンを押してSSL証明書の作成ウィンドウを開く

証明書を作成する

1. 証明書の作成ウィンドウが開いたら設定値を入力してGenerateボタンを押す
   設定値は適当でOKです。
2. 保存先を指定して証明書を保存する

1. Certificate fileとCertificate key fileに先程保存したファイルが自動的に選択される
2. 右下のSaveボタンを押すと設定を保存してサーバーが再起動して設定が反映される

証明書の設定

ここまでの設定でhttps://ssl-test/にアクセスすると保護されていない通信としてセキュリティ警告が出てページが表示できません。

キーチェーンアクセスの設定

1. MacOSの標準アプリキーチェーンアクセスを起動する
   
2. サイドバーからシステムを選択する
3. 上部の+ボタンから新規のキーチェーンアクセスを作成する
4. MAMP Proで作成した証明書ファイル○○.crtを選択する

※設定変更する場合に何度かパスワード入力が求められます。

追加された証明書を右クリックして情報を見るを選択する

1. 信頼の左側▶をおして信頼の設定項目を表示する
2. この証明書を使用するとき：の設定をシステムデフォルトを使用から常に信頼に変更する
3. ウィンドウを閉じるて設定をアップデートする

https://ssl-test/にアクセスするとChromeの場合URL横に鍵マークが表示され、鍵マークを押すとこの接続は保護されていますと表示されます。
無事ローカル環境をHTTPS化することができました。