Dockerコンテナ内で動作するReactアプリケーション(Create React Appにて作成)を、VSCodeとDebugger for Chrome拡張を利用してデバッグをしたいとトライしています。
1. 試したこと
- Dockerを利用せず、ホストマシン(Mac)上でアプリケーションのデバッグをしてみました。公式推奨の内容で
launch.json
を用意しましたが、この場合はVSCode上で設定したブレークポイントによる停止など、期待した動作をしました。 - Dockerコンテナ内で動作するアプリケーションにおいても同様に
launch.json
を用意し、デバッグを試みたのですがVSCode上で設定したブレークポイントでは停止しませんでした。
逆にChromeの開発ツール上でlocalhostに紐づいたコードにブレークポイントを設定、ページ更新すると停止した後にVSCode上で該当するファイル・コードがハイライトされます。
1.2 launch.jsonの内容
ホスト環境で実行した際は、公式に従い以下のような内容で設定し期待したデバッグ操作ができました。
Docker環境で作成したアプリケーションでは公式推奨の内容から、sourceMapPathOverrides
をさまざま編集してみたのですが、いずれもブレークポイントで停止させることができませんでした。
json
1{ 2 "version": "0.2.0", 3 "configurations": [ 4 { 5 "name": "Chrome", 6 "type": "chrome", 7 "request": "launch", 8 "url": "http://localhost:3000", 9 "webRoot": "${workspaceFolder}/src", 10 "sourceMapPathOverrides": { 11 "webpack:///src/*": "${webRoot}/*" 12 } 13 } 14 ] 15}
2. 環境など
■ ホスト・Docker共通
- MacOS: Big Sur v11.2.3
- VSCode: v1.56.2
- Node.js: v14.17.0 (anyenv経由のnodenvで管理しています)
- React.js: v17.0.2
- Debugger for Chrome: v4.12.12
■ Docker
- Docker for Mac: v3.3.3
- Docker Image: node:14.17-alpine
2.1 アプリケーションのディレクトリ構成
基本的にはCreate React Appでアプリケーションを作成した状態そのままです。
回答に必要な情報で不足等ございましたらコメントいただけますと幸いです。
何卒よろしくお願い致します。
あなたの回答
tips
プレビュー