環境構築

ローカル環境で SSL を有効にする(for XAMPP)

Google Chrome が、非SSLのWebサイトに対して警告を表示するようになりました。

今ではセキュリティ確保の点からWebサイトに常時SSLが求められるようになっています。

サイト全体を HTTPS で接続できるようにするのが、現在のトレンドです。

それに伴い、ローカル環境(Windows for XAMPP)でもSSLの環境が必須になってきました。

今回は、ローカル環境でSSLを有効にする内容をエントリーします。

 

現状

バーチャルホストで設定しています。

 
httpd.conf

C:\xampp\apache\conf\httpd.conf の末尾に追記


:
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/ssl/public
ServerName dev.ssl
</VirtualHost>

 
hosts

C:\Windows\System32\drivers\etc\hosts の末尾に追記


:
127.0.0.1 dev.ssl

 
ブラウザでビュー

 

課題

URLの先頭(スキーム)に https:// と入力。

するとXAMPPのダッシュボードにリダイレクトされてしまう。

これを回避するために以下の作業を行います。

チェック
ブラウザは "Google Chrome" を前提にして進めます。

 

手順

1)php.ini の設定
2)httpd-ssl.conf の設定
3)OpenSSL設定ファイルを編集
4)SSLサーバ証明書を作成
5)証明書を設置
6)証明書を認証
7)動作確認

 

1)php.ini の設定

C:\xampp\php\php.ini にある OpenSSL を有効にします。(※デフォルトでは有効になっています)


// ;extension=php_openssl.dll
extension=php_openssl.dll

コメントアウトされていないことを確認します。

 

2)httpd-ssl.conf の設定

ApacheのSSL関連の設定を追加します。

C:\xampp\apache\conf\extra\httpd-ssl.conf の末尾に追加。


<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/ssl/public"
ServerName dev.ssl
SSLEngine on
SSLCertificateFile "conf/ssl.crt/dev-ssl.crt"
SSLCertificateKeyFile "conf/ssl.key/dev-ssl.key"
</VirtualHost>

dev-ssl.crtdev-ssl.key はこの後に作成します。

 

3)OpenSSL設定ファイルを編集

1.C\xampp\apache\conf\opnessl.cnf をコピー
2.ファイル名を openssl-san.cnf に変更
3.以下を末尾に追加


[ SAN ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1 = dev.ssl

 

4)SSLサーバ証明書を作成

Git Bash で openssl コマンドを使います。

Git Bash のインストール(git for windows)


# C:\xampp\apache\conf へ移動
$ cd /c/xampp/apache/conf

# dev-ssl.crt, dev-ssl.key の2つのファイルを生成
$ openssl req \
-newkey rsa:4096 \
-keyout dev-ssl.key \
-x509 \
-nodes \
-out dev-ssl.crt \
-subj "//CN=dev.ssl" \
-reqexts SAN \
-extensions SAN \
-config openssl-san.cnf \
-days 3650

 
実際に打つとこんな感じになります。

 

5)証明書を設置

上記のコマンドを実行すると C:\xampp\apache\confdev-ssl.crtdev-ssl.key が生成されます。

dev-ssl.crtC:\xampp\apache\conf\ssl.crt に設置。

dev-ssl.keyC:\xampp\apache\conf\ssl.key に設置。

 

6)証明書を認証

1.C:\xampp\apache\conf\ssl.crt\dev-ssl.crt をダブルクリック

2.「証明書のインストール」をクリック

3.保存場所を「現在のユーザー」を選択して「次へ」

4.「信頼されたルート証明機関」を選んで「次へ」

このあと、「証明書のインポートウィザードの完了」画面が表示されます。

「完了」をクリックして証明書をインポートしてください。

 

7)動作確認

XAMPPのApacheを再起動して、https://dev.ssl へアクセス

チェック
Chrome ブラウザを開いていた場合は、再起動してください。

上記のように表示されれば OK です。

 

応用編

複数のドメインにSSLをかける場合は?

例)https://dev.ssl2 も可能にする場合

 

1.httpd-ssl.conf に二か所記述します。


<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/ssl/public"
ServerName dev.ssl
SSLEngine on
SSLCertificateFile "conf/ssl.crt/dev-ssl.crt"
SSLCertificateKeyFile "conf/ssl.key/dev-ssl.key"
</VirtualHost>

<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/ssl2/public"
ServerName dev.ssl2
SSLEngine on
SSLCertificateFile "conf/ssl.crt/dev-ssl2.crt"
SSLCertificateKeyFile "conf/ssl.key/dev-ssl2.key"
</VirtualHost>

 

2.openssl-san.cnf にも追記


[ SAN ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1 = dev.ssl
DNS.2 = dev.ssl2

 

3.SSLサーバ証明書を作成

http://dev.ss2 用にSSLサーバ証明書を作成します。

あとは同様の手順で「証明書を設置」⇒ 「証明書を認証」の手順を踏みます。

 
以上です。

 

-環境構築