適当プログラマー

「なんでXAMPPをhttpsで使用したい」っていうそこそこニーズのありそうなことに解説サイトが見つからないんだ。もしかして証明書の期限が切れてたの私だけ?

アイキャッチ

Windowsのローカル開発環境(XAMPP)をhttpsにする方法

こんにちは。最近家でプログラミングしてるんだけど、どうしてもローカル開発環境でhttpsの環境が必要になったので環境を構築しました。

最初はググればすぐ出来るだろ、って思ってたら全然できなくて苦戦したので、今後私のように苦戦する人が出ないように環境構築の方法をメモしておきます。

本当はスクリーンショットとかで分かりやすく説明すべきなんだろうけど、面倒くさいので文字だけで説明します。許せ。

まずはXAMPPをインストールします。(XAMPP Installers and Downloads for Apache Friends)。XAMPPっていうのはApacheのみならず、PHPやMariaDB(MY SQLみたいなやつ)をまとめてインストールできる……つまり、これひとつで簡単にローカルに開発環境を構築できるやつです。

普通にダウンロードして、普通にインストールしてください。ここまでは簡単なはずです。

XAMPPの詳しい解説は割愛しますが、ググればいろいろなサイトが説明してくれています。

さて、XAMPPをインストールし終わると、XAMPPの操作ができるアプリ?パネル?アイコン?ともかく例のあれが出ますよね?その例のあれを使って、Apacheの「Start」ボタンをクリックしてApacheを起動した後、ウェブブラウザを立ち上げて、 http://localhost にアクセスしてください。普通にアクセスできますね?

次に https://localhost (httpにsをつけてる)にアクセスしてください。セキュリティ関連のエラーが出ると思います。これをどうにかしましょう。

https関連のファイルは C:\xampp\apache\conf\ssl.key\server.key ファイルと C:\xampp\apache\conf\ssl.crt\server.crt ファイルです(xamppのインストール場所がデフォルトの「C:\xampp」の場合)。

ちなみに、なんでエラーが出るかというと、C:\xampp\apache\conf\ssl.crt\server.crt ファイルをダブルクリックしてみると分かるのですが、2019年で期限が切れています。

ちなみに、この2つのファイルは C:\xampp\apache\conf\extra\httpd-ssl.conf の中で「この公開鍵とこの秘密鍵使うよ」って指定されています。興味があれば C:\xampp\apache\conf\extra\httpd-ssl.conf のファイルの中身を確認してみてください。

さて、本来であればここからopensslなどを使ってやたら難しいコマンドを使って公開鍵ファイルやら秘密鍵ファイルやらを作るのでしょう。しかし我々ダメプログラマーはそんな面倒くさいことをしたいですか?いいえ、したくない。

というわけで mkcert を使いましょう(GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd like.)。

できれば「mkcert」というキーワードで色々ググってみてほしいのですが、これは公開鍵ファイルや秘密鍵ファイルを簡単に作れるコマンドプログラムです。Windows、Mac、Linuxのすべてに対応しているようです。

ここからmkcertのインストールの解説を Live Serverとmkcertで簡単にローカルhttpsサーバーを立ち上げる方法 | 初心者備忘録 から丸パクりします。というか、Live Serverとmkcertで簡単にローカルhttpsサーバーを立ち上げる方法 | 初心者備忘録を見てください。私より親切にダウンロード方法を解説してくれています。

さて、インストールですがwindowsでもコマンドからインストールできるようなのですが、もっと簡単な方法として、最新版をダウンロードできます。Releases · FiloSottile/mkcert · GitHub からwindowsのための最新版をダウンロードしてください。

exeファイルがダウンロードできましたね?これは、インストールファイルでは無く、これ自体がプログラムです。まず、このプログラムの実行を許可しないといけません。Live Serverとmkcertで簡単にローカルhttpsサーバーを立ち上げる方法 | 初心者備忘録にプログラムの実行を許可するための正しい方法が書かれていますが、私は最初良く分からず、ダウンロードしたexeファイルをダブルクリックし、プログラムの実行を許可しました。

ダブルクリックしてプログラムの実行を許可した後、インストールでも始まるのかと思っていましたが、何も起きませんでした。その時に初めて「あ、これインストールファイルじゃなくて、これ自体がプログラムってことか」と分かりました。

さあ、このexeファイルを使ってコマンドプロンプトから公開鍵やら秘密鍵やらを作っていきましょう。

まずexeファイルの名前を mkcert-v1.4.1-windows-amd64.exe みたいなものから mkcert.exe というファイル名に変更しました。名前長いからね。コマンドプロンプトからコマンド打つ時に、いちいちこの名前を打つの面倒くさいからね。

さて、コマンドプロンプトを実行して、mkcert.exe が入っているフォルダまで行ったら、まず以下のコマンドを打ってください。

mkcert -install

セキュリティ警告の画面が出たら「はい」をクリックしてください。

次に、以下のコマンドを打ってください。

mkcert -key-file server.key -cert-file server.crt localhost

-key-file server.key で秘密鍵ファイルのファイル名を指定して、-cert-file server.crtで公開鍵ファイルのファイル名を指定して、最後のlocalhostで、この証明書で利用するドメインを指定しています。ドメインは複数指定することも可能なので、詳しくは「mkcert」という検索キーワードでググってください。

コマンドを実行したフォルダの場所に server.key ファイルと server.crt ファイルが作成されています。

この2つのファイルを、それぞれ C:\xampp\apache\conf\ssl.key\server.key ファイル、C:\xampp\apache\conf\ssl.crt\server.crt ファイルと置き換えて下さい。

古いファイルは削除してしまっていいと思います。だって最初から期限切れてるからね。

さてxamppのコントロールパネルからApacheを一旦stopし、再度startしてから https://localhost (httpにsをつけてる)にアクセスしてください。セキュリティ警告が無くなっているはずです。

なんだ、分かってみれば簡単。この調査に3時間くらい使ったわ。

また、もし何らかの事情で server.key や server.crt というファイル名を使用したくない場合は、別のファイル名を指定してファイルを作成し、解説通りの場所に配置した後、C:\xampp\apache\conf\extra\httpd-ssl.confで使用したいファイル名を指定すれば上手く行くと思います。多分。

このエントリーをはてなブックマークに追加