XAMPPのバーチャルドメインをSSL化する方法

2020年5月27日 18:29
WooCommerceのサンプルサイトをXAMPP上で作りたいと思ったところ、決済機能の「Paidy」や「LINE Pay」に対してSSLに対応してないとエラーが出てしまいました。
過去にも何度もやってるのですが、毎回やり方を忘れてしまうので、この度、記事にしようと思います。

準備

ドメイン

XAMPPで「https://woocommerce2.com」を表示可能にすることが目標です。

環境

  • Windows 10
  • XAMPP 7.3.10

バーチャルドメインとXAMPPの設定

PHPでOpenSSLを有効にする

初期状態では有効になっていないと思いますので、確認も兼ねて対象ファイルを開きましょう。
C:\xampp\php\php.iniないの以下のコードのように編集

;extension=php_openssl.dll
↓コメントアウトを削除
extension=php_openssl.dll

ApacheのSSL関連の設定を追加する

C:\xampp\apache\conf\extra\httpd-ssl.confの末尾に下記を追加します。
自分の場合は、wp-woocommerceの中にwordpressを作成し、そこに専用のドメインを割り当てるという作業を行っています。

<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs/wp-woocommerce"
ServerName woocommerce2.com
SSLEngine on
SSLCertificateFile "conf/ssl.crt/my-server.crt"
SSLCertificateKeyFile "conf/ssl.key/my-server.key"
</VirtualHost>

hostsファイルを設定

C:\Windows\System32\drivers\etc\hostsファイルを開きます。

hostsファイルについて

hostsファイルは、管理者として編集を行う必要があります。
メモ帳やテキストエディタを右クリックし、『管理者として実行』を選択すると編集できます。
詳しくは『hostsファイル編集』で検索するとよいでしょう

ファイルを開いたら、最終行に以下を追加。

127.0.0.1       localhost
127.0.0.1       woocommerce2.com

動作確認

XAMPPのコントロールパネルからApacheを再起動したら
https://woocommerce2.comにアクセス。

現段階ではSSLの設定が完了していないので、以下のようなエラーページが表示されますが、気にしないでください。

証明書取得と設定

古い証明書の削除

認証されなくなった古い証明書がある場合は削除します。

  1. Chromeの設定>プライバシーとセキュリティを開き、「証明書の管理」のリンクをクリック
  2. 信頼されたルート証明機関からlocalhostを削除

上の画像の黄色に塗ってあるところをクリックしていくと削除できます。
削除の際に、確認アラートが出ますが、気にせずに削除しましょう。

OpenSSL設定ファイルを編集

  1. C:\xampp\apache\conf\openssl.cnfを複製し、ファイル名をopenssl-san.cnfに変更
  2. ファイルを開き、以下を末尾に追記
[ SAN ]
subjectAltName = @alt_names

[ alt_names ]
DNS.1 = localhost
DNS.2 = woocommerce2.com
DNS.3 = <他に認証したいドメインがあれば>

SSLサーバ証明書を作成

  1. Git Bashをインストール
  2. Git Bashを立ち上げ、以下のコードを実行
# C:\xampp\apache\conf へ移動
$ cd /c/xampp/apache/conf

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

上の画像を参考にすると上手くできます。
入力する際は$はすでに入力されているので気を付けましょう。

証明書ファイルを移動して設置

コマンドが成功するとC:\xampp\apache\conf\ディレクトリにファイルが出来上がるので、そのファイルをそれぞれのディレクトリに移動します。

ファイル 設置場所
my-server.crt C:\xampp\apache\conf\ssl.crt
my-server.key C:\xampp\apache\conf\ssl.key

証明書を認証

  1. C:\xampp\apache\conf\ssl.crt\my-server.crtをダブルクリック
  2. 証明書のウインドウが開いたら「証明書のインストール」をクリック
  3. 保存場所を現在のユーザーを選択し「次へ」をクリック
  4. 証明書をすべて次のストアに配置するを選択し「参照」をクリック
  5. ウインドウが開いたら信頼されたルート証明機関を選択し「OK」をクリックしてウインドウを閉じる
  6. 「次へ」をクリック
  7. 「完了」をクリックしてインポート
  8. アラートがでたら「はい」をクリック
  9. 正しくインポートされました。とアラートがでたら完了

動作確認

XAMPPのコントロールパネルからApacheを再起動したら
https://woocommerce2.comにアクセス。

先程のようなエラー画面が表示されなければ無事にSSL化が完了です。
失敗した場合は、もう一度手順をゼロから行ってみましょう。

参考サイト

XAMPP for WindowsでSSLを有効にする – Qiita
Git Bashって使ってる?Windowsで動く意外にすごい便利ツール | 侍エンジニア塾ブログ

ブログ運営

株式会社ちょもらんま

https://qomolangma.jp