MAMPでMacのローカル環境にSSL(https://localhost)を設定する方法

Advertisement

Macのローカル環境でSSL(https://localhost)を使えるようにするための設定方法をまとめました。手順が複雑で忘れてしまいそうなんで(「NHKなんで…」的に)。

サーバ証明書と鍵を作る

以下の手順でサーバ証明書を設定します。以下の作業はすべてコマンドラインで行います。opensslというツールが必要になるのでHomebrewなどでインストールする必要があります。

最終的には以下の2つのフィルを作成するために一連の作業を行います。

  • server.crt(サーバ証明書)
  • server.key(サーバ秘密鍵)

以下、すべて/Applications/MAMP/conf/apache/内にkeysというディレクトリを作って作業をします。まずはディレクトリを作って、そのディレクトリに移動しましょう。

$ cd /Applications/MAMP/conf/apache/keys/

1. ローカル認証局の秘密鍵を作る

$ openssl genrsa -des3 -out local-ca.key 2048

パスフレーズを聞かれるので、入力してメモっておきます。あとで使います。

2. ローカル認証局の証明書を作る

$ openssl req -x509 -new -nodes -key local-ca.key -sha256 -days 1825 -out local-ca.pem

先ほどメモったパスフレーズを入力すると、いろいろ質問されるので「Common Name」のところだけ「localhost」と入力して、残りはEnterを入力します。

Enter pass phrase for local-ca.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) []:
State or Province Name (full name) []:
Locality Name (eg, city) []:
Organization Name (eg, company) []:
Organizational Unit Name (eg, section) []:
Common Name (eg, fully qualified host name) []:localhost
Email Address []:

これでlocal-ca.pemという(オレオレ)ローカル認証局の証明書ができました。

3. サーバの秘密鍵を作る

$ openssl genrsa -out server.key 2048

4. 証明書署名要求(CSR)を作る

$ openssl req -new -key server.key -out server.csr

5. Extension Fileを作る

以下の内容でv3.extというファイルを作成します。次のステップで使います。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

6. サーバ証明書を作る

$ openssl x509 -req -in server.csr -CA local-ca.pem -CAkey local-ca.key -CAcreateserial -out server.crt -days 1825 -sha256 -extfile v3.ext

これでApacheの設定に必要な2つのファイル作成が完了しました。

  • server.crt
  • server.key

キーチェーンに証明書を追加する

ChromeとSafariで下のキャプチャのようなセキュリティの警告が表示されるのを防ぐために、キーチェーンに証明書を追加します。Firefoxはこの設定をしても警告ページが出てきます。Chromeは73.0.3683.86、Safariは12.1 (14607.1.40.1.4)、Firefoxは66.0.2で確認しました(いずれもmacOS Mojave 10.14.4)。

Chromeのセキュリティの警告ページ

local-ca.pemをキーチェーンに追加する

先ほど作ったlocal-ca.pemというファイルをキーチェーンに追加します。キーチェーンアクセスを開いてサイドバーの「システム」にファイルをドロップします。パスワードを入力すると、以下のように「localhost」の証明書が追加されます。

キーチェーンに証明書を追加した画面

証明書をダブルクリックするとウィンドウが出てくるので、「信頼」を開いて「この証明書を使用するとき:」のドロップダウンから「常に信頼」を選びます。

キーチェーンに追加した証明書の信頼設定の変更画面

これで設定は完了です。

MAMPとApacheを設定する

はじめに注意!もしもの時のために、以下で変更する設定ファイルはバックアップを取っておきましょう。ちなみに、ここで使っているのはMAMP 5.3です。

MAMPでApacheのポートを80にする

MAMPの「Preferences」の「Ports」で「Apache Port」を80にします。

httpd.confの編集

MAMPのApacheの初期設定ではSSLの設定ファイルの読み込みがコメントアウトされています。httpd.conf(Apacheの設定ファイル)で、以下のように「#」を取ってコメントを外します。

# Secure (SSL/TLS) connections
Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

httpd-ssl.confの編集

「SSL Virtual Host Context」のセクションの以下の4つを変更すれば設定完了です。

httpd-ssl.confで設定する項目
項目 設定
DocumentRoot サイトのルートディレクトリ
ServerName localhostに設定
SSLCertificateFile さっき作ったserver.crtファイルを指定
SSLCertificateKeyFile さっき作ったserver.keyファイルを指定

僕のローカル環境では以下のように設定されています。

##
## SSL Virtual Host Context
##

<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/Users/rriver/Sites/parashuto.com/site"
ServerName localhost
ServerAdmin you@example.com
ErrorLog "/Applications/MAMP/Library/logs/error_log"
TransferLog "/Applications/MAMP/Library/logs/access_log"

#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on

#   SSL Cipher Suite:
#   List the ciphers that the client is permitted to negotiate.
#   See the mod_ssl documentation for a complete list.
SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL

#   Server Certificate:
#   Point SSLCertificateFile at a PEM encoded certificate.  If
#   the certificate is encrypted, then you will be prompted for a
#   pass phrase.  Note that a kill -HUP will prompt again.  Keep
#   in mind that if you have both an RSA and a DSA certificate you
#   can configure both in parallel (to also allow the use of DSA
#   ciphers, etc.)
SSLCertificateFile "/Applications/MAMP/conf/apache/keys/server.crt"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-dsa.crt"

#   Server Private Key:
#   If the key is not combined with the certificate, use this
#   directive to point at the key file.  Keep in mind that if
#   you've both a RSA and a DSA private key you can configure
#   both in parallel (to also allow the use of DSA ciphers, etc.)
SSLCertificateKeyFile "/Applications/MAMP/conf/apache/keys/server.key"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-dsa.key"

これで全ての設定完了です!

参考にさせてもらったサイト

以下のサイトを参考にさせていただきました。ありがとうございました!

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です