質問
Akio Hashimoto · 2020年10月19日

httpsから%RESTの利用が上手くいかない

Vue.jsのホットリロードを使った環境においてWebアプリケーションを開発しています。Webアプリケーションから開発環境と同じローカルPCにあるDocker上のIRISへ%RESTを使用しRESTfulAPI通信をしていますが、Webアプリケーションをhttpsで利用した場合は、httpsからhttpへはAPI通信ができないので、間にプロキシサーバーを立ててリダイレクトしないといけないと思います。しかし上手くいきません。

○ npm run serve で起動したWebアプリ http -> httpでIRISの%RESTを呼び出せる。

× npm run serve -- --https で起動した場合  https -> http は呼び出しできない。

  https -> プロキシサーバ(https-httpへリダイレクト)-> httpでIRISの%RESTが呼びさせるはず。

環境

Webアプリ:Vue.js 例)https://localhost:3014/

IRIS:Docker上のコンテナで稼働 例)http://localhost:9091 -> 57772

やってみた事

1. Docker上にnginxのコンテナを作成。openssl にてSAN付きオレオレ証明書の作成

2. リダイレクトの定義を作成

現象

スマホからもPCからも反応が無い。おそらく追加したnginxのhttpsアクセス自体が拒否されているように思われる。

直接「https://localhost/」としてみたら、PCのChromeでは「NET::ERR_CERT_INVALID」となった。

httpsでシステムを動かさなければいけない状況は良くあると思いますが、このような環境の場合、どのような構築がベストでしょうか?「これで動いた」という方法があれば教えて下さい。

00
3 0 7 121
Log in or sign up to continue

返信

橋本さん
ご質問ありがとうございます。

nginxがプロキシサーバとして、443番ポートで受け付け、受け付けたリクエストをnode.js ( 3014ポート )と IRISコンテナ( 9091 ポート )に転送されているということでしょうか。

スマホやPCから反応がないとのことですが、nginxのアクセスログにはログが表示されてますでしょうか?
エラーログは何か表示されてないでしょうか?

皆本様

返信ありがとうございます。3014からhttpsへAPIを発行して、9091へ転送するという方法です。

Nginxのログには「SSL: error:14094416」のエラーが出ていますので、SSL認証ファイルに問題があるようですので、見直してみます。

他の手段でも構わないので、「これなら出来たよ」という方法があれば教えて頂きたいです。

岩本様

返信ありがとうございます。

confファイルも正しいのか不安でしたので、参考にさせて頂きます。ちなみに私の方のconfファイルは以下のようになっています。

server {

listen 443 ssl default_server;

ssl_certificate /etc/nginx/ssl/server.crt;

ssl_certificate_key /etc/nginx/ssl/server.key;

location / {

proxy_pass http://192.168.10.100:9091;

proxy_redirect http:// https://;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

}

まずは、SSL証明書の確認が必要なようです。

自己証明書を作り直したら上手く繋がるようになりました。

ただ、iOSではまだ繋がりません。自己証明書等の作り方にまだ問題があるようです。

上手くいくようになったら、ご報告します。

ご丁寧にありがとうございます。

試しに、ご紹介した方法でnginxに自己証明書を登録してiPhoneのSafariから管理ポータルにhttpsでアクセスしてみたら、セキュリティ警告の後、延々とリロードを繰り返すだけで、先に進みませんでした。自前の認証局を立てる方法(./setup.sh実行)で作成したら表示されました。何か関係ありそうですか?

ところで、iPhoneって一度受け入れた「オレオレ」を削除する方法が無いんですね...。ネットを見ていると、昔はできたけれどとか、ネットワーク設定をリセットしましょう、しか見当たりませんでした。