DockerコンテナでローカルホストをHTTPS化OpenSSLを使用、NET::ERR_CERT_AUTHORITY_INVALIDの対処

こんにちは！今回は、Dockerコンテナ環境でローカルホストをHTTPS化する方法について詳しく解説していきます。

目的 :
ローカルホストをhttps化したい (例: localhost:8080 -> https://localhost:8080)

前提

  • ホストマシンはWindows10
  • コンテナはDocker Desktopで作成している

ローカル開発でHTTPS化するメリット

開発環境でHTTPSを使用したいケースは多々あります。例えば：

  • PWAの開発
  • セキュアなAPIのテスト
  • 本番環境に近い開発環境の構築

今回は、Docker環境でApacheを使用したHTTPS化の方法を紹介します。

HTTPS化手順の概要と予備知識

  • OpenSSL で自己著名SSL証明書の作成
  • Docker コンテナで証明書の設定
  • ブラウザでの証明書の信頼設定

自己署名証明書とは

自己署名証明書とは、認証局（CA）を介さずに自分自身で作成・署名したSSL/TLS証明書のことです。

  • 証明書の即時発行が可能
  • コストがかからない
  • 更新・再発行が容易
通常の証明書 vs 自己署名証明書 通常の証明書 認証局（CA） Let’s Encrypt など Webサイト example.com ✓ ブラウザが信頼 ✓ 警告が表示されない ✓ 本番環境で使用可能 自己署名証明書 自分で署名 openssl コマンド ローカル環境 localhost ! ブラウザが警告 ✓ 開発環境で使用可能 ✗ 本番環境では非推奨

証明書の内容

デジタル証明書とは？ ウェブサイトの身分証明書 Webサイト example.com △△銀行 証明書の内容 • サイトのドメイン名 • 運営組織情報 • 有効期限 証明書の3つの役割 なりすまし防止 正規のサイトである ことを証明 データの暗号化 通信内容を 暗号化して保護 🔒 改ざん防止 データが途中で 変更されていないことを保証 ✓

データの暗号化

  • 通信内容を暗号化
  • パスワードやクレジットカード情報を安全に送信可能

改ざん防止

  • データが途中で変更されていないことを保証
  • 安全な通信を実現

OpenSSLとは

opensslコマンドは、ターミナルから直接実行できる暗号化関連のツールです。

主な用途は：

  • 証明書の作成と管理
  • 暗号鍵の生成
  • ファイルの暗号化と復号化
  • 証明書や鍵の内容確認
OpenSSL Command Line Tool $ openssl req -x509 -nodes -newkey rsa:2048 -keyout key.pem -out cert.pem ⭐ 自己署名証明書を作成 $ openssl genrsa -out private.key 2048 ⭐ RSA秘密鍵を生成 $ openssl enc -aes-256-cbc -in plain.txt -out encrypted.txt ⭐ ファイルを暗号化 $ openssl enc -d -aes-256-cbc -in encrypted.txt -out decrypted.txt ⭐ 暗号化されたファイルを復号 $ openssl x509 -in cert.pem -text -noout ⭐ 証明書の内容を表示 コマンドラインから直接実行できる暗号化ツール

コマンドラインツール以外にもプログラミング言語でライブラリとして機能を利用することも可能です

OpenSSL コマンドラインツール ライブラリ openssl genrsa openssl req -x509 openssl enc 開発者が直接実行 Node.js Python PHP プログラムから利用

自己署名証明書の作成

OpenSSLコマンドを使用して、自己署名証明書を作成します。

Windowsでopensslコマンドを使用する方法

WindowsでOpenSSLを使用する方法 問題：Windowsのコマンドプロンプトではopensslコマンドが使えない 理由：WindowsにはOpenSSLが標準でインストールされていないため 解決方法の選択肢 Git Bash ✓ 簡単にインストール ✓ OpenSSL付属 ✓ 一般的な選択肢 推奨 WSL ✓ 本格的な環境 ✓ Linux互換 × セットアップ複雑 PowerShell × 追加インストール必要 × 設定複雑 × 非推奨 推奨手順：Git Bashを使用 1. 作業フォルダを 右クリック 2. 「Git Bash Here」 を選択 3. opensslコマンド を実行

opensslコマンドで自己署名SSL証明書を作成します。以下のコマンドを使用します：

openssl req -x509 -nodes -newkey rsa:2048 -addext "subjectAltName = DNS:localhost" -keyout localhost+2-key.key -out localhost+2.crt
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -addext "subjectAltName = DNS:localhost,IP:127.0.0.1" -keyout server.key -out server.crt

このコマンドを実行すると、対話形式で以下の情報を入力できます：
Country Name (国名): JP
State (都道府県): Tokyo
Locality (市区町村): Tokyo
Organization Name (組織名)
Organizational Unit Name (部門名)
Common Name: localhost
Email Address (メールアドレス)

-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Tokyo
Locality Name (eg, city) []:Shinjuku
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:

このコマンドで以下のファイルが生成されます：

  • server.key: 秘密鍵
  • server.crt: 証明書

コマンドプロンプトとは？ テキストベースでコンピュータを操作するための入力画面 Windowsで使えるコマンドプロンプトの種類 コマンドプロンプト(cmd) Windows標準 dirやcopyなど Windowsコマンドのみ C:\> PowerShell 高機能なシェル スクリプト実行可能 .NET機能が使える PS C:\> Git Bash Unix系コマンド使用可 ls、catなど 開発でよく使用 user@PC MINGW64 ~ コマンドプロンプトとは： • コンピュータにテキストで命令を出すための画面 • マウス操作の代わりにコマンド（命令文）を入力して操作する
  • 作業したいフォルダで右クリック
  • 「Open Git Bash here」を選択
Git Bashの起動方法 1. フォルダを右クリック 新規作成(N) Open Git GUI here Open Git Bash here Code で開く ▶ 2. 「Git Bash here」を選択 MINGW64:/ user@PC $
Git Bashでよく使う操作例 ファイル操作の例 $ ls -la $ mkdir project && cd project $ touch index.html $ grep “error” log.txt $ find . -name “*.js” Git操作の例 $ git clone https://github.com/user/repo.git $ git checkout -b feature/new-feature $ git add . && git commit -m “Update” $ git push origin main $ git pull origin main 開発ツールの例 $ npm init && npm install express $ python -m venv venv $ pip install -r requirements.txt $ docker-compose up -d $ npm run build シェルスクリプトの例 $ chmod +x deploy.sh $ ./backup.sh $ for f in *.jpg; do convert “$f” “${f%.jpg}.png”; done $ curl -s https://api.example.com | jq ‘.’ $ watch -n 5 ‘ps aux | grep node’ 📌 便利な使い方のヒント • Tab補完を活用してコマンドやファイル名を効率的に入力 • ヒストリー機能（上下キー）で過去のコマンドを再利用 • パイプ（|）やリダイレクト（>）を使ってコマンドを組み合わせる

Apacheの設定

services:
  web:
    image: httpd:2.4
    ports:
      - "443:443"
    volumes:
      - ./conf/httpd.conf:/usr/local/apache2/conf/httpd.conf
      - ./conf/server.crt:/usr/local/apache2/conf/server.crt
      - ./conf/server.key:/usr/local/apache2/conf/server.key

Apacheの設定では、以下のモジュールを有効化する必要があります：

  • ssl_module
  • socache_shmcb_module

ブラウザでの証明書の信頼設定（NET::ERR_CERT_AUTHORITY_INVALID 解決策）

自己署名証明書を使用すると、ブラウザでNET::ERR_CERT_AUTHORITY_INVALIDエラーが表示されます。これを解決するには：

  1. 証明書ファイル（.crt）をダブルクリック
  2. 「証明書のインストール」をクリック
  3. 「ローカルコンピューター」を選択
  4. 「信頼されたルート証明機関」を選択
  5. インストールを完了

これにより、ブラウザが証明書を信頼するようになります。

自己署名証明書の警告と対処 開発環境 NET::ERR_CERT_AUTHORITY_INVALID この証明書は信頼できません 自己署名証明書のため 一時的な解決策（ローカルのみ） 1. 証明書をダブルクリック 2. 「証明書のインストール」 3. 「ローカルコンピューター」選択 4. 「信頼されたルート証明機関」 5. インストール完了 本番環境 根本的な解決策 認証局（CA）から 正式な証明書を取得 認証局の例 • Let’s Encrypt（無料） • DigiCert • Cloudflare • GeoTrust 開発環境では一時的な解決策で十分ですが、本番環境では必ず正式な証明書を使用してください

キュリティに関する注意点

  • 自己署名証明書は開発環境専用です
  • 本番環境では必ず信頼された認証局から証明書を取得してください
  • 証明書と秘密鍵の取り扱いには十分注意が必要です

まとめ

ローカル開発環境でHTTPSを使用することで、本番環境に近い開発が可能になります。ただし、自己署名証明書の使用は開発環境に限定し、本番環境では適切な証明書を使用することを忘れないようにしましょう。

Happy Coding! 🚀