【バーチャルホストにも対応】MacでSSL環境のローカルサーバを構築する方法
Web2017年12月29日
先日の記事でWindows10環境におけるXAMPPでSSL環境のローカルサーバを構築する方法をご紹介させていただきましたが、Mac OS Sierraでもチャンレジしてみました。MacではXAMPPを使わずにローカルサーバを複数立てていましたので、その延長線上として本記事では、MacでSSL環境のローカルサーバを構築する方法をご紹介させていただきます。
ローカルサーバのSSL有効化を行った環境
Macでは、以下の環境でローカルサーバのSSL有効化を行いました。
| OSのバージョン | Mac OS High Sierra（10.13.1） |
|---|---|
| Apacheのバージョン | 2.4.27 |
Windowsに比べて結構大変だった
今回、Windows10で構築した環境と同様に、以下の環境をゴールとしてMacでSSL環境を構築しました。
- バーチャルホストでSSL
- オレオレ証明書で発生する警告エラーを回避
- XAMPPもMAMPも使わず、デフォルトのApacheで対応
上記を実現するにあたってなかなかこれに合致する手順を紹介している記事はネット上に見つからず、困難を極めました。実現できたあとに手順を整理してみたらそこまで大変なものではなかったのですが、やり方を調べるのにめちゃくちゃ時間かかりましたね。。。主に以下のページを参考に色々試し、無事にやりたかったことが実現できました。先人に感謝です。
繰り返しになりますが、このあとご紹介する手順の前に、以下の記事の手順で複数のローカルサーバを作れるようにしておく必要があります。
MacでSSL環境のローカルサーバを構築する手順
複数のローカルサーバを立てられるようにできたら、以下の手順でSSL環境の構築を行います。今回、「ssl」というドメインネームで、「https://ssl/」というローカルサーバを見れるようにします。
- apache2にSSL証明書を格納するフォルダを作成
- オレオレSSL証明書の作成
- httpd.confの編集
- httpd-ssl.confの編集
- httpd-vhosts.confでバーチャルホストを追加
- hostsファイルを編集
- /Users/ユーザ名/Sites/ssl/index.htmlを用意
- Apacheを再起動
- ローカルサーバを開く
①apache2にSSL証明書を格納するフォルダを作成
ターミナルで以下のコマンドを叩いて、/etc/apache2/ssl/というフォルダを作成しておきます。
sudo mkdir /etc/apache2/ssl②オレオレSSL証明書の作成
ターミナルで以下のコマンドを実行し、ローカルのみで使えるオレオレSSL証明書（自分専用のローカルのみで使える証明書）を作成します。
sudo openssl genrsa -out /etc/apache2/ssl/ssl.key 2048sudo openssl req -new -x509 -key /etc/apache2/ssl/ssl.key -out /etc/apache2/ssl/ssl.crt -days 3650 -subj /CN=localhostsudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /etc/apache2/ssl/ssl.crt上記のコマンドを全て実行すると、以下のファイルが作成されていると思います。
- /etc/apache2/ssl/ssl.crt
- /etc/apache2/ssl/ssl.key
③httpd.confの編集
/etc/apache2/httpd.confを編集します。
デフォルトのApacheでは、SSLに必要ないくつかのモジュールはコメントアウトされているため、以下の3箇所に変更を加えます。
#LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.soLoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so#LoadModule ssl_module libexec/apache2/mod_ssl.soLoadModule ssl_module libexec/apache2/mod_ssl.so#Include /private/etc/apache2/extra/httpd-ssl.confInclude /private/etc/apache2/extra/httpd-ssl.conf④httpd-ssl.confの編集
/etc/apache2/extra/hhttpd-ssl.confを編集します。
SSL証明書と秘密鍵の読み込みパスをそれぞれ、以下のように変更します。
- ※144行目と154行目あたり
SSLCertificateFile "/private/etc/apache2/server.crt"SSLCertificateFile "/private/etc/apache2/ssl/ssl.crt"SSLCertificateKeyFile "/private/etc/apache2/server.key"SLCertificateKeyFile "/private/etc/apache2/ssl/ssl.key"⑤httpd-vhosts.confでバーチャルホストを追加
バーチャルホスト「ssl」を設定します。/etc/apache2/extra/httpd-vhosts.confをエディタで開いて、一番下に以下の記述を加えます。
<VirtualHost *:443>
ServerName ssl
DocumentRoot "/Users/ユーザ名/Sites/ssl"
SSLEngine on
SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
SSLCertificateFile /etc/apache2/ssl/ssl.crt
SSLCertificateKeyFile /etc/apache2/ssl/ssl.key
<Directory "/Users/ユーザ名/Sites/ssl">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
</VirtualHost>⑥hostsファイルを編集
以下の記述を書き加えます。
127.0.0.1 ssl
::1 ssl⑦/Users/ユーザ名/Sites/ssl/index.htmlを用意
確認用として、適当なindex.htmlを/Users/ユーザ名/Sites/ssl/直下に格納しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ssl</title>
</head>
<body>ssl</body>
</html>⑧Apacheを再起動
ターミナルで以下のコマンドを叩いて、Apacheを再起動します。
sudo apachectl restart⑨ローカルサーバを開く
ここではChromeで開いた場合となります。「https://ssl/」にアクセスし、セキュリティ警告画面が表示されたら「詳細設定」をクリックします。
続けて、「sslにアクセスする（安全ではありません）」をクリックします。
ローカルサーバが表示されれば成功です。
セキュリティ警告が出ないよう「保護された通信」とする方法
ここまでの手順でSSL環境のローカルサーバは構築できますが、見ての通り信頼されていない証明書なので「保護されていない通信」と表示されています。
さらに以下の手順で信頼された証明書を作成することで、「保護された通信」のローカルサーバとすることが可能です。
理解できない箇所があっても、以下の手順通りにやれば大丈夫です。
- コマンドで作成したSSL証明書を削除
- キーチェーンアクセスでSSLサーバ証明書を作成
- 信頼する証明書として設定
- 証明書と秘密鍵を生成
- 証明書と秘密鍵のファイル形式を変更
- 証明書と秘密鍵を/private/etc/apache2/ssl/直下に格納
- Apacheを再起動
- ローカルサーバを開く
①コマンドで作成したSSL証明書を削除
先ほどコマンドで作成した、以下のオレオレ証明書を削除します。
- /etc/apache2/ssl/ssl.crt
- /etc/apache2/ssl/ssl.key
②キーチェーンアクセスでSSLサーバ証明書を作成
先ほどのようにコマンドではなく、Macのアプリ「キーチェーンアクセス」で証明書の作成を行います。アプリケーションの「ユーティリティ」内にある「キーチェーンアクセス」を起動し、メニューバーから[証明書アシスタント]-[証明書を作成]をクリックします。
ここでは名前は「ssl」としました。固有名のタイプは「自己署名ルート」、証明書のタイプは「SSLサーバ」とし、「デフォルトを無効化」にチェックを入れた状態で、「続ける」をクリックします。
「続ける」をクリックします。
シリアル番号と有効期間はそのまま編集せず、「続ける」をクリックします。
証明書の個人情報を入力します。今回ローカルでのみ使うのでほとんど適当でOKです。名前だけ「ssl」としました。入力したら「続ける」をクリックします。
鍵ペア情報で設定する「鍵のサイズ」と「アルゴリズム」はデフォルトのまま、「続ける」をクリックします。
鍵用途拡張領域は「署名」と「鍵の暗号化」にチェックを入れ、「続ける」をクリックします。
拡張鍵用途拡張領域は「SSLサーバ認証」にチェックを入れ、「続ける」をクリックします。
基本制約拡張領域は何もチェックせず、「続ける」をクリックします。
サブジェクト代替名拡張領域は、dNSNameに今回設定するローカルサーバ「ssl」を入力し、iPAdressには「127.0.0.1」を入力し、「続ける」をクリックします。
証明書を保管するキーチェーンを指定します。「ログイン」を選択し、「作成」をクリックします。
これで証明書が作成されました。「完了」をクリックします。
③信頼する証明書として設定
次に、作成した証明書を信頼する証明書として設定します。
キーチェーン「ログイン」、分類「全ての項目」から先ほど作成した証明書を見つけます。
右クリックから「情報を見る」をクリックします。
「この証明書を使用するとき」を「常に信頼」に変更します。これでブラウザがこの証明書を信頼できるものと判断するようになります。
④証明書と秘密鍵を生成
次に、証明書と秘密鍵を生成します。先ほどの証明書にて右クリックから「"ssl"を書き出す」をクリックします。
名前は「ssl」とし、場所はぼかしを入れていますがホームディレクトリを指定しました。フォーマットは「証明書（.cer）」とし、「保存」をクリックします。
続けて秘密鍵を書き出します。秘密鍵にて右クリックから「"ssl"を書き出す」をクリックします。
名前は「ssl」とし、先ほどと同様ホームディレクトリに生成します。フォーマットは「個人情報交換（.p12）」とし、「保存」をクリックします。
⑤証明書と秘密鍵のファイル形式を変更
ターミナルで以下のコマンドを叩き、証明書と秘密鍵をApacheで使える形式に変更します。まずは以下のコマンドでホームディレクトリに移動します。
cd /Users/ユーザ名/続けて、以下のコマンドで証明書のエンコーディング形式をDERからPEMに変更し、拡張子を「.cer」から「.crt」に変更します。
openssl x509 -in ssl.cer -inform DER -out ssl.crt -outform PEM続けて、以下のコマンドでssl.p12から秘密鍵を取り出したssl.keyを作成します。
openssl pkcs12 -in ssl.p12 -nocerts -nodes -out ssl.keyこれで、ホームディレクトリ直下に「ssl.crt」と「ssl.key」が生成されています。
⑥証明書と秘密鍵を/private/etc/apache2/ssl/直下に格納
ホームディレクトリ直下に生成された「ssl.crt」と「ssl.key」を「/etc/apache2/ssl/」直下に移動させます。
⑦Apacheを再起動
ターミナルで以下のコマンドを叩いて、Apacheを再起動します。
sudo apachectl restart⑧ローカルサーバを開く
「https://ssl/」にアクセスし、「保護された通信」と表示されていれば成功です。
Firefoxでは相変わらず警告が出る
Windowsでもそうなんですが、MacもここまでやったとしてもFirefoxでは相変わらず警告が表示されるので、FirefoxでSSLのローカルサーバを表示する場合はブラウザ上で例外認証する必要があります。
まとめ
httpd.confでモジュールをインクルードしたらApache自体が起動しなくなったり「保護された通信」とするやり方がわからなかったり、結構つまづきポイントがありました。
このあたりのMacの情報はあまり多くないこともあって、Windowsに比べてMacでローカルサーバのSSL環境を構築するのはかなり苦労しました。
今後世の中が常時SSL化への動きを加速させていくことは間違いないので、MacでもローカルでSSL環境を構築しておけば検証が捗りますね。万が一SSLのテスト環境が用意できない場合はなおさら重宝するんじゃないかと思います。
MacでローカルサーバでSSL環境を構築される際は、本記事がご参考になれば幸いです。
この記事を読んでいる方にオススメの記事
- WebGoogleマップのiframeをレスポンシブWebデザインで埋め込む方法
- Web【昇順/降順で並べ替え】sort()メソッドを使ってコンテンツを並べ替えるjs
- Web【ファミリーにおすすめ！】富士急ハイランドのお得な割引についてご紹介
- Web【軽くて安くてオシャレ！】眼鏡市場のゼログラがとってもオススメな件
- Web【無料でできる！】UQ WiMAXをテストできる「Try WiMAX」を申し込んでみた
- Web【必読！】DreamWeaverでの正規表現の使い方まとめ
- ※承認制のため、即時には反映されません。
カテゴリー
最新の記事
2024年3月分の住宅ローン返済結果住宅ローン2024年4月1日
- 2024年2月分の住宅ローン返済結果
住宅ローン2024年3月1日
- 2024年1月分の住宅ローン返済結果
住宅ローン2024年2月1日
- 2023年12月分の住宅ローン返済結果
住宅ローン2024年1月4日
- 2023年11月分の住宅ローン返済結果
住宅ローン2023年12月1日
- 2023年10月分の住宅ローン返済結果
住宅ローン2023年11月1日
- 2023年9月分の住宅ローン返済結果
住宅ローン2023年10月2日
- 2023年8月分の住宅ローン返済結果
住宅ローン2023年9月1日
- 2023年7月分の住宅ローン返済結果
住宅ローン2023年8月1日
- 2023年6月分の住宅ローン返済結果
住宅ローン2023年7月3日
人気の記事
【100均のみ！】ダイソーのワイヤーネットを使いテレビ周りのベビーフェンスをDIYで作成DIY2016年12月5日
- 【発行にかかる時間や手数料は？】マイナンバーカードをオンラインで発行申請する手順をご紹介
Web2017年4月17日
【住宅購入者必読！】不動産ジャパンではレインズと同等の物件情報検索が可能！Web2016年8月31日
- 【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法
Web2017年3月27日
【SVN利用者へ】Windows10でTortoise SVNのアイコンオーバーレイが表示されなくなった場合の対処方法Web2018年1月19日
【おすすめ子供乗せ非電動自転車！】丸石サイクルの[ふらっかーず シュシュ]を購入しレインカバーとカゴを付けたのでレビューDIY2016年10月31日
【WordPress】プラグインなしでAMPに対応する方法WordPress2016年9月2日
- htaccessで特定のディレクトリやページを除外して301リダイレクトする方法
Web2018年3月16日
【調光・調色機能付き！】ニトリでLEDシーリングライトを購入したのでレビューDIY2017年1月16日
- 【ベビーフェンス第2弾！】ニトリの突っ張り棒とワイヤーネットで、頑丈なベビーフェンスをDIY
DIY2017年6月5日
過去の記事
RIO さん
ありがとうございます！本当に助かりました。
手順もわかりやすく、良かったです。
admin さん
＞RIO様
コメントありがとうございます！
ご参考になったようでよかったです。
引き続き等当ブログをよろしくお願いいたします。
この記事にコメントする