vscode devcontainer で webpack-dev-server 実行時に、コンテナ側とホスト側でポートがズレてしまうことに付随する不具合 #57
Description
発生事象
vscode devcontainer で webpack-dev-server 実行時に、コンテナ側とホスト側でポートがズレてしまう。
この事象に付随する不具合が発生している。
再現用ブランチ：
https://github.com/nimowagukari/frontend-tutorial/tree/bug-reproduction/cant-port-forward
１，vscode devcontainer で webpack-dev-server 実行時に、コンテナ側とホスト側でポートがズレる
以前まではズレなかったが、急にズレるようになった
rebuild container 実行後に直ることが極稀にあるが、再現しない
２，.devcontainer.json の forwardPorts でポート転送設定をしても webpack-dev-server で使われない
３，コンテナ側で利用するポートを指定すると、webpack-dev-server が立ち上がらない
コンテナ内では該当ポートは使われていない
ホスト側では使われているように見える
４，ポートがズレる前提で設定すると、launch.json の「Launch Chrome」でのデバッグ時に sourcemap にアクセスできない
http://localhost:8081/js/reversi.js のソース マップを読み取れませんでした: Unexpected 503 response from http://localhost:8081/js/reversi.js.map: connect ECONNREFUSED 127.0.0.1:8081
上記エラーメッセージ内のリンクをクリックすると、
http://localhost:8082/js/reversi.js にアクセスされる
見かけ上の URL と実際の URL がズレている
正しい URL ではソースマップが見れる
解決したいこと
vscode で sourcemap を正しく読み込める状態にしたい
具体的には下記を実現したい。
- 「実行とデバッグ」画面の「読み込み済みのスクリプト」欄に、sourcemap 経由で読み込まれたビルド元 javascript ファイルが見える
- 上記画面にて、ブレイクポイントの追加などのデバッグ操作が実施可能
アプローチは下記の２パターン？
・ポートがずれる事象を解消する
・ポートがずれる前提で sourcemap が見れるよう、各設定を修正する
環境情報
windows
C:\Users\nimow>systeminfo
ホスト名: DELL-NOTE
OS 名: Microsoft Windows 11 Home
OS バージョン: 10.0.22623 N/A ビルド 22623
OS 製造元: Microsoft Corporation
OS 構成: スタンドアロン ワークステーション
OS ビルドの種類: Multiprocessor Free
登録されている所有者: **********
登録されている組織: N/A
プロダクト ID: 00325-96515-69868-AAOEM
最初のインストール日付: 2022/06/13, 20:56:24
システム起動時間: 2023/04/08, 21:39:42
システム製造元: Dell Inc.
システム モデル: Inspiron 3576
システムの種類: x64-based PC
プロセッサ: 1 プロセッサインストール済みです。
[01]: Intel64 Family 6 Model 142 Stepping 10 GenuineIntel ~1600 Mhz
BIOS バージョン: Dell Inc. 1.16.0, 2021/12/16
Windows ディレクトリ: C:\WINDOWS
システム ディレクトリ: C:\WINDOWS\system32
起動デバイス: \Device\HarddiskVolume1
システム ロケール: ja;日本語
入力ロケール: ja;日本語
タイム ゾーン: (UTC+09:00) 大阪、札幌、東京
物理メモリの合計: 8,057 MB
利用できる物理メモリ: 1,012 MB
仮想メモリ: 最大サイズ: 17,629 MB
仮想メモリ: 利用可能: 3,984 MB
仮想メモリ: 使用中: 13,645 MB
ページ ファイルの場所: C:\pagefile.sys
ドメイン: WORKGROUP
ログオン サーバー: \\DELL-NOTE
ホットフィックス: 6 ホットフィックスがインストールされています。
[01]: KB5022497
[02]: KB5007297
[03]: KB5012170
[04]: KB5018863
[05]: KB5022358
[06]: KB5022610
ネットワーク カード: 3 NIC(s) インストール済みです。
[01]: Realtek PCIe FE Family Controller
接続名: イーサネット
状態: メディアは接続されていません
[02]: Qualcomm QCA9377 802.11ac Wireless Adapter
接続名: Wi-Fi
DHCP が有効: はい
DHCP サーバー: 192.168.10.1
IP アドレス
[01]: 192.168.10.56
[02]: fe80::f830:1aa8:968c:ca65
[03]: 2400:4052:de1:3700:fde1:813b:2e9d:74dd
[04]: 2400:4052:de1:3700:f1ee:a1db:fed7:8e51
[03]: Bluetooth Device (Personal Area Network)
接続名: Bluetooth ネットワーク接続 3
状態: メディアは接続されていません
Hyper-V の要件: ハイパーバイザーが検出されました。Hyper-V に必要な機能は表示されません。
C:\Users\nimow>
wsl2, docker
# PowerShell
PS C:\Users\nimow> wsl --version
WSL バージョン: 1.2.0.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22623.1245
PS C:\Users\nimow> wsl -l -v
NAME STATE VERSION
* Ubuntu Running 2
docker-desktop-data Running 2
docker-desktop Running 2
PS C:\Users\nimow>
# wsl2(ubuntu)
root@dell-note:~# uname -a
Linux dell-note 5.15.90.1-microsoft-standard-WSL2 #1 SMP Fri Jan 27 02:56:13 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux
root@dell-note:~# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy
root@dell-note:~#
root@dell-note:~# docker info
Client:
Context: default
Debug Mode: false
Plugins:
buildx: Docker Buildx (Docker Inc., v0.10.0)
compose: Docker Compose (Docker Inc., v2.15.1)
dev: Docker Dev Environments (Docker Inc., v0.0.5)
extension: Manages Docker extensions (Docker Inc., v0.2.17)
sbom: View the packaged-based Software Bill Of Materials (SBOM) for an image (Anchore Inc., 0.6.0)
scan: Docker Scan (Docker Inc., v0.23.0)
Server:
Containers: 3
Running: 1
Paused: 0
Stopped: 2
Images: 19
Server Version: 20.10.22
Storage Driver: overlay2
Backing Filesystem: extfs
Supports d_type: true
Native Overlay Diff: true
userxattr: false
Logging Driver: json-file
Cgroup Driver: cgroupfs
Cgroup Version: 2
Plugins:
Volume: local
Network: bridge host ipvlan macvlan null overlay
Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
Swarm: inactive
Runtimes: io.containerd.runc.v2 io.containerd.runtime.v1.linux runc
Default Runtime: runc
Init Binary: docker-init
containerd version: 9ba4b250366a5ddde94bb7c9d1def331423aa323
runc version: v1.1.4-0-g5fd4c4d
init version: de40ad0
Security Options:
seccomp
Profile: default
cgroupns
Kernel Version: 5.15.90.1-microsoft-standard-WSL2
Operating System: Docker Desktop
OSType: linux
Architecture: x86_64
CPUs: 8
Total Memory: 3.762GiB
Name: docker-desktop
ID: 3A7I:IP3D:3B4I:XM5Z:3KAC:4J2L:VMG7:5V6E:VU72:SKCD:IFAW:XHER
Docker Root Dir: /var/lib/docker
Debug Mode: false
HTTP Proxy: http.docker.internal:3128
HTTPS Proxy: http.docker.internal:3128
No Proxy: hubproxy.docker.internal
Registry: https://index.docker.io/v1/
Labels:
Experimental: false
Insecure Registries:
hubproxy.docker.internal:5000
127.0.0.0/8
Live Restore Enabled: false
root@dell-note:~#
vscode
javascript
node ➜ /workspaces/frontend-tutorial (bug-reproduction/cant-port-forward) $ npm version
{
npm: '8.19.3',
node: '18.13.0',
v8: '10.2.154.23-node.21',
uv: '1.44.2',
zlib: '1.2.13',
brotli: '1.0.9',
ares: '1.18.1',
modules: '108',
nghttp2: '1.51.0',
napi: '8',
llhttp: '6.0.10',
uvwasi: '0.0.13',
openssl: '3.0.7+quic',
cldr: '42.0',
icu: '72.1',
tz: '2022f',
unicode: '15.0',
ngtcp2: '0.8.1',
nghttp3: '0.7.0'
}
node ➜ /workspaces/frontend-tutorial (bug-reproduction/cant-port-forward) $