はじめに

本記事では、Windows の PC で WSL（Ubuntu）を使いながら、mkcert を利用してローカル開発用の HTTPS 環境を構築する手順をまとめます。

対象読者：

mkcert とは

mkcertをインストールするにあたって、Ubuntu(WSL)環境の確認を行います。

# WSLのバージョン確認（Windows側）
wsl -l -v

# Ubuntuの更新
sudo apt update && sudo apt upgrade -y

Ubuntu上の任意のディレクトリ上で、mkcertをインストールします。

# wgetのインストール（ダウンロードコマンドのインストール）
sudo apt install wget -y

# mkcert のバイナリをダウンロード
wget https://github.com/FiloSottile/mkcert/releases/latest/download/mkcert-linux-amd64

# 実行権限の付与
chmod +x mkcert-linux-amd64

# システムのパスに移動してどこからでも使えるようにする
sudo mv mkcert-linux-amd64 /usr/local/bin/mkcert

# バージョン確認
mkcert -version

Firefoxを使用している場合は、以下のコマンドで、依存パッケージをインストールする必要があります。

# Firefox用に依存パッケージをインストール
sudo apt install libnss3-tools -y

Ubuntu内の任意のディレクトリ上で、RootCA(ルート証明書)を作成およびインストールします。
※これはUbuntu内で信頼されていますが、Windows側ではまだ信頼されていません。

# mkcertのインストール
mkcert -install

Ubuntu内のプロジェクトディレクトリの、.pemファイルを置きたい場所で以下のコマンドを叩く。
※サーバ証明書を置く場所、ドメインはプロジェクトにより異なります。
※.key は git に絶対上げないこと。

# 開発用ドメインの証明書を発行
mkcert localhost 127.0.0.1 ::1 myapp.local

これで証明書の発行自体は完了です。

まず、Windowsの証明書マネージャーを開きます。
Windowsキー＋Rを押して、certmgr.mscと入力してEnter。

以上でWSL環境でのmkcertを使ったローカルHTTPS構築手順が完了です。
もし今回の手順でうまくいかない場合は、以下を確認してください。

以上です。
ご一読いただきありがとうございます。