キーチェーンアクセスで自己証明書を作成しローカルSSLサーバーを立ち上げる

SafariでWebRTCするときに、HTTPS通信でないとgetUserMediaが許可されなかったので自分で証明書を作ってローカルSSLサーバーを立ち上げました。


# キーチェーンアクセスでサーバ証明書を作成する
キーチェーンアクセスのメニューバーから
[キーチェーンアクセス]>>[証明書アシスタント]>>[証明書を作成]をクリックします。
最初のウィンドウでは証明書のタイプを`SSLサーバ`に、**デフォルトを無効化**にチェックを入れて"続ける"をクリックします。
<img width="610" alt="スクリーンショット 2017-10-15 16.44.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/108339/d8095ce1-a14e-a845-9f77-c85ea8489d5a.png">
次の画面では`シリアル番号`、`有効期間`を入力しますが特に変更することはないのでそのまま"続ける"をクリックします。
次は証明書に記載する個人情報を入力します。今回は個人証明書を作るので適当に項目を埋めて次に進みます。
<img width="607" alt="スクリーンショット 2017-10-16 10.37.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/108339/01379878-af01-a32e-b7c7-c7802f9f22e3.png">

次の画面では作る鍵のサイズと暗号化アルゴリズムを選択します。これはデフォルトのまま次に進みます。
次の"鍵用途拡張領域"の設定では、`署名`と`鍵の暗号化`にチェックを入れて次に進みます。

次の"拡張鍵用途拡張領域"の設定は`SSLサーバ認証`にチェックを入れて次に進みます。
次の"基本制約拡張領域"ではチェックはせずそのまま次に進みます。

次の"サブジェクト代替名拡張領域"の設定では、`dNSName`に`localhost`、`iPAdress`にループバックアドレスの`127.0.0.1`を入力して次に進みます。
<img width="611" alt="スクリーンショット 2017-10-16 10.38.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/108339/614c2ffa-75d5-6a53-d45a-c28e39758d75.png">

最後に証明書を保存する場所を決める画面に入ります。これはデフォルトの`ログイン`のままで"作成"をクリックします。
これで証明書と秘密鍵が作成されました。[分類]>>[全ての項目]から自分が作成した証明書と秘密鍵を確認できたらOKです。

# 信頼する証明書として設定する
作成した証明書を右クリックして[情報を見る]をクリックします。"信頼"を開き"この証明書を使用するとき"を`常に信頼`にします。これでブラウザがこの証明書を信頼できるものと判断します。
<img width="505" alt="スクリーンショット 2017-10-16 10.42.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/108339/a46d4683-5a86-6cbf-8c1c-0a68a7bda05b.png">

# 証明書と秘密鍵を書き出す
[証明書を右クリック]>>[書き出す]
拡張子は.cerでOKです
[秘密鍵を右クリック]>>[書き出す]
拡張子は.p12です
書き出すときに入力するパスワードは次のステップで使うので覚えておきます。
筆者は`local-server.cer`と`local-server.p12`というファイルをホームディレクトリにエクスポートしました。
# 証明書と鍵のファイル形式を変更する
Apacheで使える形式に変更します。
まず証明書ファイルのエンコーディング形式をDERからPEMに変更します。拡張子を`.cer`から`.crt`に変えてますが中身が変わるわけではないのでどちらでもいいです。
`$ cd ~`
`$ openssl x509 -in local-server.cer -inform DER -out local-server.crt -outform PEM`
次に.p12拡張子のファイルから秘密鍵だけを取り出すコマンドを実行します。
`$ openssl pkcs12 -in local-server.p12 -nocerts -nodes -out local-server.key`
`-nocerts`オプションは証明書を取り出さないために付け、`-nodes`オプションはパスフレーズを付けないために付けます。開発用なのでパスフレーズは付けません。実行する際、秘密鍵を書き出すときに入力したパスワードを聞かれるので入力します。

# Apacheの設定ファイルを編集する
```shell-session
$ sudo vi /private/etc/apache2/httpd.conf
```
以下のようにコメントアウトを外します。

```vim
#LoadModule ssl_module libexec/apache2/mod_ssl.so
↓
LoadModule ssl_module libexec/apache2/mod_ssl.so

#LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
↓
LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so

# Secure (SSL/TLS) connections
#Include /private/etc/apache2/extra/httpd-ssl.conf
↓
Include /private/etc/apache2/extra/httpd-ssl.conf
```

次にhttpd-ssl.confを編集します。
`SSLCertificateFile`と`SSLCertificateKeyFile`に先程作った証明書と鍵のフルパスを入力します。

```shell-session
$ sudo vi /private/etc/apache2/extra/httpd-ssl.conf
```

```vim
SSLCertificateFile "/Users/ユーザー名/local-server.crt"
#SSLCertificateFile "/private/etc/apache2/server.crt"

SSLCertificateKeyFile "/Users/ユーザー名/local-server.key"
#SSLCertificateKeyFile "/private/etc/apache2/server.key"
```

# Apacheを起動する
apachectlコマンドでApacheを起動します。

```shell-session
$ sudo apachectl start
```
`https://localhost`にアクセスしてみます。
わかりやすいのでChromeで見ます。
<img width="319" alt="スクリーンショット 2017-10-16 12.19.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/108339/4d78f096-6b10-83cd-29d0-94b47948d3f9.png">
このように出れば成功です！