初めに
初めてmkcertを利用して、ローカル環境をHTTPS化してみたので
初心者の方でもわかるよう、初心者がまとめてみました。
環境
- macOS 15.3
- Multipass 1.15.1+mac
- Visual Studio Code 1.99
- Ubuntu 24.04
HTTPS化 とは?
通常のWebサイトは http:// で始まりますが
https:// にすることで、暗号化された通信にできます。
このことで、個人情報(ネットショッピングで使用した際のカード情報など)も
安全になります。
HTTPS化するために、SSL/TLS証明書が使われます
SSL/TLS証明書 とは?
暗号の鍵と身分証明書のセット
証明書は、認証局(CA)と呼ばれるところが発行することで、本物だと証明されます。
ただ、開発中のテスト環境では、認証局は証明書を発行してくれません。
自己証明書を作成すればhttpsでアクセスができるようになりますが、
一から設定すると多くの工数がかかります。
そこで、mkcertを利用します。
mkcert とは?
ローカル開発環境で、手軽に自己証明書を作成してくれるツールです。
手順
0. multipassのユーザー作成
1. ローカルPC（Macなど）に mkcert をインストール
2. ローカル認証局のインストール
3. 証明書を作成
4. 作成した証明書を Multipass 上の Ubuntu に転送
5. Nginx に SSL 証明書のパスを設定
6. HTTP→HTTPS にリダイレクトする設定を追加
7. Nginx を再起動／再読み込み
8. サイトにアクセスして確認！
手順詳細
0. multipassの仮想マシン作成
multipass launch --name ubuntu-dev01 --cpus 4 --memory 8G --disk 32G
やってること
multipass launch --name 仮想マシン名 --仮想マシンの設定
1. ローカルPC（Macなど）に mkcert をインストール
brew install mkcert
インストール方法はOSによって異なります
macOSならHomebrewを使って簡単にインストールできます。
2. ローカル認証局のインストール
mkcert -install
初めてmkcertを実行すると、コンピューター上にローカル認証局を作成し、
OSに信頼させます。
3. 証明書を作成
mkcert localhost 127.0.0.1 ::1 wp.techbull.cloud
-
localhost：自分のPCに名前でアクセス
-
127.0.0.1：IPv4版の自分のPC名
-
::1：IPv6版の自分のPC名
-
wp.techbull.cloud：開発用の任意ドメイン
出力されるファイル
実行ディレクトリに以下の2つのファイルが生成されます：
-
wp.techbull.cloud+X.pem：証明書（公開鍵）
-
wp.techbull.cloud+X-key.pem：秘密鍵
※ +Xはドメイン数に応じた識別子。
作成したファイルは以下で確認します。
ls -l ~/*.pem
4. 作成した証明書を Multipass 上の Ubuntu に転送
multipass transfer /Users/Users Name/localhost+3.pem ubuntu-dev01:/home/ubuntu/
multipass transfer /Users/Users Name/localhost+3-key.pem ubuntu-dev01:/home/ubuntu/
やってること
multipass transfer 鍵のパス 仮想マシンの名前:/パス
- multipass transfer:SSH 経由でファイルをコピー
なぜUbuntu に転送する？
目的はサーバーで以下を行うから
- 証明書（公開鍵）をブラウザに提示して「私は本物のサイトです」と証明
- 秘密鍵で通信を暗号化・復号する
5. Nginx に SSL 証明書のパスを設定
# Multipassのシェルに入る
multipass shell ubuntu-dev01
以下は、wp.techbull.cloud.confにHTTPS設定を追加する例です。
# 設定ファイルを編集
sudo vi /etc/nginx/conf.d/wp.techbull.cloud.conf
server {
listen 443 ssl;
server_name wp.techbull.cloud;
root /var/www/wp.techbull.cloud/;
index index.php index.html;
access_log /var/log/nginx/wp.techbull.cloud.log custom_log;
error_log /var/log/nginx/wp.techbull.cloud.error.log;
# ↓ SSL/TLS 証明書のパスを指定。
ssl_certificate /home/ubuntu/localhost+3.pem; # ★ここに正確なパスを記述！
ssl_certificate_key /home/ubuntu/localhost+3-key.pem; # ★ここに正確なパスを記述！
location / {
try_files $uri $uri/ =404;
}
location ~ \\.php$ {
include fastcgi_params;
fastcgi_pass unix:/var/run/php-fpm/www.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
6. HTTP→HTTPS にリダイレクトする設定を追加
server {
listen 80;
server_name wp.techbull.cloud;
# ここにアクセスが来たら、強制的にHTTPSにリダイレクトする
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name wp.techbull.cloud;
root /var/www/wp.techbull.cloud/;
index index.php index.html;
access_log /var/log/nginx/wp.techbull.cloud.log custom_log;
error_log /var/log/nginx/wp.techbull.cloud.error.log;
ssl_certificate /home/ubuntu/localhost+3.pem;
ssl_certificate_key /home/ubuntu/localhost+3-key.pem;
location / {
try_files $uri $uri/ =404;
}
location ~ \\.php$ {
include fastcgi_params;
fastcgi_pass unix:/var/run/php-fpm/www.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
やってること
return 301 https://$host$request_uri;
ポート80 内に上記を設定することで、 443 へ自動転送できる
7. Nginx を再起動／再読み込み
# 設定ファイルに文法エラーがないかチェック
sudo nginx -t
# Nginxを再起動
sudo systemctl reload nginx
8. サイトにアクセスして確認！
ブラウザから確認できたら成功です！
終わりに
私自身、SSHと綴りが近いことから、ごっちゃになっていました
今回まとめたことで違いも明確になり、HTTPS化について理解ができたと思います！
ありがとうございました！