HTTPSテスト環境について

フロントエンド開発者のためのHTTPS環境構築入門

〜ローカル環境でも安全な通信を実現する方法〜

結論（まずここだけ読めばOK）

今のWeb開発では HTTPSは必須ローカル開発でもHTTPSが必要なケースが増えている 簡単に環境を作るなら mkcert + Node.jsサーバー

👉 サーバーごとに設定方法が違うので、自分に合ったものを選ぶのが大事

HTTPSとは？

HTTPS（HyperText Transfer Protocol Secure）は、通信を暗号化して安全にやり取りする仕組みです。

通常のHTTPとの違いはシンプルです👇

HTTP → 通信内容がそのまま見える（危険） HTTPS → 暗号化されている（安全）

たとえばログイン情報や個人情報を扱う場合、HTTPSでないと簡単に盗まれてしまいます。

何故、必要か？

理由は大きく3つです👇

セキュリティ通信が暗号化されるので、盗聴や改ざんを防げます。
ブラウザ制限最近のブラウザはHTTPSでないと使えない機能があります。

例：

Service Worker

Web Push

Geolocation API

OPFS

SEO・信頼性 GoogleもHTTPSを推奨しており、最近では、非HTTPSサイトは警告が出ます。

サーバー環境が必要？

結論：必要です

HTTPSは単なる設定ではなく、

証明書
暗号化処理

を扱うため、厳密にはサーバーが必須になります。

しかし、テスト環境を考えた場合、本番環境で使用するようなサーバー環境がなくとも、ローカルに下記のものを用意できれば、HTTPS環境の構築は十分可能です。👇

HTTPS証明書
HTTPS対応のサーバープログラム

HTTPS証明書とは？

HTTPSで通信するためには「HTTPS証明書」が必要です。

これは簡単にいうと👇

👉 「このサイトは本物ですよ」と証明するもの

本番環境では通常、「Let's Encrypt」のような認証局から取得して利用します。当然、費用がかかります。

mkcert（ローカル開発の救世主）

テスト環境においても、認証局から証明書を発行してもらう必要があるのでしょうか？いえ、そんな場合に、ローカル開発で便利に利用できるのが、 👉 mkcert

mkcertは、Filippo Valsorda（FiloSottile）さんにより開発されました。ローカル開発環境で信頼できるSSL証明書を簡単に作成するための無料のオープンソース（OSS）ツールです。

特徴

ローカル専用の証明書を簡単に作れる
ブラウザ警告が出ない
設定がシンプル

基本の流れ

mkcert -install
mkcert localhost

これだけで証明書👇が作れます。

localhost.pem
localhost-key.pem

HTTPS対応のサーバープログラム

手軽にHTTPSサーバーを立てたいなら 👉 Node.jsサーバーが利用可能

npx serve --ssl-cert localhost.pem --ssl-key localhost-key.pem

mkcert で作成したHTTPS証明書を渡すだけで、ブラウザからHTTPSでアクセスが可能になります。

HTTPヘッダーカスタマイズの必要性

mkcertで証明書を作成し、Node.jsサーバーを使ってHTTPS環境が整いました。しかし、これだけでは、うまく動作しない場合があります。

ここ、かなり重要です。

最近のブラウザでは👇のような制約があります。

SharedArrayBufferが使えない
一部APIが動かない

原因は👇

👉 HTTPヘッダに、セキュリティヘッダが不足している。

必要なセキュリティヘッダ例：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

つまり👇

👉 HTTPSにしただけでは不十分 👉 Node.jsサーバーでは、HTTPヘッダのカスタマイズができない。

選択肢（ではどうするか？）

Node.jsサーバーに代わる、別のサーバープログラムの選択が必要になります。

どのサーバープログラムを使うか？

代表的な選択肢はこちら👇

http-server
Express
Vite

それぞれ特徴が違います。

http-server（シンプル派）

http-party という Node.js 系のツールを多数管理している OSS グループが開発主体のツールです。 MIT License で配布されています。

特徴

とにかく簡単
静的ファイル専用
カスタマイズ弱め
向いている人 →とりあえず動かしたい
検証用途

Express（柔軟性重視）

Express.js は TJ Holowaychuk さんによって開発されたツールです。現在は OpenJS Foundation で管理されています。 MIT License で配布されています。

特徴

自由度が高い
ヘッダーも自由に設定可能
本格的なサーバー構築向け
サンプル

const https = require("https");
const fs = require("fs");
const express = require("express");

const app = express();

// COOP / COEP ヘッダー
app.use((req, res, next) => {
  res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
  res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
  next();
});

// 静的ファイル
app.use(express.static("public"));

// HTTPS サーバー起動
https.createServer(
  {
    key: fs.readFileSync("localhost+2-key.pem"),
    cert: fs.readFileSync("localhost+2.pem")
  },
  app
).listen(3000, () => {
  console.log("HTTPS server running at https://localhost:3000");
});

vite（今どきの開発）

尤雨溪（Evan You）さんによって開発されたツールです。MIT License で配布されています。

特徴

フロントエンド開発に最適
高速
HTTPS設定も簡単
設定例

export default {
  server: {
    https: {
      key: fs.readFileSync("localhost-key.pem"),
      cert: fs.readFileSync("localhost.pem")
    }
  }
}

まとめ

HTTPSは現代Webの前提条件
ローカルでもHTTPS環境は必要

一番ラクなのは👇

👉 mkcert + Nodeサーバー

本格的にやるなら👇

👉 Express or Vite

✒️ HTTPSテスト環境について