HTTPS開発テストまとめ（mkcert / ngrok｜LAN / WAN）
HTTPS開発テストまとめ（mkcert / ngrok｜LAN / WAN）
対象：Flask 等のWebアプリを HTTPS前提 で社内（LAN）・社外（WAN）からテストしたい開発者向け。 本資料は「読めばそのまま実行できる」ことを目的とする。
1. なぜ開発でもHTTPSが必須なのか
- ブラウザAPI（位置情報、加速度、カメラ等）が HTTPS必須 になりがち
- Cookie の
Secure/SameSite制御 - 外部API・Webhook連携はHTTPS前提がほぼ100%
- 本番との差分を無くす（HTTP→HTTPSで後から壊れるのを防ぐ）
2. 結論（最短の選択）
- 社内LANでHTTPSテスト → mkcert
- 社外WANからHTTPSテスト → ngrok
- スマホ・第三者も含む → ngrok（mkcertはCA配布が必要）
3. 構成イメージ
LAN（社内）：mkcert
[開発PC] https://192.168.0.105:5000
Flask + mkcert証明書
↑
[社内PC / スマホ]
※ ルートCAを信頼した端末のみ「警告なし」
WAN（社外）：ngrok
[開発PC] http://127.0.0.1:5000 (ローカルはHTTPでもOK)
↑
ngrok http 5000
↓
[社外端末] https://xxxx.ngrok-free.app (公開HTTPS)
4. mkcertとは（LAN向け）
- ローカル専用の 認証局（ルートCA） を作成
- そのCAで IP / ホスト名用の証明書を即時発行
- CAを信頼した端末では 警告なしHTTPS
mkcertは社内検証用。本番・社外公開には使わない。
5. mkcert セットアップ（Ubuntu）
5-1. 依存パッケージ
sudo apt update sudo apt install -y libnss3-tools ca-certificates curl
5-2. mkcert インストール（公式バイナリ）
curl -L -o mkcert https://github.com/FiloSottile/mkcert/releases/latest/download/mkcert-v1.4.4-linux-amd64 chmod +x mkcert sudo mv mkcert /usr/local/bin/ mkcert --version
5-3. ローカルCA作成
mkcert -install mkcert -CAROOT
5-4. 証明書発行（IP必須）
mkdir cert cd cert mkcert 192.168.0.105 localhost 127.0.0.1
IPでアクセスするなら、必ずIPを含めて発行（SANにIPが必要）。
6. mkcert セットアップ（Windows）
6-1. インストール
choco install mkcert # または scoop install mkcert mkcert --version
6-2. ローカルCA作成
mkcert -install
CA保存先例：%LOCALAPPDATA%\mkcert\rootCA.pem
6-3. 証明書発行
mkdir cert cd cert mkcert 192.168.0.105 localhost 127.0.0.1
7. FlaskでHTTPS起動（共通）
app.run(
host="0.0.0.0",
port=5000,
ssl_context=("cert/192.168.0.105+2.pem",
"cert/192.168.0.105+2-key.pem"),
)
アクセス例：
https://192.168.0.105:5000
8. ngrokとは（WAN向け）
- ローカル端末 → ngrokクラウドへアウトバウンド接続でトンネルを張る（NAT配下でも通りやすい）
- 公開URL（HTTPS）を自動発行し、そこからローカルへ転送
- TLSは通常ngrok側で終端（ローカルはHTTPでもOK）
社外に公開＝穴を開ける。デモ用アカウント・デモ用データ・最低限の認証は必須。
9. ngrok セットアップ（Windows / Ubuntu）
9-1. Windows（推奨：Microsoft Store / WinGet）
「ngrokが見つからない」問題の多くは 未インストール or PATH。まずここを確実に。
# Microsoft Store 経由（推奨） winget install ngrok -s msstore # もしくは winget のID指定（環境によってはこちらが通る） winget install -e --id Ngrok.Ngrok # 動作確認 ngrok version where ngrok
9-2. Ubuntu（Snap）
sudo apt update sudo apt install -y snapd sudo snap install ngrok ngrok version
9-3. Ubuntu（Aptリポジトリ：公式手順）
Snapが嫌ならこれ。ディストリや環境に合わせて使い分け。
curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \ | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \ && echo "deb https://ngrok-agent.s3.amazonaws.com bookworm main" \ | sudo tee /etc/apt/sources.list.d/ngrok.list \ && sudo apt update \ && sudo apt install -y ngrok ngrok version
上の bookworm はDebian向けの例。Ubuntuで使う場合は公式ページの指示に寄せること。
10. ngrok への Token 登録（必須ネタ）
ngrokは「認証トークン（authtoken）」を設定すると、セッション制限が緩くなったり、ダッシュボード管理が効く。 トークンは ngrok のダッシュボードで取得する。
10-1. Token登録コマンド（現行）
ngrok config add-authtoken YOUR_TOKEN
10-2. 登録確認（設定チェック）
ngrok config check
10-3. どこに保存されるか
- ngrokは設定ファイル（ngrok.yml）にauthtokenを書き込む。
- 場所はOSで異なるが、
ngrok config配下のコマンドで管理できる（直接編集も可能）。
旧コマンド（ngrok authtoken ...）が紹介されている記事が残っているが、
現行は ngrok config add-authtoken ... を使うのが確実。
11. ngrok で社外公開（最短）
11-1. ローカルでアプリ起動（HTTPでOK）
python app.py # http://127.0.0.1:5000 が動いている前提
11-2. トンネル開始
ngrok http 5000
11-3. 使うURL
- ngrokの出力に表示される Forwarding の https URL を社外へ渡すだけ。
- 無料プラン等では再起動でURLが変わることがある（固定URLは設定/プラン依存）。
12. mkcert / ngrok 比較
| 項目 | mkcert | ngrok |
|---|---|---|
| 用途 | 社内LAN | 社外WAN |
| HTTPS | ローカル終端 | ngrok終端（公開証明書） |
| 相手端末設定 | CA信頼が必要 | 不要 |
| URL固定 | 固定（IP/ホスト名が固定なら） | 変わる場合あり（固定は設定/プラン） |
| 公開リスク | 低（LAN限定） | 高（公開） |
13. 典型トラブル（刺さるやつだけ）
- LANから繋がらない → Flaskが
host="0.0.0.0"/ FW / Wi-FiのAP isolation - HTTPS警告 → 証明書にIP未登録（SAN不足） / 端末にCA未信頼
- ngrokが実行できない → 未インストール / PATH /
ngrok versionで確認
14. 参考（一次情報）
まとめ：社内はmkcert、社外はngrok。
これを分けるだけで、HTTPS開発テストはほぼ詰まらないと思う。
