質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

デバッグ

デバッグはプログラムのバグや欠陥を検知し、開発中のバグを取り除く為のプロセスを指します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

2034閲覧

Dockerコンテナ内に作成したReactアプリケーションのデバッグ(VSCode+Chrome)が動作しない

fightTT

総合スコア27

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

デバッグ

デバッグはプログラムのバグや欠陥を検知し、開発中のバグを取り除く為のプロセスを指します。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/06/09 06:26

編集2021/06/09 09:17

Dockerコンテナ内で動作するReactアプリケーション(Create React Appにて作成)を、VSCodeとDebugger for Chrome拡張を利用してデバッグをしたいとトライしています。

1. 試したこと

  1. Dockerを利用せず、ホストマシン(Mac)上でアプリケーションのデバッグをしてみました。公式推奨の内容でlaunch.jsonを用意しましたが、この場合はVSCode上で設定したブレークポイントによる停止など、期待した動作をしました。
  2. 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でアプリケーションを作成した状態そのままです。
イメージ説明

回答に必要な情報で不足等ございましたらコメントいただけますと幸いです。
何卒よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問