Windows環境にhttps://localhost/環境を作成する

以前、ngrokという環境を作りました。Dockerを使わない場合や個人の開発環境として使うにはngrokのほうが楽です。

この記事ではngrok(エングロック)について書きます。このngrokを初めて知ったのは、GoogleHomeの勉強会に参加したときです。ngrokは、localにhttp/httpsサーバを簡単に立てて、インターネットからアクセスできるようにできるものです。例えばスマホやクラウドからGoogleHomeを操作できるようになるというものでした。

しかし、docker上でhttps環境を作成しようとすると、SSL証明書が必要になりますが、WindowsだとSSL証明書の取得が結構手間なんです。また、ngrokは再起動の度にURLが変わってしまいますので、Windowsで作った環境を外部のテスト環境に使おうとした場合に不向きです。

そういうときに「mkcert」というツールを利用します。

※この先で紹介する方法では、AmazonのEC2環境下では、https://localhost 環境は作成できませんでした。

chocolateyのインストール
mkcertのインストール
証明書生成
Dockerで表示させてみる

chocolateyのインストール

mkcertをインストールするためのツールをインストールします。powershellを管理者として実行します。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

インストールされたかどうかを確認

PS C:\WINDOWS\system32> choco list -l
Chocolatey v0.12.1
chocolatey 0.12.1
1 packages installed.

mkcertのインストール

下記コマンドを実行してください。

choco install mkcert
mkcert --install

もし、セキュリティ警告が出たら、「はい」をクリックしてください。

証明書生成

次のコマンドで証明書が発行されます。

mkcert localhost

このコマンドを実行すると次のファイルができます。

localhost.pem
localhost-key.pem

Dockerで表示させてみる

ファイル構成は、以下の通り。

[ベースディレクトリ]
│  docker-compose.yml
├─html
│      index.html   ※内容は省略
└─nginx
    ├─conf.d
    │      default.conf
    └─ssl
            localhost-key.pem　　　※証明書生成で作成したファイル
            localhost.pem         ※証明書生成で作成したファイル

docker-compose.ymlファイルの内容

version: '3'
services:
  web:
    image: nginx:stable
    container_name: "https-web"
    ports:
      - '8080:80'
      - '8443:443'
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./nginx/ssl:/etc/nginx/ssl
      - ./html:/var/www/html

default.confファイルの内容

server {
    listen 80;
    return 301 https://$host:8443$request_uri;
}
server {
  listen 443 ssl;
  server_name 127.0.0.1;

  root /var/www/html;
  index index.html;

  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

  ssl_certificate /etc/nginx/ssl/localhost.pem;
  ssl_certificate_key /etc/nginx/ssl/localhost-key.pem;  
}つ

次のコマンドを実行