ローカル環境でSSL/TLS証明書を発行して警告表示を出さないようにするアレコレ #ツナギメオフライン.5

ツナギメオフライン ベンキョウカイ #5で発表したスライドです。

Transcript

1. ローカル環境でSSL/TLS証明書を発行して 警告表示を出さないようにするアレコレ ツナギメオフライン ベンキョウカイ #5 February 26, 2026.
2. @akase244 <?php var_dump( (new Me()) ->WebApplicationEngineer() ->InfrastructureEngineer() ); February 26, 2026. ツナギメオフライン ベンキョウカイ #5
3. @tsunagimefm https://tsunagi.me/ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
4. 本日持ち帰ってもらいたいキーワード February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • CSR（証明書署名要求） • ルート証明書（ルートCA証明書、CA証明書） • 中間CA証明書 • サーバー証明書（SSL/TLS証明書はこれを指すことが多い） • クライアント証明書 • 自己署名証明書 • 認証局（CA） • CRL（証明書失効リスト） • openssl コマンド • mkcert コマンド
5. 本日持ち帰ってもらいたいキーワード February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • CSR（証明書署名要求） • ルート証明書（ルートCA証明書、CA証明書） • 中間CA証明書 • サーバー証明書（SSL/TLS証明書はこれを指すことが多い） • クライアント証明書 • 自己署名証明書 • 認証局（CA） • CRL（証明書失効リスト） • openssl コマンド • mkcert コマンド
6. http:// February 26, 2026. ツナギメオフライン ベンキョウカイ #5
7. 2018年7月からGoogle Chromeで警告表示が開始 https://developers.google.com/search/blog/2018/07/marking-HTTP-as-not-secure?hl=ja February 26, 2026. ツナギメオフライン ベンキョウカイ #5
8. 常時SSLが当たり前に February 26, 2026. ツナギメオフライン ベンキョウカイ #5
9. 開発環境でHTTPS接続してますか？ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
10. HTTPS接続で動作確認しておかないと February 26, 2026. ツナギメオフライン ベンキョウカイ #5
11. HTTP / HTTPS で動作が異なる機能の開発には注意が必要 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • Mixed Content • Cookie の Secure 属性 • SameSite Cookie • HSTS • CORS • Service Worker • WebSocket
12. 「localhost」は特別扱いされているので要注意 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
13. なので February 26, 2026. ツナギメオフライン ベンキョウカイ #5
14. ローカル環境でもHTTPS接続したい February 26, 2026. ツナギメオフライン ベンキョウカイ #5
15. であれば February 26, 2026. ツナギメオフライン ベンキョウカイ #5
16. 開発環境で Let's Encrypt を使いたいところですが https://letsencrypt.org/ja/ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
17. Let’s Encrypt は、“localhost” に対する証明書を提供することはできません https://letsencrypt.org/ja/docs/certificates-for-localhost/ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
18. 想定している開発環境 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
19. ローカルでDockerを利用した開発環境 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
20. では、その方法は？ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
21. ルート証明書とサーバー証明書を発行 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 ルート証明書 サーバー証明書 証明書を発行
22. February 26, 2026. ツナギメオフライン ベンキョウカイ #5 ルート証明書 ブラウザ ルート証明書をブラウザに登録
23. ブラウザに登録する場合は chrome://settings/certificates February 26, 2026. ツナギメオフライン ベンキョウカイ #5
24. February 26, 2026. ツナギメオフライン ベンキョウカイ #5 ルート証明書 ルート証明書をローカルPCに登録 ローカルPC
25. macOSの場合はキーチェーンアクセスに登録 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
26. Windowsの場合は証明書マネージャーに登録 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
27. Linux(Ubuntu)の場合は以下のコマンドで登録 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 $ sudo cp 【ルート証明書】 /usr/local/share/ca-certificates/ $ sudo update-ca-certificates $ ls -l /etc/ssl/certs/ 合計 636 lrwxrwxrwx 1 root root 23 2月 11 00:13 002c0b4f.0 -> GlobalSign_Root_R46.pem ・ ・ ・
28. サーバー証明書をコンテナに配置 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 サーバー証明書 コンテナ
29. コンテナ内にどうやって サーバー証明書を配置したらいいの？ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
30. webサーバーやアプリケーション次第 February 26, 2026. ツナギメオフライン ベンキョウカイ #5
31. 例えばNginxの場合 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 server { listen 443 ssl; ・ ・ ssl_certificate /etc/nginx/certs/snakeoil.crt; ssl_certificate_key /etc/nginx/certs/snakeoil.key; ・ ・
32. 例えばApacheの場合 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 <VirtualHost *:443> DocumentRoot "/usr/local/apache2/htdocs" SSLEngine on SSLCertificateFile "/usr/local/apache2/conf/certs/snakeoil.crt" SSLCertificateKeyFile "/usr/local/apache2/conf/certs/snakeoil.key" ・ ・
33. 例えば Laravel Sail の場合 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 https://qiita.com/akase244/items/f5ba7e6a88b2436ced84
34. 証明書を正しく配置すると February 26, 2026. ツナギメオフライン ベンキョウカイ #5
35. これが February 26, 2026. ツナギメオフライン ベンキョウカイ #5
36. こうなります February 26, 2026. ツナギメオフライン ベンキョウカイ #5
37. これが February 26, 2026. ツナギメオフライン ベンキョウカイ #5 $ curl -I https://localhost/ curl: (60) SSL certificate problem: unable to get local issuer certificate More details here: https://curl.se/docs/sslcerts.html curl failed to verify the legitimacy of the server and therefore could not establish a secure connection to it. To learn more about this situation and how to fix it, please visit the web page mentioned above.
38. こうなります February 26, 2026. ツナギメオフライン ベンキョウカイ #5 $ curl -I https://localhost/ HTTP/1.1 200 OK Server: nginx/1.29.5 Date: Wed, 18 Feb 2026 18:26:06 GMT Content-Type: text/html Content-Length: 26 Last-Modified: Wed, 18 Feb 2026 16:26:52 GMT Connection: keep-alive ETag: "6995e84c-1a" Accept-Ranges: bytes
39. 証明書を発行する方法は様々あります February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • mkcert • openssl • caddy • certstrap (square) • CFSSL (Cloudflare) • Easy-RSA (OpenVPN) • minica • Step CLI (Smallstep) • Traefik (Traefik Labs) • Vault (HashiCorp)
40. 先程の方法を全部試してみました February 26, 2026. ツナギメオフライン ベンキョウカイ #5 https://github.com/akase244/local-https
41. 正直、mkcertの使い方さえおさえておけば良いのでは February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • mkcert : 簡易なコマンドで扱いやすい。最近流行ってるっぽい？ • openssl : basicConstraints=CA:TRUE であれば手数は少なめ • caddy: 手軽なリバプロ。Caddyfileの書式を覚える必要あり • certstrap (square): オプションの指定方法はopensslと大差なし • CFSSL (Cloudflare): オプションをJSON形式で指定可能 • Easy-RSA (OpenVPN): オプションの指定方法はopensslと大差なし • minica: オプションにドメインを指定するだけで簡単 • Step CLI (Smallstep): オプションの指定方法はopensslと大差なし • Traefik (Traefik Labs): コンテナ環境向けのリバプロ。 • Vault (HashiCorp): オプションの指定方法はopensslと大差なし
42. 今回はローカル環境を外部公開して HTTPS接続を実現する方法は試してません February 26, 2026. ツナギメオフライン ベンキョウカイ #5
43. ローカル環境を外部公開する方法の例 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • ngrok • Cloudflare Tunnel • localtunnel • localhost.run • Tailscale • PageKite • Telebit • zrok • Expose
44. まとめ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
45. ローカル環境でHTTPS接続を行うには February 26, 2026. ツナギメオフライン ベンキョウカイ #5 • ルート証明書とサーバー証明書を発行する • ルート証明書をブラウザとローカルPCに登録する • サーバー証明書をwebサーバー、アプリケーションサーバーに配置する • 証明書を発行するコマンドとしては mkcert がオススメ • PHPのビルトインサーバーのように単独でTLS終端が行えない簡易的なweb サーバーの場合は Caddy をリバースプロキシとして利用すると扱いやすい
46. おまけ February 26, 2026. ツナギメオフライン ベンキョウカイ #5
47. 昨日、ブログで投下されてて調査が間に合わなかった。。。 February 26, 2026. ツナギメオフライン ベンキョウカイ #5 https://github.com/Jxck/sptth
48. Thanks! Have a good programming!! February 26, 2026. ツナギメオフライン ベンキョウカイ #5