ローカルサーバーをhttps化してスマホからもアクセスする

Dockerを使って既にlocalhost:3000でアクセスできるサーバーがあり、
それをhttps化してスマホからもアクセスできるようにする。

ドメインはnip.ioを使います。

証明書の作成

まずはmkcertを使って証明書を作成する。

$ brew install mkcert
$ mkcert -install
$ mkcert hoge.127.0.0.1.nip.io

hoge部分は任意のものを入れる。
発行されたものを任意のディレクトリに格納。ここではconfig/sslに配置。

コンテナの設定

httpsでアクセスしても既存のlocalhost:3000にアクセスできるように、
nginxでリバースプロキシサーバーを立てる。

docker-compose.yml

  rpx:
    image: nginx:latest
    container_name: reverse-proxy
    ports:
      - 443:443
    volumes:
      - ./docker/dev/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./config/ssl/hoge.127.0.0.1.nip.io.pem:/etc/certs/hoge.127.0.0.1.nip.io.pem
      - ./config/ssl/hoge.127.0.0.1.nip.io-key.pem:/etc/certs/hoge.127.0.0.1.nip.io-key.pem
    depends_on:
      - web

webが既に動いているローカルサーバー。

次にnginxの設定ファイルを用意する。

nginx.conf

events {
  worker_connections 16;
}
http {
  server {
    listen 443 ssl;
    server_name hoge.127.0.0.1.nip.io;
    ssl_certificate /etc/certs/hoge.127.0.0.1.nip.io.pem;
    ssl_certificate_key /etc/certs/hoge.127.0.0.1.nip.io-key.pem;

    location / {
      proxy_pass http://web:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_redirect off;
    }
  }
}

これでdockerを再度立ち上げ直すと、PCでは https://hoge.127.0.0.1.nip.io で警告なくアクセスできる。

$ docker-compose down
$ docker-compose up -d --build

スマホからアクセスする

調べてみると証明書をスマホにインストールする必要があるらしいが、インストールせずにできた。
まずスマホをPCと同じネットワークにつなぐ。

そしてPCでローカルIPアドレスを確認。

$ ifconfig

192.168.xxx.xxx

私のローカルサーバーはポートが3000なので、
スマホのブラウザでhttp://192.168.xxx.xxx:3000にアクセス出来ることを確認。
IPアドレスやポートが間違っていないのにアクセスできない場合は、接続しているネットワークが異なる可能性がある。

アクセスできたら、スマホのブラウザでhttps://hoge.192.168.xxx.xxx.nip.ioにアクセスすると、
警告なくスマホでもhttpsでローカルサーバーにアクセスできるはず。