VSCodeで動かす超速開発環境構築「Dev Conatainers」を試してみました。

こんにちは。
エス・エー・エス株式会社の海田です。

11月になりまして、だいぶ寒くなってきましたね。
今年1年は体調を崩す時期が多く、私含め家族も、体は元気なのですが頭痛や咳が続いたりして病院にお世話になる日も多かったです。これからますます寒くなるので、どうぞご自愛ください。

さて、最近ちょっと真面目に？アプリケーション作りたいな～という好奇心がふつふつと湧いてきまして、どんな言語でやろうかとかいろいろ考えているところです。

私はクラウドインフラエンジニアなので、AWSでサーバをポンって作って環境作成～とかはそれほど苦ではないのですが、開発環境（いわゆる開発エディタ的なもの）にはあまり明るくなく、VSCodeについても全然詳しくありません。

なんとなくで使えているからまあいいのかな～という感じなのですが、先程の好奇心も相まって、VSCodeをいろいろ試してみようと（ちょっとだけ）思いました。

調べていくうちに、VSCodeで手っ取り早く開発環境を作る方法として「Dev Containers」なるものがあることを知りました。

今日はそのお話をしたいと思います。

1.「Dev Containers」とは？

「Dev Containers」とはその名の通り、開発用（Dev)のコンテナ（Container）を簡単に用意できるサービスのことです。コンテナって何？って方は、私の昔の記事をご参照下さい。「Dev Containers」はVSCodeの拡張機能として追加できます。

【Part1】ぜんぜんわからなかったECSについてまとめてみました（概念と実際の画面で見ていくAWS ECS解説）｜こぐま

はじめにこんにちはこぐまです。本日はAWSの記事です。といっても・・この記事はAWSの前提知識なしで読めます。ぜひ、「クラウド」や「IT」を全く知らなくても、気軽に読める内容を目指していますので、読んでいただけたら嬉しいです！これからしばらく、AWSの「ECS」というサービスについて、自分が学んだことを備忘録としてまとめていきたいと思います。 AWSにはいろんなサービスがあるのですが、Noteで連載していく記事としてなぜまず最初にこのテーマを選んだかというと、自分にはめっちゃむずかったから

https://note.com/koguma_gunso/n/n31c3eca3ff23?magazine_key=m692792744661

2.何がメリットなのか？

コンテナで開発環境を構築できるメリットはたくさんありますが、個人的には3つあるかと思っています。

①必要な環境構築があっという間にできる

例えば、「Node.jsのV18とテキスト編集用にvimだけ入った環境がすぐに欲しい！」と思った時、プルダウンで選択すると（私のノートPC環境では）数十秒でそれらが入ったコンテナ環境が出来上がって即利用できます。あとは必要な資産をWindows側からコピーすればすぐに開発に取り掛かれます。

②PC環境を汚さない。

①のようなコンテナがたくさんあっても環境は個々のコンテナごとに独立するため、コンテナごとの設定値やパラメータもすべて、そのコンテナの中に閉じた話となります。PC環境全体を汚さずに利用できることはとても大きなメリットかなと思います。

③すべてがDockerコマンドで管理できる。

個人的にはこちらが大きいです。VSCode上（WSL2環境）のターミナル上でDockerコマンドで操作できます。不要なコンテナを落としたり、Windows環境からの資産コピーをしたり、コンテナのイメージの作成も簡単にできます。

メリットデメリットについて、こちらの方の記事がわかりやすくとても参考になるかと思います！

Devcontainer ってなに？実際につかってみる

VSCodeの開発環境構築支援ツール VSCodeが開発環境として利用するDockerコンテナを作成してくれるそのDockerコンテナ上には開発に必要なもの(db, lib, runtime..)も詰め込んでくれる Dockerコンテナ内に開発で必要なものをすべて閉じ込める ⇒ ローカル環境を汚染しないコマンドで構築終わり ⇒ 開発環境の構築が楽になる構築時のヒューマンエラー発生率低減 ⇒ システムのコード化 NodeJSの環境をDevcontainerを利用して構築します。 Docker,VSCo

https://zenn.dev/conecone/articles/ab8d71d81e64bb

3.WindowsPCのVSCodeで「Dev Containers」を動かすために必要なもの

いくつかやり方はあるのかもしれませんが、私は以下が揃っていればできました。

①WindowsPC（これがないと始まらない）
②VSCode（統合開発環境、これがベース）
③WSL2（WindowsPC上でLinuxを動かすためのパッケージ）
④Dockerエンジン（WSL上でそれぞれのコンテナを操作するために必要）
⑤Dev Containers拡張機能（DevContainer機能を利用するために必要）

なお、Macでは調べていないのでわかりません。。手順について簡単に記載していきますが、
WSL2のインストールまで終わっている方は、手順の後半戦からで構いません。

4.手順について（前半戦）

①WindowsPCを用意します。

これは大丈夫ですね。なおエディションはProでもHomeでも動くようです。

②VSCodeをインストールします。

以下の公式サイトにアクセスします。
https://azure.microsoft.com/ja-jp/products/visual-studio-code

「Visual Studio Codeをダウンロードする」からWindows版を選んでインストールすれば大丈夫です。

③WSL2をインストール、稼働させます。

https://learn.microsoft.com/ja-jp/windows/wsl/about

上記リンクをお読みいただき、設定してください。基本的には、「wsl --install」でいいのかなと思います。WSL2昔は結構インストールが複雑だった気もしたのですが、今は1コマンドでできるんですね。ディストリビューションは勝手に選ばれるみたいですが、Ubuntuであれば問題ないと思います。

インストールが終わったら、検索から「Ubuntu」もしくは「WSL（コマンドの実行）」を選べばLinuxが立ち上がります。初回はrootユーザのパスワード等の入力を求められます。

WSLで立ち上げたLinux上で「code .」と押せばVSCodeが立ち上がりますし、VSCode側からでも「WSLに接続」を押すことでWSLに接続できます。

WSLに接続している（つまりWindowsPC内のLinuxに接続している）時は、左下に緑色で「WSL:Ubuntu」と出るようです。

5.手順について（後半戦）

④Dockerエンジンのインストール

VSCodeの公式だと、「Docker Desktop for Windows」をインストールして利用する方法が書かれていますが、今回はWSL上のUbuntu上に直接Dockerをインストールしました。（Docker Desktop For Windowsは不要です）これが結構ハマりまして・・。いろんな方が仰っている通り、公式の通りにやるとうまくいきません。かなり時間がかかりました。。

この辺の苦悩をまとめてくださった方がたくさんいらっしゃいます。具体的には以下の通り進めて頂ければ大丈夫かなと思います。

WSL2にDocker Engineをインストールして、NGINX Plusが入ったコンテナイメージを構築してみた|東京エレクトロンデバイス

今回のブログは、「WSL2にDocker Engineをインストールして、NGINX Plusが入ったコンテナイメージを構築してみた」ので私なりに調査して得られた経験を記事にしてみました。

https://cn.teldevice.co.jp/blog/p41204/

特にDockerインストール後の起動確認の部分で、

「Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?」

と出てきてしまった場合は、iptablesの設定が必要のようです。

【WSL2】UbuntuにDockerをインストールした後、Dockerのログにiptablesが使えないとエラーが出ててDockerそのものが起動してなかったときに対応したこと - Qiita

動作環境Ubuntu側で確認$ lsb_release -aNo LSB modules are available.Distributor ID: UbuntuDescription: ...

https://qiita.com/Y-takuya/items/32fe609c99b76e9c21f9

ここが一番苦労する場所かもしれません。（私は半日くらいかかりました）

⑤「Dev Containers」拡張機能を入れる。

これはVSCodeの拡張機能から、「Dev Containers」を選んでインストールすれば大丈夫です。（「Remode Development」でもいいみたいです。）

これでDevcontainerを利用する準備が整いました。

6.さっそく試してみる

使い方なのですが、左下の緑の部分（WSL:Ubuntuとなっているところをクリック）から表示される「新しい開発コンテナー」もしくは、パレットコマンド（Ctrl+Shift+p）で「Dev Containers」を選択します。

例えば、Node.JS＋PostgreSQL入れた開発コンテナーを作ってみます。新しい開発コンテナーを選択した後で「node」と入れて、「Node.js+PostgreSQL」を選択します。

ここで、コンテナの名前を決められます。（デフォルトで入っている名前を変更できます）
また、その他のオプションでバージョン等を細かく決めることが出来ます。

ターミナル右下の「show log」を押下することで進捗の様子が確認できます。

ネットワーク環境も影響するかもしれませんが、大体数分でコンテナ環境が準備できます。

今回は、NodeJSのAPPコンテナと、PostgresのDBコンテナとなります。
右下が「WSL:Ubuntu」となっているVSCodeのウィンドウで、以下コマンドを実行してみます。

docker ps -a

XXXX-app-1というコンテナと、XXXX-db-1という2つのコンテナが起動していることがわかります。

まずは、XXXX-app-1というコンテナの方に入ってみます。docker exec コマンドで直接入ることもできますが、VSCodeの新しいウィンドウを開いたほうが操作が楽そうなので、「実行中のコンテナにアタッチ」をクリックしてみましょう。

すると今起動しているコンテナが一覧で出てくるので、ここでapp-1の方を選択します、

そうすると、こんな風に新しいVSCodeのウィンドウが開き、nodeというプロンプトになっているターミナルが表示されます。これは作成したappコンテナーの中に入れたということです。（私がちょっと先に検証してしまっていたので余計なファイルが見えていますが・・）

ちゃんとNodejsが入っていることが確認できます。

同様に、DBコンテナの方にも入ってみます。右下がWSLとなっているVSCodeのウィンドウで「実行中のコンテナにアタッチ」で今度はdb-1の方を選択します。

ちゃんと接続出来てますね。こちらはルートユーザでのプロンプトが表示されています。`
そしてちゃんとPostgresがインストールされた状態であることもわかります。

7.中身はどうなっているのか？（わかる範囲で）

VSCodeでポチポチ押していくだけで2つのコンテナが瞬時に作れてしまいました。とても不思議な感じがします。わかる範囲でちょっと中身を見てみました。

まずapp-1のコンテナの方から。「/workspaces/(自分で名付けたコンテナ名/」配下に「.devcontainer」という隠しディレクトリがありました。

この中身を見てみると・・ここに「Dockerfile」と「docker-compose.yml」がありました。

Dockerfileの中身を見てみます。ほとんどコメントですが、FROMで専用のイメージをもとに構築されていることがわかります。（mcr.microsoft.comってなんだろう・・）

docker-compose.ymlを見てみます。

こちらは、appコンテナとdbコンテナの設定が書かれていますね。appは先ほどのDockerFileをもとに構築、dbはpostgresイメージをそのまま利用しているようです。USERやPASSもデフォルトで設定してくれるようです。

実はこの後、別サイトを参考にこの「appコンテナ」と「dbコンテナ」を接続した簡単なアプリを作ってみたのですが、これ以上はとても長くなってしまいそうなので、一旦ここで締めたいと思います。

８．まとめ

VSCodeで利用できる、「Dev Containers」について試してみました。Docker Desktop for Windowsではなく、WSLに直接Dockerをインストールして、WSL上でDockerコマンドを実行できるようにしました。Dockerのインストールには苦労しましたが、無事に2つのコンテナを作成し、中身にはいることができました。

ブログにするととても長くなってしまいましたが、慣れてくるといくつものコンテナを数秒～数分で立てることが出来るようになります。そしてPC自体の環境は汚れないので、使い終わったり、飽きたりしたらコンテナごと消せばよいというさっぱりさも良いですね。

読んでくださってありがとうございました！