VSCodeのStable版でRemote Developmentのプレビュー版が使えるようになったので試してみました。とりあえずDockerコンテナ内のNode.jsでブレークポイントを貼ってデバッグしてステップ実行したりするところを試しました。
基本的には下記のマニュアルどおりにやればいいのですがちょこちょこつまづいたり冗長な部分もあるのでとりあえず最小で試すところを書いてみます。
Visual Studio Code Remote Development
まずはRemove Developmentの拡張機能をインストールします。これをインストールするとSSH、コンテナ、WSL用の拡張機能も同時にインストールされます。
下記がコンテナの場合のマニュアルです。
Developing inside a Container using Visual Studio Code Remote Development
ここに書かれているように、試す用のGitHubリポジトリがいくつか用意されています。Visual Studio Code用の設定や、Remote Development用の設定も含まれているため簡単に試すことができます。今回はこれを使って試していきます。Node.js用のvscode-remote-try-nodeというリポジトリをcloneしてきます。
ただ、2019/6/6現在Dockerイメージ作成でエラーになって失敗するようですので、.devcontainer/Dockerfileのベースイメージだけnode:10
から下記に変更して最新のものがインストールされるようにしておきます。
FROM node
まずは普通にcloneしてきたフォルダをVSCodeで開きます。次に、下記画像のようにステータスバーの一番左にRemote Development用のメニューが追加されていますのでここでRemote-Containers: Open Folder in Container...
を選択すると初回のみDockerイメージがビルドされ、そのイメージのコンテナ内としてVSCodeが開きなおされます。(ちなみにdocker-compose.ymlがあればそちらからの起動を選択したりもできるみたいです)
準備はできたのでデバッグしてみます。まずはブラウザでページを開いた時の処理あたりにブレークポイントを貼ってみます。
左のメニューから虫のようなボタンを押してデバッグメニューを開きます。
緑色の実行ボタンを押すとデバッグが始まります。開始したら http://localhost:3000
にアクセスするとページ表示が始まり、先程のブレークポイントのところで停止します。ここでresやreqの変数などを見ることができたりします。おわったらVSCodeの上部に停止ボタンが出ているので止めます。
これで最小の確認は完了です。
おまけとしてTypeScriptの場合ですが、tsconfig.jsonでsourceMap
をtrue
にします。あとはts-nodeで実行するか、もしくはビルド用のタスクを作ってlaunch.jsonのpreLaunchTask
にそのタスクを指定すれば同様に試すことができます。
この様な感じでDockerコンテナ内のシステムを使って動かすことができました。やはりデバッグやテスト実行が思いつく限り一番有用な気がしますが、他にも色々と便利な使い方はできそうな気がします。
個人的にはいろんなコンテナの処理を実行したいな、という場合もある気がするので中で起動するのではなくて一部だけ中で実行する、のような連携がもっと簡単にできればいいなぁと思いましたが、とりあえずPreview版ですので今後にも色々期待したいと思います。
PHPも下記で試してみました。
VSCodeのRemote DevelopmentでDocker内のPHPでデバッグしてみた
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント