AWS Cloud9上でwebpack-dev-serverでデバッグしようとするとInvalid Host header

同じことに２回もハマってしまったので、備忘録的に残しておく。。。

状況

1. AWS Cloud9上でvue-cliでwebpackプロジェクトを構築
2. npm installしたあと、npm run devでwebpack-dev-serverを立ち上げる
3. Cloud9のPreviewメニューから"Preview running application"
4. ブラウザ上に"Invalid Host header"と表示されてデバッグできない

原因

webpack-dev-serverではwebpackコンフィグのdev:hostに書かれているホスト名と実際にアクセスされたホスト名の一致を確認している。

Cloud9の環境下では、その配下のEC2としては'localhost:8080'で上がっており、それに対してVFSのドメイン名(${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com)でアクセスする仕組みであるため、両者が一致せずエラーと判断される。

対処

公式ドキュメントに書いてある通り、

--public: overrides the host and port used in --inline mode for the client (useful for a VM or Docker).

とのことなので、package.jsonのdevコマンドに対して、

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --public ${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com",

というように、--public以降を追記してあげれば解決。
ちなみに、Cloud9のIDはデフォルトでC9_PIDという環境変数に設定されているので、それを使えばOK.

やらない方がいいこと

単に"Invalid Host header"を解消するためには、config側でdisableHostCheck: Trueを設定せよという記述をネット上で見かけるが、Cloud9 + webpack-dev-serverの環境下ではやらない方が良い。

確かに"Invalid Host header"自体は解消されるが、ホットリロード用のwebsocketの向き先が、'http://localhost:8080/sockjs-node/info' のようにlocalhostを向いてしまうため、VFS経由でホットリロードが効かなくなってしまう。

前述の--publicを使う方法がおすすめ。

追記：vue-cli3を使う場合の注意点

vue-cli3から直接webpack-dev-serverでは無くvue-cli-serviceを経由する方式になりましたね。

上手くいかない方法

"serve": "vue-cli-service serve --public ${C9_PID}.vfs.cloud9.${リージョン}.amazonaws.com",

公式ガイドにも載っているオプションなので上手く行くかと思ったのですが何故か上手くいかず。。理由までは追えていないです。誰か教えてください。

上手くいく方法

こちらに記載の通り、プロジェクトルートにvue.config.jsを作成して、

vue.config.js

module.exports = {
    devServer:{
        public: process.env["C9_PID"] + ".vfs.cloud9.${リージョン名}.amazonaws.com"
    }
};

と設定して解決。