はじめに
フロントエンドはReact系しか触れたことがなかったのですが、Vue.js + Vuex + Nuxt.jsという構成の開発をすることになりました。
本記事ではdocker-composeを利用していることを前提としていますが、ポートさえ空ければdocker-composeを使わない環境でもデバッグできます。
また、本記事はこれをコピペすればできる、というものであり、細かい説明は省かせていただきます。
説明などは参考リンクの記事を見ていただきたいと思います。
Dockerコンテナ側の準備
package.jsonのscriptsに次を追加します。これにより、9229番ポートにデバッガが接続できるようになります。
"debug": "node --inspect-brk=0.0.0.0:9229 node_modules/.bin/nuxt",
ただし、これだけではホスト側からコンテナの9229番ポートは見えないので、docker-compose.yamlに次の設定を追加する必要があります。また、docker-compose upで先程のスクリプトを実行するようにしておきましょう。
version: '3'
services:
nuxt:
build: <Dockerfile>
command: npm run debug
ports:
- 3000:3000
- 9229:9229
environment:
- HOST=0.0.0.0
- PORT=3000
VS code側の準備
VS CodeにChromeデバッガアドオンを入れておきます。
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
VS Codeの「デバッグ」メニューから「構成を追加」をクリックします。
すると、launch.jsonというファイルが開くので、次をコピペ
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client",
"url": "http://lvh.me:3000",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},
{
"type": "node",
"request": "attach",
"name": "ssr",
"port": 9229,
"address": "localhost",
"localRoot": "${workspaceFolder}/frontend",
"remoteRoot": "/app",
"protocol": "inspector"
},
],
"compounds": [
{
"name": "debug-frontend",
"configurations": ["client", "ssr"]
}
]
}
デバッグ
あとは、Dockerコンテナを立ち上げてVS Codeのデバッグメニューからデバッグを開始すればデバッグ可能です。
ただし、Nuxtが立ち上がるまでそこそこ時間がかかりますので、そこは注意です。