Update: 自己署名証明書の手順を詳細化

docs-tech/browser-secure-context/index.md

@@ -59,18 +59,116 @@ ssh -L 7860:localhost:7860 -L 8000:localhost:8000 user@192.168.1.100
 
 ### 方法3: 自己署名証明書でHTTPS化
 
-本格運用向け。サーバー側でHTTPSを有効化。
+チーム共有や本格運用向け。サーバー側でHTTPSを有効化。
+
+#### Step 1: 証明書を生成
+
+サーバー側で以下を実行：
 
 ```bash
-# 証明書生成
+openssl req -x509 -newkey rsa:4096 \
-openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes \
+  -keyout key.pem \
-  -subj "/CN=192.168.1.100"
+  -out cert.pem \
+  -days 365 \
+  -nodes \
+  -subj "/CN=192.168.1.100" \
+  -addext "subjectAltName=IP:192.168.1.100"
+```
 
-# Pythonの場合（例: Gradio）
+| オプション | 説明 |
+|-----------|------|
+| `-keyout key.pem` | 秘密鍵ファイル（サーバーが使う、外部に漏らさない） |
+| `-out cert.pem` | 証明書ファイル（クライアントに配布可能） |
+| `-days 365` | 有効期限（1年） |
+| `-nodes` | パスフレーズなし（サーバー自動起動用） |
+| `-subj "/CN=..."` | Common Name（IPアドレスまたはホスト名） |
+| `-addext "subjectAltName=..."` | SANs（最近のブラウザで必須） |
+
+**生成されるファイル：**
+```
+key.pem   # 秘密鍵（絶対に公開しない）
+cert.pem  # 証明書（クライアントに配布OK）
+```
+
+#### Step 2: サーバーで証明書を使う
+
+**Gradio：**
+```bash
 python app.py --ssl-keyfile key.pem --ssl-certfile cert.pem
 ```
 
-ブラウザで `https://192.168.1.100:7860` にアクセスし、証明書警告を許可。
+**FastAPI / Uvicorn：**
+```bash
+uvicorn main:app --host 0.0.0.0 --port 8000 \
+  --ssl-keyfile key.pem --ssl-certfile cert.pem
+```
+
+**Python http.server（簡易）：**
+```python
+import ssl
+import http.server
+
+context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
+context.load_cert_chain('cert.pem', 'key.pem')
+
+server = http.server.HTTPServer(('0.0.0.0', 8000), http.server.SimpleHTTPRequestHandler)
+server.socket = context.wrap_socket(server.socket, server_side=True)
+server.serve_forever()
+```
+
+**Node.js / Express：**
+```javascript
+const https = require('https');
+const fs = require('fs');
+const app = require('./app');
+
+https.createServer({
+  key: fs.readFileSync('key.pem'),
+  cert: fs.readFileSync('cert.pem')
+}, app).listen(8000);
+```
+
+#### Step 3: ブラウザでアクセス
+
+`https://192.168.1.100:8000` にアクセスすると警告が出る：
+
+**Chrome:**
+1. 「この接続ではプライバシーが保護されません」と表示
+2. 「詳細設定」をクリック
+3. 「192.168.1.100 にアクセスする（安全ではありません）」をクリック
+
+**Firefox:**
+1. 「警告: 潜在的なセキュリティリスクあり」と表示
+2. 「詳細」→「危険性を承知で続行」
+
+**Safari:**
+1. 「この接続はプライベートではありません」と表示
+2. 「詳細を表示」→「このWebサイトを閲覧」
+
+#### Step 4: 証明書を信頼済みに登録（オプション）
+
+毎回警告を出したくない場合、証明書をOSに登録。
+
+**macOS:**
+```bash
+sudo security add-trusted-cert -d -r trustRoot \
+  -k /Library/Keychains/System.keychain cert.pem
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo cp cert.pem /usr/local/share/ca-certificates/myserver.crt
+sudo update-ca-certificates
+```
+
+**Windows:**
+1. `cert.pem` を `cert.crt` にリネーム
+2. ダブルクリック → 「証明書のインストール」
+3. 「ローカルマシン」→「信頼されたルート証明機関」に配置
+
+:::tip
+チームで共有する場合は `cert.pem` を配布し、各メンバーがOSに登録すると便利です。
+:::
 
 ### 方法4: ngrok / Cloudflare Tunnel