開発中にローカルで HTTPS をテストするにはどうすればよいですか?
A. 課題
最近、私たちのプロジェクトで以下のような状況が発生しました。
- ローカルのサイト(HTTP)から、決済機能を持つ外部のHTTPSサイトへリクエストを送信する。
- 決済サイトは認証結果を含んだURL(HTTPS)をローカルサイトへ返す。
- しかし、ローカルがHTTPであるため、HTTPSとの連携テストができない。
B. 解決策
ローカル環境でHTTPSを使用してテストするために、以下の手順を実施しました。
- ローカルPCにSSL証明書をインストール(OpenSSL や mkcert などのツールで自己署名証明書を作成)
- HTTPSプロトコルでローカルサーバーを起動
C. Apacheを使用してSSLを構成する手順(XAMPPの場合)
-
Apacheのディレクトリに移動
例:C:\xampp\apache -
任意のフォルダを作成
例:C:\xampp\apache\crt -
下記の2つのファイルを上記フォルダにダウンロード
- cert.conf
- make-cert.bat -
cert.conf ファイルを編集
{{DOMAIN}} を使用したいドメイン名に変更
例:myhttps.test -
make-cert.bat を実行
プロンプトが表示されたら、myhttps.test を入力 -
server.crt をダブルクリックして証明書をインストール
-
Windowsのhostsファイルにドメインを追加
ファイル:C:\Windows\System32\drivers\etc\hosts
以下を追加:
127.0.0.1 myhttps.test -
XAMPPのApache設定にサイトを追加
ファイル:C:\xampp\apache\conf\extra\httpd-xampp.conf
以下の設定を追加
## myhttps.test
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName myhttps.test
ServerAlias *.myhttps.test
</VirtualHost>
<VirtualHost *:443>
DocumentRoot "C:/xampp/htdocs"
ServerName myhttps.test
ServerAlias *.myhttps.test
SSLEngine on
SSLCertificateFile "crt/myhttps.test/server.crt"
SSLCertificateKeyFile "crt/myhttps.test/server.key"
</VirtualHost>
9. Apacheを再起動
D. 結果
上記の手順をすべて完了した後、ブラウザで https://myhttps.test にアクセスすると、HTTPSのページが表示されるはずです。
※注意:この方法で作成したSSL証明書は自己署名証明書のため、ブラウザによっては安全ではないという警告が表示されることがあります。
本番環境では、信頼された認証局(CA)が発行した証明書を使用することを強く推奨します。
このチュートリアルがお役に立てば幸いです!