以前、以下の記事で、ESP32内にWebSocketサーバを立ち上げました。
MMDダンスをM5Core2のディスプレイに表示する
しかしながら、ESP32内に立ち上げられるWebSocketサーバはHTTP接続のため、HTTPSで立ち上げたWebページのJavascriptからは「Mixed Content」となって接続できませんでした。
そこで、HTTP接続のWebSocketをHTTPSで接続できるようにするReverse Proxyサーバを立ち上げる手順を示しておきます。
こちらのページの設定を借用いたしました。
Nginxのインストール
Reverse Proxyサーバは、Nginxで実現します。インストールされていな場合は、インストールしておきます。以下は、Ubuntuの場合です。
後者は、PC再起動時にも自動起動するためのものです。
# apt-get install nginx
# systemctl enable nginx.service
SSL証明書を取得します。Let’s Encryptを使うのが手っ取り早いでしょう。
（オレオレ証明書でも大丈夫な気がしますが、試していません）
いろんなサイトで紹介されているので、ここでは説明を省きます。
取得したSSL証明書のファイルは3つあるかと思います。
・SSL証明書(ファイル名例：cert.pem)
・SSL中間証明書(ファイル名例：chain.pem)
・秘密鍵(ファイル名例：privkey.pem)
SSL証明書とSSL中間証明書を結合します。例えば、ファイル名「cert_chain.pem」とします。
-----BEGIN CERTIFICATE-----
SSL証明書
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
SSL中間証明書
-----END CERTIFICATE-----
次に、/etc/nginx/cert/ に、cert_chain.pemとprivkey.pemを配置します。
そして、 /etc/nginx/site-enabled/default の最後に以下を追加します。
# websocket proxy
server {
# general server parameters
listen 50081;
server_name 【SSL証明書作成時に入力したドメイン名】;
# SSL configuration
ssl on;
ssl_certificate /etc/nginx/cert/cert_chain.pem;
ssl_certificate_key /etc/nginx/cert/privkey.pem;
ssl_session_cache builtin:1000 shared:SSL:10m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
ssl_prefer_server_ciphers on;
location /m5core2/ {
# websocket upgrade tunnel configuration
proxy_pass http://【転送先のIPアドレス】:81/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
nginxを再起動します。
# /etc/init.d/nginx restart
これで、Web Proxyサーバが立ち上がり、listenで指定したポート番号(50081)で待ちうけ、proxy_passで指定したURL(http://【転送先のIPアドレス】:81】)に転送されるようになります。
location を /m5core2 としていますので、WebSocketサーバの接続先は以下のようになります。
wss://【NginxサーバのIPアドレス】:50081/m5core2
複数の転送先やポートを指定したい場合は、locationの名前を変えて複数指定してください。
参考
以上