vscode の docker 内のvue アプリケーションに localhost:8080 でアクセスできない

発生した問題

npm run dev で立ち上げた vue アプリケーションにアクセスできない。

前提条件

• vscode の devcontainer で立てたdocker 環境を使用
• vue 開発環境の各バージョンは以下の通り。

# vue --version
@vue/cli 4.3.1
# npm --version
6.13.4

発生手順

1. 以下のコマンドで vue + webpack のテンプレを作成

vue init webpack test 1. 以下のコマンドで環境を立ち上げる

npm run dev

問題

host 側の windows PC 側から google chrome で http://localhost:8080 にアクセスしてもページが表示されない

解決策

以下のように host IPを変更する。 ./config/index.js

    host: '0.0.0.0', // can be overwritten by process.env.HOST

問題考察

docker コンテナでexpose しているポートフォワーディング元が 127.0.0.1:8080 になっている。 (docker コマンドで立てた場合、0.0.0.0:8080 となっている) これにより、127.0.0.1以外のIPからの要求はdockerコンテナ内で拾えないのではないか、と思う。

[追記 2020/04/13]

予想通り、vscode のdevcontainerの設定がまずかったみたい。

.devcontainer.json

  //"appPort": [8080]
  "forwardPorts": [8080]