Xamppローカル環境にSSLを有効にする設定手順まとめ

もはやXamppを利用したWebサイト制作は、プログラマーだけでなくWebデザイナーやコーダーでも常識です。

静的なサイトであれば流れに沿ってインストールすれば十分なのですが、SSLをローカルでも利用できるようにするとなるとハードルがグンっと上がります。

私もSSLの設定でしばらく躓いていたのですが、やっと動作するようになったのでメモ用に設定手順をまとめておきます。

Xamppローカル環境にSSLを有効にする設定手順(ver 3.2.2で確認)

1. php.iniファイルを書き換える

php.iniファイルとはPHPの設定ファイルで、通常は以下のディレクトリに配置されています。

C:\xampp\php\php.ini

これをテキストエディタで開き、「extension=php_openssl.dll」で検索します。

該当行を見つけたら先頭の「;」を削除します。

;extension=php_openssl.dll

extension=php_openssl.dll

上書き保存して閉じます。

2. httpd-vhosts.confファイルを書き換える

続いて、ローカルIPアドレスを使ってサイトにアクセス出来るように設定します。以下のファイルを開きます。

C:\xampp\apache\conf\extra\httpd-vhosts.conf

ファイルの一番下に次の記述を追加します。

<VirtualHost 127.0.0.20>
 DocumentRoot "C:/xampp/htdocs/example_site1/"
 ServerName example_site1.local
 </VirtualHost>

※いずれのパラメーターも任意のものに変更してください

上書き保存します。
この時点でXamppのコンパネでApacheを再起動すれば、「http://127.0.0.20/」でサイトを表示することができます。しかし、この段階ではまだSSLにはまだ対応していません。

いくつかポイントを解説します。

  • IPアドレスは「127.0.0.××」の形式で任意に設定可能
  • DocumentRootはWebサイトのデータが保存されてるディレクトリを指定
  • ServerNameはローカルIPでアクセスする為不要ですが、空だとエラーになるのでダミーで入力しておく

3. httpd-ssl.confファイルを書き換える

続いて、「https://~」の形式でもサイトを見られるようにします。以下のファイルを開きます。

C:\xampp\apache\conf\extra\httpd-ssl.conf

ファイルの一番下に次の記述を追加します。

<VirtualHost 127.0.0.20:443>
DocumentRoot "C:/xampp/htdocs/example_site1/"
ServerName localhost:443

SSLEngine on
SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

上書き保存します。
そして、Apacheを再起動すれば「https://127.0.0.20/」というように「https」形式でもアクセスできるようになります。

いくつかポイントを解説します。

  • IPアドレスはhttpd-vhosts.confに記述したものと同じものを入れ、末尾に「:443」を追加する
  • DocumentRoot、ServerName もhttpd-vhosts.confと同じものを記述 ServerNameにはlocalhost:443と記述(そうしないと動作はするがログにエラーが表示される)。
  • 5~7行目のSSLに関する記述はそのままコピペで貼り付ける

複数のサイトに個別のローカルIPで運用し、それぞれにSSL適用する方法

仕事でウェブサイトを運営している人は「ローカルIP毎にサイトを分けたい」という要望があるかと思います。非常に簡単です。

簡潔に言えば、
手順2、3で記述したものを複製して、

  • IPアドレス
  • DocumentRoot
  • ServerName

これら3つの項目をサイト毎に変えるだけです。

そして、Apacheを再起動すれば完了です。

不安な方の為に入力例を載せておきますね。

◆httpd-vhosts.conf

↓先ほど記述したもの
<VirtualHost 127.0.0.20>
 DocumentRoot "C:/xampp/htdocs/example_site1/"
 ServerName example_site1.local
 </VirtualHost>

↓追加分
<VirtualHost 127.0.0.21>
 DocumentRoot "C:/xampp/htdocs/example_site2/"
 ServerName example_site2.local
 </VirtualHost>
◆httpd-ssl.conf

↓先ほど記述したもの
<VirtualHost 127.0.0.20:443>
DocumentRoot "C:/xampp/htdocs/example_site1/"
ServerName localhost:443

SSLEngine on
SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

↓追加分
<VirtualHost 127.0.0.21:443>
DocumentRoot "C:/xampp/htdocs/example_site2/"
ServerName localhost:443

SSLEngine on
SSLCertificateFile "conf/ssl.crt/server.crt"
SSLCertificateKeyFile "conf/ssl.key/server.key"
</VirtualHost>

※上記のコメント(”↓追加分”などの文言)は設定ファイルに記述しないでください。構文エラーで動作しません。

追記:
httpd-ssl.confのServerNameにはlocalhost:443を指定してください(動作はしますがエラーを吐く為)。

おわりに

これでローカルでのSSL利用が可能になり、本番環境と近い環境になったはずなので、関連ページの作業効率はかなり良くなったのではないでしょうか?

あとはメール送信もできれば完璧なんですが行き詰ってます…。

「GmailのSMTPサーバーを利用すればローカルでもSendmailが使えるようになる」という記事があったので試してみたんですが、私の環境だとGoogle側でアクセスをブロックしてしまうんですよね。なので、一旦断念しました。何か良い方法はないものか・・・。

コメント

  1. いちきだいすけ より:

    こんにちは、初めてコメントさせていただきます。
    Web制作を初めてやります。ローカル環境もSSL化したほうがいいのかなと思い検索していたら、こちらにたどり着きました。
    非常にわかりやすく、手順通り進めてみましたがhttpsでアクセスしてもページが表示されません。この手順以外に準備することはありますか?
    【私の環境】
    Windows10・Xampp v.3.2.2・GoogleChromeの最新版です。

    • kakerupc より:

      >いちきだいすけ さま

      コメントありがとうございます。
      私も手探り状態でなんとか動作にこぎつけたので明確な回答が出来ず申し訳ないのですが、「表示されない」というのは404エラーでしょうか?

      その場合はIPアドレスの設定に問題がある可能性が高く、それ以外の場合は下記【SSL設定ポイント】のSSL用のパラメーターに原因がある可能性が高いです。

      ———————

      【SSL設定ポイント】

      ■php.ini
      extension=php_openssl.dll
      ↑これのコメントを外す

      ■httpd-ssl.conf
      SSLEngine on
      SSLCertificateFile “conf/ssl.crt/server.crt”
      SSLCertificateKeyFile “conf/ssl.key/server.key”
      ↑これをに追加する

      IPアドレスはhttp通信と同じものの末尾に:443をつける。

      あとはXamppを再起動するだけです。

      ※記事中のServerNameの設定に誤りがあったため訂正していますが今回の件には影響はないはずです。

      ———————

      ちなみに私はクリーンな状態のXamppで、記事の手順を試したら動作したので大丈夫だと思うんですが、個体差とかあるのでしょうかね…。

      また、エラーログ(xampp\apache\logs\error.log)から手がかりが見つかるかも知れません。

  2. kami より:

    ありがとうございました。(≧∇≦)
    おかげさまで設定が滞りなく完了致しました。
    本当に感謝感謝感謝です。

    • kakerupc より:

      >kami さま

      お役に立てて良かったです!
      今後ともよろしくお願いいたします。

タイトルとURLをコピーしました