Spring Boot + npm + Geb で入力フォームを作ってテストする ( 番外編 )( browser-sync + http-proxy-middleware で https の環境を構築する )
概要
記事一覧はこちらです。
Spring Boot で開発中に https を使用したい場合、keytool コマンドで key-store を作成して application.properties の server.ssl.* に設定する方法がありますが、browser-sync + http-proxy-middleware を使っても https の環境を構築できるのでそのメモ書きです。
browser-sync の https 機能を利用すれば key-store を作成する必要がないのが便利です。
bs-springboot-config.js を変更して https 環境を構築する
Spring Boot + npm + Geb で入力フォームを作ってテストする ( その14 )( browser-sync –> Tomcat 連携してファイル変更時に自動リロードで反映される環境を構築してみる ) で作成した bs-springboot-config.js の設定を変更して https 環境を構築してみます。
bs-springboot-config.js の以下の点を変更します。
var httpProxyMiddleware = require('http-proxy-middleware'); var proxy = httpProxyMiddleware( [ // /css, /js, /vendor と *.html は Tomcat に転送しない "!/css/**/*", "!/js/**/*", "!/vendor/**/*", "!/**/*.html", "/**/*" ], { target: "http://localhost:8080", xfwd: true } ); .......... module.exports = { .......... "serveStatic": [], "https": true, "ghostMode": { "clicks": true, "scroll": true, "location": true, "forms": { "submit": true, "inputs": true, "toggles": true } }, ..........
xfwd: true
を追加します。Tomcat 転送時に X-Forward 系の HTTP Header が付加されるようになります。"https": true
を追加します。
これだけです。尚、"https": true
を設定すると https しか受け付けなくなります。
動作確認してみます。Tomcagt を起動した後、npm run springboot
コマンドを実行します。browser-sync が起動すると https で待ち受けていることが分かります。
IE から https://localhost:9080/inquiry/input/01/ にアクセスすると、自己証明書なので以下の画面が表示されます。「このサイトの閲覧を続行する (推奨されません)。」リンクをクリックします。
入力画面1が表示されます。自己証明書なのでアドレスバーが赤く表示されています。
「次へ」ボタンを押すと入力画面2へ遷移します。リダイレクトが行われていますが、プロトコル(https)やドメイン名(localhost:9080)は引き継がれています。
ちなみに bs-springboot-config.js に xfwd: true
を設定しないと入力画面1→入力画面2へ遷移しようとすると以下のようにプロトコル(https)が引き継がれません。
http を 80番ポートで、https を 443番ポートで待ち受ける環境を構築するには?
browser-sync の設定ファイルを2つ作って、2つ同時に起動すれば構築可能です。
先程の bs-springboot-config.js の設定変更を元に戻してから、以下のように変更します。
module.exports = { .......... "proxy": false, "port": 80, "middleware": false, ..........
"port": 9080
→"port": 80
に変更します。
bs-springboot-config.js をコピーして bs-springboot-https-config.js を作成し、以下の内容に変更します。
var httpProxyMiddleware = require('http-proxy-middleware'); var proxy = httpProxyMiddleware( [ // /css, /js, /vendor と *.html は Tomcat に転送しない "!/css/**/*", "!/js/**/*", "!/vendor/**/*", "!/**/*.html", "/**/*" ], { target: "http://localhost:8080", xfwd: true } ); /* |-------------------------------------------------------------------------- | Browser-sync config file |-------------------------------------------------------------------------- | | For up-to-date information about the options: | http://www.browsersync.io/docs/options/ | | There are more options than you see here, these are just the ones that are | set internally. See the website for more info. | | */ module.exports = { "ui": false, "files": [ "./build/classes/**/*.class", "./build/classes/**/*.html", "./static/**/*", "./src/main/resources/static/**/*" ], "watchEvents": [ "change" ], "watchOptions": { "ignoreInitial": true, "ignorePermissionErrors": true }, "server": { "baseDir": [ "./static", "./src/main/resources/static" ], "middleware": [proxy] }, "proxy": false, "port": 443, "middleware": false, "serveStatic": [], "https": true, "ghostMode": { "clicks": true, "scroll": true, "location": true, "forms": { "submit": true, "inputs": true, "toggles": true } },
xfwd: true
を追加します。"ui": {"port": 3001, "weinre": {"port": 9081}}
→"ui": false
に変更します。ui を起動しないようにします。"port": 9080
→"port": 443
に変更します。"https": true
を追加します。"open": "local"
→"open": false
に変更します。browser-sync 起動時にブラウザを起動しないようにします。
package.json を以下のように変更します。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "run-s clean:static-dir copy:all", "clean:static-dir": "rimraf src/main/resources/static/*", "copy:all": "run-p copy:bootstrap copy:admin-lte copy:font-awesome copy:ionicons", "copy:bootstrap": "cpx node_modules/bootstrap/dist/**/* src/main/resources/static/vendor/bootstrap", "copy:admin-lte": "cpx node_modules/admin-lte/dist/**/* src/main/resources/static/vendor/admin-lte", "copy:font-awesome": "cpx node_modules/font-awesome/{css,fonts}/**/* src/main/resources/static/vendor/font-awesome", "copy:ionicons": "cpx node_modules/ionicons/dist/{css,fonts}/**/* src/main/resources/static/vendor/ionicons", "postcss:watch": "postcss src/main/assets/css/**/* -d src/main/resources/static/css -x .min.css -w --poll", "webpack": "webpack", "webpack:watch": "webpack --watch", "browser-sync": "browser-sync", "browser-sync:start": "browser-sync start --config bs-config.js", "browser-sync:springboot": "browser-sync start --config bs-springboot-config.js", "browser-sync:springboot:https": "browser-sync start --config bs-springboot-https-config.js", "server": "run-p postcss:watch webpack:watch browser-sync:start", "springboot": "run-p postcss:watch webpack:watch browser-sync:springboot browser-sync:springboot:https" },
"browser-sync:springboot:https": "browser-sync start --config bs-springboot-https-config.js"
を追加します。"springboot"
の最後にbrowser-sync:springboot:https
を追加します。
Tomcat を起動します。
コマンドプロンプトを「管理者として実行…」で起動した後、npm run springboot
コマンドを実行します。http で 80番、https で 443番で待ち受けていることが表示されます。
ブラウザを起動して http://localhost/inquiry/input/01/ にアクセスして入力画面1を表示してから、「次へ」ボタンをクリックすると入力画面2が表示されます。URL は http://localhost/inquiry/input/02/ になっています。
https://localhost/inquiry/input/01/ にアクセスして入力画面1を表示してから、「次へ」ボタンをクリックすると入力画面2が表示されます。URL は https://localhost/inquiry/input/02/ になっています。
localhost ではなくドメイン名(www.test.co.jp)にしても問題ないか確認してみます。hosts ファイルに以下の定義を追加します。192.168.56.1 は自分の PC に割り当てられている IPアドレスです。
192.168.56.1 www.test.co.jp
http://www.test.co.jp/inquiry/input/01/ にアクセスして入力画面1を表示してから、「次へ」ボタンをクリックすると入力画面2が表示されます。URL は http://www.test.co.jp/inquiry/input/02/ になっています。
https://www.test.co.jp/inquiry/input/01/ にアクセスして入力画面1を表示してから、「次へ」ボタンをクリックすると入力画面2が表示されます。URL は https://www.test.co.jp/inquiry/input/02/ になっています。