Zenn
😽

Dev Containerで開発環境構築

2023/03/04に公開
Docker
VS Code
WSL 2
tech

ローカルの開発環境って様々なソフトウェアや言語、ミドルウェア等をインストールしていくとごちゃごちゃして、自分でも何を入れたのか分からなくなってきます。最近新しくノートPCを買ったので、これを機にWindowsのローカル環境を綺麗に保ちながら、再現性のある開発環境を構築する、ということを目標にやっていきたいと思います。

やること

  • 開発環境をWindowsのDocker上で動くDev Containerとする。
  • ローカル環境からVS Codeの拡張機能（Remote Development）を利用して開発環境へアクセスする。

ローカル環境を構築

Windows側に最低限入れるもの

  • VS Code
    • VS Code Remote Development拡張機能
  • Docker Desktop for Windows
  • WSL2

上記以外のものは極力ローカルではなく、Dev Container側にインストールします。

Docker Desktop for Windows

事前設定（WSL2）

WSL2がセットアップされていない場合、インストールしてアップデート

wsl --install
wsl --update

Docker Desktop for Windowsをインストール

Docker Desktop for Windowsをインストール

VS Code

VS Codeをインストール

VS Codeをダウンロードしてインストール

VS Code拡張機能をインストール

VS CodeにRemote Development 拡張機能パックをインストール

Dev Containerを構築

この辺を参考に進めました。
https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode

Dev Containerの初期化

  • VS Codeを開く
  • Ctrl + Pでコマンドパレットを開く
  • >Dev Containers Open Folder in Containerを選択しプロジェクトを作りたいフォルダを選択

作りたい環境を選択していきます。
今回はJava17で設定しますが、ここでPythonでも何でも自分が構築したい環境のベースを選択出来ます。

  • Java devcontainersを選択
  • 17を選択
  • Install Gradle ... にチェック

初めに選択したフォルダに.devcontainerフォルダが作成され、フォルダ内に.devcontainer.jsonファイルが作成されます。

VS Code左下の緑のマークがDev Container:XXXXとなっていれば、作成されたコンテナにローカルからリモート接続した状態となっています。

この状態としては、devcontainer.jsonに書かれた内容でコンテナが作成され、作成されたコンテナにVS Codeからリモート接続した状態になっています。
逆に、ホストマシンから普通にフォルダを開きたい場合には、緑のマークを押下＞Reopen Folder Lolacllyを押せば、ホストマシンの環境で開きなおしてくれます。

Dev Containerの拡張設定

これだけでも開発は進められますが、ある程度の環境構築は自動でやってくれるように、
Dev Container側にVS Codeの拡張機能をインストールします。

  • devcontainer.jsonに追記
"extensions": [
	"vmware.vscode-boot-dev-pack",
	"vscjava.vscode-spring-initializr",
	"vscjava.vscode-gradle"
],
"forwardPorts": [8080],
"remoteUser": "root"

以下の設定を追加しています。

  • Spring Bootの拡張機能を追加
  • Gradleの拡張機能を追加
  • コンテナからホストへPort8080をフォワード
  • コンテナをrootユーザで実行

編集したら保存して、左下のメニューからRebuild Containerを選択して実行します。
これで、Javaで開発する基盤が整いました。

Spring Bootプロジェクトの作成＋実行テスト

以前の記事と同じことを今度はDev Containerで行います。
https://zenn.dev/ykdev/articles/cde000b2b8f405

Spring Bootプロジェクト作成の作成

Dev ContainerでSpring Initializrを利用して、Spring Bootプロジェクトを作成し、実際に動くか確認します。
プロジェクト作成後にGradleの拡張機能が認識されない場合は、Dev Containerのsettings.jsonに以下を追記します。

"gradle.nestedProjects": true

Webアプリケーション実行

GradleタスクからbootRunを実行します。
Spring Bootのウェブアプリケーションはデフォルトでポート8080で公開されます。

ホストマシンからアクセス

ポート8080をコンテナからWindowsへフォワードしてるので、以下URLでアクセスが出来ます。
http://localhost:8080

以上を行うことで、作成したDev Containerを利用してローカルから隔離された開発環境を構築することが出来るようになりました。また、devcontainer.jsonはIaC的にどこでも同じ開発環境が構築できるので、Docker・VS Codeが動作する環境であれば、すぐに同じ環境が再現できるようになりました。

また、開発環境には初めからGitも入ってるので、既存のGitリポジトリからソースを取得したり、新たにPushしたりすることも簡単に出来ます。

私は普段、VS CodeではGit Graph等を利用させて貰っています。
以下もdevcontainer.jsonのextensionsに追加しておくとGitも見やすいかなと思います。

"vscjava.vscode-gradle"`

Discussion