外部アクセス対応のHTTPSテスト環境の構築

✒️ 外部アクセス対応のHTTPSテスト環境の構築

投稿日：2026-09-11

最終更新日：2026-09-12

はじめに

前回、外部端末からアクセス可能な HTTPS テスト環境の構築方法について説明しました。今回は、その実践編となります。

実際に、環境を構築し、スマホで警告画面が表示されずに、サイトの画面が表示されるところまで確認していきます。

尚、本記事は、過去記事「開発環境について/HTTPSテスト環境の構築」に従い、既に、Node.js、mkcert、Express といった必要なソフトウェアが導入され、HTTPS のローカルなテスト環境が構築済みであることを前提としています。

※ ここでいう「外部端末」とは、インターネット上の端末ではなく、HTTPSサーバーを実行しているPCとは別の端末を指します。

テスト環境の拡張

それでは、既存の　HTTPS テスト環境を拡張していく形で作業をすすめたいと思います。作業手順は以下の通りです。

LAN 内で使用するIPアドレスを含めた HTTPS 証明書の再作成
再作成した証明書で HTTPS サーバーの再立ち上げ
ルート認証局（CA）の証明書の取得
ルート認証局（CA）の証明書のスマホへの転送
スマホ（iPhone iOS26）でのルート認証局（CA）の証明書の受取
スマホ（iPhone iOS26）でのルート認証局（CA）の証明書の登録
ブラウザで警告画面と警告表示がでないことの確認

それでは、順番に詳しくみていきたいと思います。

1. LAN 内で使用する IP アドレスを含めた HTTPS 証明書の再作成

1-1. ターミナルの起動

Windowsの場合：

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

スタートボタンを右クリック
「ターミナル」をクリック

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

1-2. テスト対象となるプロジェクトへの移動

テスト対象となるプロジェクトのフォルダーも、引き続き c:\Users\test\serverTest を使用します。

以下を入力：

cd c:\users\test\serverTest

1-3. HTTPS証明書の再作成

LAN 内で使用する IP アドレスは、引き続き 192.168.10.108 を利用します。また、HTTPS サーバーのポート番号には 3000 を使用します。

まず、LAN 内で使用する IP アドレス 192.168.10.108 を含めた HTTPS 証明書を再作成します。

以下を入力：

mkcert localhost 127.0.0.1 192.168.10.108 ::1

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

localhost+3-key.pem
localhost+3.pem

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

2. 再作成した証明書で HTTPS サーバーの再立ち上げ

2-1. server.js の調整

server.js ファイルの HTTPS 証明書読み込み部分を、再作成した HTTPS 証明書に合わせて調整します。

以下を入力：

notepad server.js

メモ帳にて、HTTPS 証明書読み込み部分を調整して保存：

※ 使用しているモジュール形式に応じて選択してください。.js ファイルの場合、一般的には package.json の type プロパティが "module" であれば ES Modules、"commonjs" または type の指定がなければ CommonJS として扱われます。以下のコードの主な違いは、モジュールの読み込み方法（require / import）です。

【 CommonJS の場合】

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+3-key.pem"),
    cert: fs.readFileSync("localhost+3.pem")
  },
  app
).listen(3000, () => {
  console.log("HTTPS server running at https://localhost:3000");
});

【 ES Modules の場合】

import https from "https";
import fs from "fs";
import express from "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+3-key.pem"),
    cert: fs.readFileSync("localhost+3.pem")
  },
  app
).listen(3000, () => {
  console.log("HTTPS server running at https://localhost:3000");
});

2-2. HTTPS サーバーの起動

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

※ 既に Express サーバーが起動済みの場合は、該当ターミナルで Ctrl + C キーを入力して終了させてから、再度起動してください。

以下を入力：

node server.js

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

（図１）パソコンサイト画面

3. ルート認証局（CA）の証明書の取得

3-1. 新たなターミナルの起動

Express サーバーを立ち上げたターミナルとは異なるターミナルを新たに立ち上げます。

Windowsの場合：

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

スタートボタンを右クリック
「ターミナル」をクリック

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

3-2. ルート認証局（CA）の証明書の格納フォルダの確認

パソコンに格納されているルート認証局（CA）の証明書のファイルの格納場所を探します。

以下を入力：

mkcert -CAROOT

実行すると、下記のように証明書の格納フォルダーが表示されます。

C:\Users\test\AppData\Local\mkcert

フォルダーの中身を確認します。

以下を入力：

ls C:\Users\test\AppData\Local\mkcert

実行すると、下記のようにフォルダ内のファイルが確認できます。

    ディレクトリ: C:\Users\test\AppData\Local\mkcert


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-ar---        2026/05/13     14:27           2484 rootCA-key.pem
-a----        2026/05/13     14:27           1793 rootCA.pem

👉 ルート認証局（CA）の証明書ファイルのパスは、C:\Users\test\AppData\Local\mkcert\rootCA.pem であることが確認できます。

4. ルート認証局（CA）の証明書のスマホへの転送

ルート認証局（CA）の証明書のファイルはいろいろな手段で、スマホに転送することが可能ですが、当記事では、https サーバーにUPし、スマホにダウンロードする方法をとることにします。

※ 本記事では、開発用のプライベートネットワーク内で、自身が管理する HTTPS サーバーから rootCA.pem を取得しています。ルート認証局（CA）の証明書は端末上で信頼することになる重要な証明書なので、第三者が介在する可能性のあるネットワークでは、この方法で取得した証明書を安易に信頼しないでください。AirDrop、USB、NAS など、信頼できる方法で転送する方法もあります。

作業としては、ルート認証局（CA）の証明書ファイルを Express のルートフォルダー public にコピーします。

以下を入力：

cp  C:\Users\test\AppData\Local\mkcert\rootCA.pem ./public

※ public にコピーしたルート認証局（CA）の証明書ファイルは、秘密鍵ではないので公開されたら即危険というファイルではありませんが、Web公開フォルダーへ置きっぱなしにする理由もありません。そのため、スマホ等外部端末でのダウンロードが終了したら下記コマンドで、削除するようにしてください。

以下を入力：

rm ./public/rootCA.pem

以上で、パソコン側の作業は終了です。次の手順からは、スマホ側の作業となります。

5. スマホ（iPhone iOS26）でのルート認証局（CA）の証明書の受取

スマホから HTTPS サーバーにアクセスしてルート認証局（CA）の証明書を取得します。

※ 本記事では、ブラウザに chrome を使用しています。

ブラウザを立ち上げ、URL 欄に以下を入力：

https://192.168.10.108:3000/rootCA.pem

5-1. 警告画面の表示

警告画面が表示されます。画面下部の「詳細設定」をタップします。

※ 本記事のスクリーンショットでは、操作する箇所を朱色の円で囲んで示しています。

（図２）警告画面１

5-2. 新たな警告画面の表示

新たな警告画面が表示されます。画面中央の「192.168.10.108にアクセスする（安全ではありません）」をタップします。

（図３）警告画面２

5-3. ダウンロードメッセージの表示

画面下部にダウンロードの旨のメッセージが表示されるので、「保存」をタップします。

（図４）ダウンロードメッセージ

5-4. 保存先の決定

表示されるポップアップで「ファイル」にチェックが入っていることを確認し、「保存」をタップします。

（図５）ダウンロードポップアップ

5-5. ダウンロード完了

画面下部にダウンロード完了の旨のメッセージが表示されるので、「アプリで開く」をタップします。

（図６）ダウンロード完了

5-6. ダウンロードフォルダーへの移動

表示されるポップアップの下段の「ダウンロードフォルダを開く」をタップします。

（図７）アプリで開く

5-7. プロファイルのダウンロード

表示されたダウンロードフォルダを下方向にスクロールし、rootCA.pem ファイルを探し、タップします。

（図８）ダウンロードフォルダー

5-8. プロファイルダウンロード完了

プロファイルダウンロードの旨のポップアップが表示されたら、「閉じる」をタップします。

6. スマホ（iPhone iOS26）でのルート認証局（CA）の証明書の登録

6-1. 一般設定画面を開く

iPhone の設定アプリをタップして立ち上げ、表示された画面の「一般」をタップします。

（図１０）一般設定画面を開く

6-2. VPN とデバイス管理設定画面への遷移

表示された「一般」設定画面を下方向にスクロールし、「 VPN とデバイス管理」設定画面をみつけタップします。

（図１１）VPNとデバイス管理設定画面を開く

6-3. ダウンロード済みプロファイルを開く

ダウンロード済みプロファイルに、今回ダウンロードされたプロファイルが登録されているので、タップします。

※ 今回は、PC上で作成した mkcert のルート CA をインストールしているため、プロファイル名には mkcert と PC の情報が表示されています。

6-4. プロファイルの登録

表示されているプロファイルの名前が、今回ダウンロードした mkcert のルート CA であることを確認し、画面右上の「インストール」をタップします。

※ 未検証と表示されていますが、今回自分で作成した mkcert の CA なので、その名前を確認してインストールします。

6-5. iPhoneのパスコード入力

パスコードを求められるので、入力後、画面右上の「✔」をタップします。

（図１４）パスコード入力

6-6. プロファイル登録の確認

警告画面が表示されるので、内容を確認し、画面右上の「インストール」をタップします。

6-7. プロファイル登録の再確認

確認のポップアップ画面が表示されるので、「インストール」をタップします。

6-8. プロファイル登録完了

インストール完了の画面が表示されるのを確認し、画面右上の「✔」をタップします。

※ この時点では、まだ Web サイト用のルート証明書としては信頼されていません。次以降の手順で「証明書信頼設定」を有効にする必要があります。

6-9. 一般設定画面への遷移

画面が「 VPN とデバイス管理」設定画面に戻るので、画面左上の「<」をタップして「一般」設定画面に戻ります。

（図１８）一般設定画面にもどる

6-10. 情報設定画面への遷移

「一般」設定画面を上方向にスクロールし、「情報」をみつけタップします。

（図１９）情報設定画面を開く

6-11. 証明書信頼設定画面への遷移

「情報」設定画面が表示されるので、下方向にスクロールし、「証明書信頼設定」をみつけタップします。

（図２０）証明書信頼設定画面を開く

6-12. プロファイルの信頼設定

「証明書信頼設定」設定画面のルート証明書を全面的に信頼の部分に今回ダウンロードしたプロファイルが表示されていることを確認し、右側のスイッチをタップします。

6-13. プロファイル信頼設定の確認

確認用のポップアップ画面が表示されるので、確認後「続ける」をタップします。

6-14. プロファイルの信頼設定完了

該当プロファイルの右側スイッチがONになっていることを確認し、設定アプリを終了します。

7. ブラウザで警告画面と警告表示がでないことの確認

ブラウザにもどり、新しいタブを開いて 、URL 欄に以下を入力：

https://192.168.10.108:3000/

警告画面や警告表示なく、サイトの画面が表示されることが確認できます。

※ 筆者の環境では、ルート認証局（CA）の証明書をダウンロードするために使用したタブでリロードを行っても、しばらく警告表示が消えませんでした。新しいタブを開いてアクセスしたところ、警告表示はなくなりました。原因については確認できていません。

（図２４）iPhoneサイト画面

今回のアクセス先は localhost ではなく 192.168.10.108 ですが、HTTPS　接続が正しく確立されているため、Secure Context を必要とする OPFS も利用できます。

（図２５）iPhoneサイト画面動作確認

※ 使い方については、「データ保存技術/OPFS の動作確認（非同期操作）」を参照してください。

※ この記事内のコードは ISC License に基づき公開しています。

🔗 関連記事