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 で入力フォームを作ってテストする ( その１４ )( 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/ にアクセスすると、自己証明書なので以下の画面が表示されます。「このサイトの閲覧を続行する (推奨されません)。」リンクをクリックします。

入力画面１が表示されます。自己証明書なのでアドレスバーが赤く表示されています。

「次へ」ボタンを押すと入力画面２へ遷移します。リダイレクトが行われていますが、プロトコル（https）やドメイン名（localhost:9080）は引き継がれています。

ちなみに bs-springboot-config.js に xfwd: true を設定しないと入力画面１→入力画面２へ遷移しようとすると以下のようにプロトコル（https）が引き継がれません。

http を 80番ポートで、https を 443番ポートで待ち受ける環境を構築するには？

browser-sync の設定ファイルを２つ作って、２つ同時に起動すれば構築可能です。

先程の 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/ にアクセスして入力画面１を表示してから、「次へ」ボタンをクリックすると入力画面２が表示されます。URL は http://localhost/inquiry/input/02/ になっています。

https://localhost/inquiry/input/01/ にアクセスして入力画面１を表示してから、「次へ」ボタンをクリックすると入力画面２が表示されます。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/ にアクセスして入力画面１を表示してから、「次へ」ボタンをクリックすると入力画面２が表示されます。URL は http://www.test.co.jp/inquiry/input/02/ になっています。

https://www.test.co.jp/inquiry/input/01/ にアクセスして入力画面１を表示してから、「次へ」ボタンをクリックすると入力画面２が表示されます。URL は https://www.test.co.jp/inquiry/input/02/ になっています。