当サイトは、アフィリエイト広告を利用しています

【Docker × React】コンテナのReactをVScodeでデバッグする

作成日：2024月02月10日

更新日：2024年02月10日

Dockerコンテナ上に構築したReactプロジェクトの
デバッグをVScodeから行う方法をまとめる。

Dockerコンテナ上にReact実行環境を
構築する方法については下記

でまとめています。

今回はこの環境でVScodeでデバッグをしてみる。
※使うブラウザはGoogle Chrome

VSCodeの設定とデバッグ

VScodeではデバッグする際はデバッグ設定用のファイルである

launch.json

を作る必要がある。

またデバッグ開始前に事前にReactプロジェクトを動かす必要がある
これは

task.json

を使って行う。

流れ的にはデバッグを起動させると
launch.json内からtask.jsonを実行し、Reactプロジェクトを
起動後にアタッチするような感じ。

launch.jsonを作る

VScodeのデバッグの設定ファイルであるlaunch.jsonを作る

launch.jsonは下記をクリックでで作れる

設定は下記を設定する

launch.json


{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "name": "React Debug",
            "url": "http://localhost:3000",
        },
    ]
}

type

デバッグ構成のタイプを設定する
Google Chrome ブラウザでのデバッグなので「chrome」を設定する

request

デバッガに対する要求の種類。ローカルで実行中のアプリケーションをデバッグするので「launch」を設定する

preLaunchTask

デバッグの前に実行されるタスクを指定できる。
ここでは「npm: start」のタスクを指定。
※tasks.jsonのlabelと一致させる必要がある

name

デバッグ構成の名前。

url

アプリケーションの起動先URL

tasks.jsonを作る

launch.jsonのpreLaunchTaskで設定したタスクを作る

task.jsonはF1でコマンドパレットを開いて「タスク:タスクの構成」
で作れる。

「タスク:タスクの構成」を選択

「npm:start」を選択する

自動でtask.jsonが作成されるので
下記に書き換える

tasks.json


{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "label": "npm: start",
            "detail": "react-scripts start",
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "^Compiling...",
                    "endsPattern": "^Compiled successfully."
                }
            }
        }
    ]
}

type

タスクの種類。ここではnpmを指定

script

実行されるnpmスクリプト
ここではstartを指定。 ※package.jsonの"scripts"で設定しているものを
設定する

label

人が読み取り可能なタスクのラベル
launch.jsonではこの値を見ている。

detail

タスクに関する追加の詳細情報

isBackground

タスクがバックグラウンドで実行されるかどうかを設定。
trueの場合タスクがバックグラウンドで実行され、
VSCodeでの作業を妨げずに開発サーバーが実行される

problemMatcher

タスクの出力から問題を検出し、表示するための正規表現パターンを指定する
が、設定がよくわからない。

ただ何も書かないとデバッグ実行時にVScodeに怒られるので
一旦、正規表現パターンを空にしておく。

つまり、実際には何も問題を検出しない。。。

background

「isBackground」が「true」に設定されている場合、VScodeはタスクがいつ終了したのかを知るために
タスクの出力から特定のパターンを検出する必要がある
※要はいつタスクがいつ始まって、いつ終わったのか知りたい。

このパターンはbackgroundプロパティで設定する。
「Compiling...」というメッセージが出力されたときにタスクが開始され、
「Compiled successfully.」というメッセージが出力されたときにタスクが
終了したとみなされるように設定する。

最終的には下記のような構成になる。

構成


.
├── .vscode
│   ├── launch.json
│   └── tasks.json
├── README.md
├── docker
│   ├── Dockerfile
│   ├── docker-compose.yml
│   └── vscode_ex_install.sh
├── package-lock.json
├── package.json
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json