🐱

VSCode の Dev Conatinerで Dockerfile などを自動生成する

2022/10/07に公開

こんにちは。地図パズル製作所の都島です。今日は私が普段使っているDev Container で、開発環境をより簡単に構築する方法を紹介します。

私はこれまで、Dockerfile、docker-compose.yml、devcontainer.json を自力で作成して、Dev Container での環境構築を行ってきました。たったそれだけで環境構築できて、本当にすごいなと思っていたのですが、それよりも簡単に構築できるということを友人が教えてくれたので、今日は紹介したいと思います。まだ、理解できていない点もたくさんありますので、間違っていたらコメントで教えてください!

これ以降は VSCode に Dev Containers エクステンションが入っている前提で書きます。入れていない方はインストールしてください。

まず、今回のプロジェクト用のフォルダをホストマシンに作成して、そのフォルダを VSCode で開きます。そして、VSCode の左下の緑色の部分を押します。

VSCode

すると、メニューが出てくるので、「Add Dev Container Configuration Files…」を選択します。

VSCode

そして、後は自分が作りたい開発環境のタイプをメニューに従って、選択していくだけです。

例えば、Node16 + PostgreSQL の開発環境を作成する場合は、「Node.js & PostgreSQL」を選択します。次に Node.js のバージョンを聞かれるので、16 を選択します。その後はインストールしておくものが選択できますが、一旦なしで進めます。そして、、、なんとこれだけです。確かに、.devcontainer フォルダができて、その中に、devcontainer.json、docker-compose.yml、Dockerfile が自動生成されています。

VSCode

後はいつも通り Reopen Container をすれば、Node16 + PostgreSQL の開発環境が構築できてしまします。なんとすごい!!ちなみに、ホストマシンとコンテナのソースコードの共有や、コンテナ内への一般的なエクステンションの導入など、たいていのことははじめから設定されているようです。

ちなみに、対応している環境は、alpine、C#、C++ and MariaDB、Go and PostgreSQL、、、などたくさんありますが、表示されない環境は自分で作る必要がありそうです。一覧は下の URL からご確認ください。今後、より多くの環境が対応することに、期待したいと思います。

https://github.com/microsoft/vscode-dev-containers/tree/main/containers

ということで、今日は Dev Container で開発環境を簡単に作成する方法を紹介しました。最後に地図パズル製作所の宣伝ですが、地図パズル製作所では、子供も大人も楽しめるたくさんの地図パズルを公開しています。新しい地図パズルもどんどん公開していますので、ぜひ見てみてください!こちらももちろん、Dev Container を使って開発しています!

https://chizu-puzzle.com

参考情報

今回の記事は、こちらのドキュメントを参考にしました。
https://code.visualstudio.com/docs/remote/containers
(2022/10/7 13:00閲覧)

Discussion