【DevContainer入門①】チュートリアルをやってみた

気になっていたdevcontainerのチュートリアルをやってみた記録

実施するチュートリアル

Dockerのインストールはスキップ

1. devcontainer拡張機能をインストトール

• チュートリアルの内容に従ってインストール

2. MSが提供しているサンプルdevcontainer環境を開く

• VSCodeのウィンドウが開きなおされてコンテナの立ち上げが行われる

• しばらくまつ

3. ターミナルを立ち上げる

1. ctrl + shift + @を押すとターミナルが起動する

2. コンテナに接続された状態でターミナルが起動する

3. 以下バージョン確認コマンドを打つとコンテナ内にインストールされたnodeとnpmのバージョンが確認できる

node --version; npm --version

4. nodeアプリケーションを起動する

1. F5を押すとexpressサーバがコンテナ内で起動する

2. ブラウザからhttp://localhost:3000に接続するとHello remote world!と表示されているのが確認できる

5. デバッグしてみる

1. server.jsを以下のように書き換える

- res.send('Hello remote world!\n');
+ res.send('<h1>Hello remote world!</h1>\n');

1. ctrl + shift + F5を押しnodeアプリケーションを再起動する

2. VSCode上でserver.jsの17行目にブレークポイントを張る

3. ブラウザからhttp://localhost:3000にアクセスする

4. VSCode上でステップ実行ができることを確認する

所感

ものすごい簡単に環境立ち上げからデバッグまでができた。
実際にはDockerfileを書きつつ独自のコンテナをdevcontainerとして立ち上げて
開発するがチュートリアルとしてそこを省いて触ってみた感じはとてもお手軽。

この次は、独自のコンテナを作成してそれをdevcontainerとして使用する方法を試してみようと思います。

この記事がdevcontainer入門へのきっかけになれば幸いです。