HTTPSテスト環境の選定

前回、HTTPSテスト環境について説明してきました。証明書の作成には、mkcert を用いるとして、HTTPSサーバーには、下記のようなものがあり、複数の選択肢があることがわかりました。

  • Node.jsサーバー
  • http-server
  • Express
  • Vite

👉 この中で、今回は、以下の組み合わせで環境構築していくことにします。

  • HTTPS証明書　　　　　　　　　　→　mkcert
  • HTTPS対応のサーバープログラム　→　Express

理由：

  • 自由度の高さ
  • ヘッダーも自由に設定可能
  • 今後の拡張性

環境構築手順

  • ローカル認証局ツール（mkcert）の導入
  • mkcertにより、HTTPS証明書の作成
  • Expressを利用した server.js の作成
  • server.js の起動

改めて mkcert とは？

mkcertは、Filippo Valsorda（FiloSottile）さんによって開発されたツールです。ローカル開発環境で信頼できるSSL証明書を簡単に作成することが可能です。

項目 内容
開発者 Filippo Valsorda（FiloSottile）
最新リリース v1.4.4（2022年4月26日）
リリース履歴 2020 年以降も継続的に更新
ライセンス 無料のオープンソース（OSS）

無料で、HTTPSのテスト環境を作成するためには、欠かすことのできないツールです。 開発者の方、関係者の方には、この場をお借りして、深くお礼を申し上げたいと思います。

mkcert の導入方法

  1. ターミナル（管理者）の起動
  2. mkcert の ID 確認
  3. mkcert の導入
  4. ターミナル（管理者）の再起動
  5. mkcert の確認
  6. 自己認証局の作成

1. ターミナルの起動

Windowsの場合：

「ターミナル（管理者）」アプリのウインドウから、コマンド入力により作業を行っていきます。

  • スタートボタンを右クリック
  • 「ターミナル（管理者）」をクリック
  • 起動許可を求めるポップアップウインドウが表示されたら、「はい」を押下

👉 これからの作業はすべて起動された「ターミナル（管理者）」のウインドウに入力します

2. mkcert の ID 確認

winget コマンドで、mkcert の ID を確認する

以下を入力：

winget search mkcert

👉 mkcert の ID が表示されます。

3. mkcert の導入

「2. mkcert の ID 確認」で表示された ID （FiloSottile.mkcertの部分）を指定して mkcert を導入します。

以下を入力：

winget install FiloSottile.mkcert

補足： ※ パッケージID（FiloSottile.mkcertの部分）は変更される可能性があるため、winget search で必ず確認して表示された値に合わせてください

4. ターミナル（管理者）の再起動

mkcertのパスを有効にする為、「ターミナル（管理者）」アプリを再起動します。

Windowsの場合：

「ターミナル（管理者）」アプリを終了した後、

  • スタートボタンを右クリック
  • 「ターミナル（管理者）」をクリック
  • 起動許可を求めるポップアップウインドウが表示されたら、「はい」を押下

👉 これからの作業はすべて起動された「ターミナル（管理者）」のウインドウに入力します

注）再起動ではなく、ターミナルのウインドウで新しいタブを開いても大丈夫です。

5. mkcert の確認

以下を入力：

mkcert --version

👉 バージョンが表示されれば、導入完了です。

6. 自己認証局の作成

自己認証局を登録します。

以下を入力：

mkcert -install

👉 ルート証明書が作成され、Windowsの信頼済みに登録されます。

注）セキュリティ警告のポップアップ画面が表示されたら、「はい」を選択します。

サーバー証明書の発行

  1. ターミナルの起動
  2. HTTPS証明書作成

1. ターミナルの起動

Windowsの場合：

以降の作業は管理者ではない「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。 事故防止の為、「ターミナル（管理者）」のアプリを閉じ、下記の作業で新たに、「ターミナル」を起動してください。

  • スタートボタンを右クリック
  • 「ターミナル」をクリック
  • 起動許可を求めるポップアップウインドウが表示されたら、「はい」を押下

👉 これからの作業はすべて起動された「ターミナル」のウインドウに入力します

2. HTTPS証明書作成

HTTPS証明書を作成します。

以下を入力：

mkcert localhost 127.0.0.1 ::1

これには、下記の意味が含まれます。各指定値アドレスでのアクセスに対応します。

指定値 意味
localhost ローカルホスト名（ブラウザで https://localhost を使うため）
127.0.0.1 IPv4 のローカルループバックアドレス
::1 IPv6 のローカルループバックアドレス

👉 下記のファイルが作成されれば、成功です。

  • localhost+2-key.pem
  • localhost+2.pem

注）ファイル名（ localhost+2 の部分）は、若干異なる場合があります。以降の作業は、作成された実際のファイル名に合わせてください。

改めて Expressとは？

Express.js は TJ Holowaychuk さんによって開発されたツールです。自由度が高く、本格的なサーバー運用も可能な為、将来的な拡張性も高いです。

項目 内容
開発者 TJ Holowaychuk（後に StrongLoop → IBM → OpenJS Foundation）
初回リリース 2010年11月16日
現在の管理 OpenJS Foundation
ライセンス MIT License

本ツールがなければ、HTTPSの開発環境の構築も容易に行うことができませんでした。 開発者の方、関係者の方には、この場をお借りして、深くお礼を申し上げたいと思います。

Express の導入

  1. ターミナルの起動
  2. プロジェクトフォルダーに移動
  3. Express の導入

1. ターミナルの起動

Windowsの場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

  • スタートボタンを右クリック
  • 「ターミナル」をクリック
  • 起動許可を求めるポップアップウインドウが表示されたら、「はい」を押下

👉 これからの作業はすべて起動された「ターミナル」のウインドウに入力します

2. プロジェクトのフォルダーに移動

テスト対象となるプロジェクトのフォルダーに移動します。 注）テスト対象となるプロジェクトには、「npm init -y」コマンドにより、node_modules が既に導入済みとします。

※　Node.jsの導入に関しては、過去投稿「開発環境について/Node.js環境の作成」を参照してください。

例： テスト対象となるプロジェクトのフォルダーがc:\Users\test\serverTestの場合、

以下を入力：

cd serverTest

3. Express の導入

npm コマンドを使って、Express を導入します。

以下を入力：

npm install express

👉 この例では、通常（dependencies）環境に express を導入していますが、テスト用、開発用にしか使用しない場合、「npm install -D express」コマンドで、開発用（devDependencies）環境に導入しても問題ありません。

Express サーバーの起動

  1. ターミナルの起動
  2. server.js の作成
  3. Express サーバーの起動

1. ターミナルの起動

Windowsの場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

  • スタートボタンを右クリック
  • 「ターミナル」をクリック
  • 起動許可を求めるポップアップウインドウが表示されたら、「はい」を押下

👉 これからの作業はすべて起動された「ターミナル」のウインドウに入力します

2. server.js の作成

Expressサーバーの定義ファイル”server.js”をJavascriptで作成します。

例：テスト対象となるプロジェクトのフォルダーを、下記のような構成であると仮定して説明します。

C:\USERS\TEST\SERVERTEST
│  localhost+2-key.pem   → HTTPS証明書（キー）
│  localhost+2.pem       → HTTPS証明書
│  server.js             → 作成するExpressサーバーの定義ファイル
│
└─public                → https公開ルート
        index.html
        script.js
        style.css
        table_class.js

注）「localhost+2-key.pem」と「localhost+2.pem」は、テスト対象となるプロジェクトのフォルダー直下にコピーした前提となっていますが、コピーしない場合は、下記、server.js 内のfs.readFileSync()のパラメータのパスを調整するようにしてください。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad server.js

メモ帳にて、以下を入力して保存：

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");
});

👉 app.use(express.static("public"))は、「/public フォルダの中身を、Web サーバのルート直下に公開する」という定義です。

3. Express サーバーの起動

Node.js コマンドで、Expressサーバーを起動します。

node server.js

👉 ブラウザにより、https://localhost:3000/にアクセスすると、テスト対象となるプロジェクトの index.html が表示されます。

まとめ

  • テスト用のHTTPS環境は、サーバー環境無しでローカル環境に構築可能
  • mkcert + Express により、柔軟な環境構築が可能
  • Expressの導入や稼働には、Node.js プロジェクトの環境が必要
  • Expressでは、Node.jsのプロジェクト毎に異なるサーバー運用も可能