VSCode Dev Containersでこれからの開発環境構築｜エンジニアBLOG

今回は、開発環境の構築にとても便利な、Dev Containersというものをご紹介します。

プログラミング言語やフロントエンド/バックエンドに関わらず、
開発でVSCodeを利用している方にオススメの方法になります。
今までDockerを使ったことがなかった方も、あまり知識が必要なく使えるはずなのでオススメです！

どういうものなのか少し解説したあと、記事の最後の方には実際にやってみるパートもありますので、
どうか最後までお付き合いください。

（※Docker自体についての説明は省略しています、ご了承ください）

Dev Containers とは！

Dev Containersは、Visual Studio Code（以下、VSCode）の拡張機能になります。
これを使うと、Dockerコンテナ上でVSCodeを開く ことが出来ます。

VSCodeの公式が開発・メンテナンスしている拡張機能で、ここ１年でコミュニティもだいぶ盛り上がってきているようです。

Dev Containersが解決してくれること

現在弊社の開発案件では、環境構築にDockerを多く使用しています。
Dockerを使えば環境をチームで簡単に共有できたり、環境の構築や管理がとても楽になりますよね。

例えば、Node.jsを使ったプロジェクトAの開発環境をDockerを使って構築した場合の、
以下の図を見てください。

まず注目してほしいのは、VSCodeはホストOS上に立っていることです。
拡張機能の中には静的解析、コードの整形に使われるものもあります。
そしてここには、プロジェクトごとのルールが関わってきます。

例えば、Node.jsを使ったプロジェクトAとBを兼任している場合で考えます。
プロジェクトAではメジャーであるESLint/Prettierを使って静的解析やコード整形を使っており、
プロジェクトBでは比較的新しいRomeを使ってみよう、となりました。

この場合、ホストOSのVSCodeにはESLint、Prettier、Romeと3つの拡張機能がインストールされることになります。
これを繰り返すといつの間にか非常にたくさんの拡張機能がインストールされていくことになります。

それから、図のVSCodeの下に伸びている矢印を見てください。
コード補完や整形などには、その言語の実行環境が必要な場合が多くあります。
つまり、ホストOSにもNode.jsが必要です。

そうなると、Docker内に用意したものとのバージョンの不一致が起こったり、
違う案件の開発を行うときにはホストOS上のNode.jsのバージョンを切り替えたりしなくてはいけなかったりするかもしれません。

これらを一挙に解決してくれるのが、Dev Containersです。
Dev Containersを導入した場合、さっきの図は以下のようになります。

これでプロジェクトAとBで開発環境を切り替える際は、VSCodeで開くコンテナを切り替えるだけで良くなります。拡張機能は自動でインストールされ、Node.jsなどミドルウェアもコンテナ内のものを使うことができるため、チーム内で環境を統一することが簡単になります。

実際にやってみよう

では、実際に体験してみましょう。
まずは以下がすべてインストールされているか、確認してください。
（詳しくは、Dev Containersのチュートリアルもご覧ください）

Docker Desktop
VSCode
VSCodeの拡張機能 Dev Containers

今回は私の方でサンプルのプロジェクトを用意したので、下記からクローンしてみてください。
https://github.com/HayatoIida-CS/dev-containers-sample/tree/master

クローンできたら、VSCodeで開きます。
すると、画面右下に以下のリコメンドが出るため「コンテナーで再度開く」をクリックします。

すると、Dev Container上でVSCodeが開き、自動で環境が構築されていきます。

※今回用意したサンプルでは、Vite + React をインストールするようにしているためそこそこサイズがあり、
　環境によってはインストールに時間がかかるかもしれません。

インストールが終わると、また右下にリコメンドが出ると思います。

「ブラウザーで開く」を押すと、ブラウザが開いてVite + Reactの画面が出ることが確認できると思います。
（または、 http://localhost:5174 を開いてみてください）

構築された環境には、既に以下が入っているはずです。
ここまでの準備が、コマンドなしで出来るのは驚きですね！

・VSCode拡張機能
　　- .devcontainer/devcontainer.json の customizations.vscode.extensions で定義されたもの
　　- ESLint / Prettier
　　- CSS Style Lint
　　- スペルチェッカー

・Dockerコンテナ群
　　- .devcontainer/docker-compose.yml で定義
　　- Node.js Development Container Images
　　　　▶ Microsoft公式が用意しているNode.js用Dev Container
　　　　▶ APPコンテナとしての役割も兼ねている
　　- PostgreSQL コンテナ
　　　　▶ DBコンテナ
　　- Adminer コンテナ
　　　　▶ DB管理ツール
　　　　▶ http://localhost:8080/ で開くように設定済み

オプションの Devcontainer Features について

Dev Containerを一から設定する際、追加でインストールする機能を選択することができます。
それが Devcontainer Features です。

中身は単純で、コミュニティが用意したテンプレートを元に自動でミドルウェアやライブラリなどをインストールしてくれるというものです。
用意されている機能一覧：https://containers.dev/features

今回は、json-serverを選んでインストールしてみました。
（devcontainer.json の "features" に記載）

なので、Dev Containerを立ち上げた際にはもうjson-serverが使えるようになっているはずです。
VSCode でターミナルを開き、以下のコマンドを入力してみてください。

json-server --watch db.json

すると、以下のポートからjsonが返ってくることが確認できると思います。
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

ハマりポイント①：ポートフォワーディングについて

Dev Containerを使う際の注意点として、ポートまわりには注意が必要です。
普通にDocker Composeを使うのと違い、devcontainer.json で開けるポートを指定する必要があります。

{
    // ...
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // This can be used to network with other containers or with the host.
    "forwardPorts": [3000, 5173, 5432, 8080],
    // ...
}

サンプルプロジェクトは上記の4つのポートを開けるようにしています。

コンテナ群はすべて同じネットワークに置いているので、あとはDev Containerが繋いでくれるようになっているのだと思われます。

詳しくは下記も合わせてご覧ください。
https://code.visualstudio.com/docs/devcontainers/containers#_forwarding-or-publishing-a-port

ハマりポイント②：Dev Container内からGitを使う

開発がコンテナ内になるため、コミットなどを行う際にコンテナ内からGitの認証を行う必要が出てきます。

HTTPS を使用してクローンし、ホストOS側で認証情報を入力していた場合は、
そのままコンテナ内でも入力した情報が利用されるため、何も考えなくて良いようです。

SSHを使用して接続していた場合は、ホストOS側でSSHエージェントが実行されているかが重要です。
SSHエージェントが動いていれば、Dev Containerが自動でSSH エージェントを転送してくれるため、
コンテナ内でも何も気にせずGitが使えるようでした。

SSHエージェントの実行や設定については、Githubの以下のページが詳しいです。
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

詳しくは下記も合わせてご覧ください。
https://code.visualstudio.com/remote/advancedcontainers/sharing-git-credentials

まとめ

今後、新しいメンバーがアサインされたときの環境構築のコストを減らすため、
積極的にDev Containersを導入していきたいと思います。

まだまだ新しい機能なので日本語のドキュメントが少ないところが玉にキズですが、
公式ドキュメントがしっかりと整備されており、今後もどんどんアップデートされていくと思われます。

今回紹介していない便利な機能もたくさんあるみたいなので、みなさんも是非触ってみてください。