HTTPS-enabled Local Development Server

🔒 HTTPS対応 ローカル開発サーバー構築・起動手順（PWA対応 & Bun併記）

1. 概要

モバイル、Webアプリケーション、そしてPWA (Progressive Web App) の開発に必要なHTTPS対応のローカル開発サーバー構築手順を整理します。PWA対応を考慮し、HTTPS証明書の設定を必須とします。

2. 共通事項マトリックス（フレームワーク横断比較）

ローカル環境でのHTTPS化とPWA対応の基本的なステップには共通性があります。

項目Flutter (Web/PWA)React Native (Web/PWA)Astro / React (Viteベース)Next.js
PWA対応の重要性高 (Web版の配信に必須)高 (Web版の配信に必須)高 (デフォルトで考慮)高 (静的エクスポートで考慮)
開発サーバーDartVM (http_server)Metro BundlerVite Dev ServerNext.js Dev Server
HTTPS化の一般的なアプローチDartコード内でのTLS設定外部プロキシ**(mkcert/ngrok)**利用が一般的Vite設定ファイル内でのTLS設定外部プロキシ**(mkcert/https-proxy)**利用が一般的
証明書作成ツールmkcertmkcertmkcertmkcert
パッケージ管理Dart/Flutter CLInpm/yarn/Bunnpm/yarn/Bunnpm/yarn/Bun

2.1. 共通手順：自己署名証明書の作成（mkcert推奨）

ローカルCAを作成し、信頼された証明書を生成するために、**mkcert**の使用を推奨します。

手順macOS (Terminal)Windows (PowerShell)
mkcertのインストールbrew install mkcertchoco install mkcert
ローカルCAのインストールmkcert -installmkcert -install
証明書の生成mkcert localhost 127.0.0.1mkcert localhost 127.0.0.1

*生成されるファイル名（例：localhost+1-key.pemとlocalhost+1.pem）は、以降の手順で共通して使用します。

3. フレームワーク別：構築・起動手順

3.1. Flutter (Web/PWA対応 - http_server利用)

PWA対応のため、ビルドされたWebアセット（通常build/webディレクトリ）をhttp_serverでHTTPS配信します。

手順macOS (Terminal)Windows (PowerShell)
ビルドflutter build webflutter build web
依存関係の追加dart pub add http_serverdart pub add http_server
Dartコードの設定http_serverでbuild/webを配信するコード内でSecurityContextを設定します。http_serverでbuild/webを配信するコード内でSecurityContextを設定します。
コード例dart // ... final context = SecurityContext.defaultContext ..usePrivateKey('path/to/key.pem') ..useCertificateChain('path/to/cert.pem'); final server = await HttpServer.bindSecure(InternetAddress.loopbackIPv4, 8080, context); // ... var virtualDirectory = VirtualDirectory('build/web'); // ... dart // ... final context = SecurityContext.defaultContext ..usePrivateKey('path/to/key.pem') ..useCertificateChain('path/to/cert.pem'); final server = await HttpServer.bindSecure(InternetAddress.loopbackIPv4, 8080, context); // ... var virtualDirectory = VirtualDirectory('build/web'); // ...
サーバー起動dart run path/to/server.dartdart run path/to/server.dart

3.2. React Native (Web/PWA対応)

React Nativeは通常モバイル開発ですが、Web対応（例: Expo Web）の際、Vite/Webpack Dev Serverの設定が必要になります。HTTPS対応はViteベースの手順（3.2）に準じます。

手順macOS (Terminal)Windows (PowerShell)
Web依存関係の追加bun add -d expo-web などbun add -d expo-web など
HTTPS設定3.2. React/Astro (Viteベース) の手順を参照。3.2. React/Astro (Viteベース) の手順を参照。
起動 (PWA)bun run web (Expo Webの場合)bun run web (Expo Webの場合)

3.3. React / Astro (Viteベースのプロジェクト)

Vite Dev Serverのvite.config.js内で証明書ファイルを指定します。PWA対応プラグイン（例：vite-plugin-pwa）が容易に導入できます。

手順macOS (Terminal)Windows (PowerShell)
依存関係の追加bun add -d @vitejs/plugin-basic-sslbun add -d @vitejs/plugin-basic-ssl
vite.config.jsの設定パスはUnix形式（/）で記述します。パスはUnix形式（/）で記述します。
設定例javascript // ... server: { https: { key: './path/to/key.pem', cert: './path/to/cert.pem', } } // ... javascript // ... server: { https: { key: './path/to/key.pem', cert: './path/to/cert.pem', } } // ...
起動bun run devbun run dev

3.4. Next.js

Next.jsは外部プロキシを利用してHTTPS化します。PWA対応にはnext-pwaパッケージなどが使用されます。

手順macOS (Terminal)Windows (PowerShell)
外部プロキシインストールbun add -g local-ssl-proxybun add -g local-ssl-proxy
package.jsonのスクリプト修正スクリプトは共通。スクリプトは共通。
スクリプト例json "scripts": { "dev": "next dev", "dev:https": "bun run dev & local-ssl-proxy --source 8443 --target 3000 --cert localhost+1.pem --key localhost+1-key.pem" } json "scripts": { "dev": "next dev", "dev:https": "bun run dev & local-ssl-proxy --source 8443 --target 3000 --cert localhost+1.pem --key localhost+1-key.pem" }
起動bun run dev:httpsbun run dev:https