VSCode + Remote Container + WSL2 Dockerで開発環境構築が捗る話
概要
VSCodeでDev Container使って開発環境作ると、OS環境汚さないしとても便利という話を聞いたので、周辺諸々調べてみたので、備忘録的に記事にまとめる。
環境はWindows10 pro。
経緯
Windows環境でDockerを使って開発環境作るのは昔から興味があったけど、特にコードを書くこともない人生だったので手を付けずにいた。
ただ、最近自宅IoTや電子工作周りでコードを書く機会が増えてきたのと、VSCode＋Dev Containerがとても便利という話をTwitterで見かけたので、重い腰を上げてみた。
WSL2バックエンドのDockerもこの機会に設定。
やったこと
WSL2とDockerインストール
こちらのサイトの作業を手順通りにするだけ。
基本的にDockerは、WSL2バックエンドの設定がデフォルトみたい。
WSL2のディストリビューションはUbuntu20にしました。
VSCodeのインストール
ダウンロードしてインストールするだけなので割愛。
Dev Containerを立ち上げ
こちらのサイトがわかりやすいです。
VSCodeで新しいフォルダを開いて、コマンドパレットで「Reopen in container」して、言語やバージョンを選択すれば、それ用の設定ファイル(.devcontainerフォルダと2ファイル)を作ってDev Containerをビルドしてログインしてくれます。
正確には、「Add Development Configuration Files...」で設定ファイルを作成してからコンテナを起動する操作だけど、上記Reopenしたときに設定ファイルがないと、作成ウィザードを始めてくれるみたい。
あとは、その環境上で開発をすればOK。
なんだけど、この手順には落とし穴があるので、次の操作を推奨。
WSL2内からVSCodeを立ち上げたほうが良い
こちらのサイトに詳しいですが、Windows側からVSCodeを起動した場合、バインドされたフォルダへのアクセスが致命的に遅いという問題があり、ホットリロードもできないということになる模様。
どういうことかというと、VSCodeでDev Containerを起動したときのフォルダは、コンテナ内から参照できるように作業フォルダとしてマウント（バインド）しているんだけど、Windows側とWSL側でファイルの扱いが異なるため、オーバーヘッドが出るらしい。
対策としては、WSL側でVSCodeを起動すればよろしい。
Ubuntu起動 → 対象フォルダをmkdirしてcd → 対象フォルダ内で$ code .
とすれば、オーバーヘッドなしで起動可能。
コンテナの設定変更
こちらが参考になる。
コンテナやVSCodeの設定を変更したい場合は、.devcontainer内のDockerfileやdevcontainer.jsonを書き換えましょう。
Dockerfile書き換えたらイメージを再ビルド。
VSCodeの左下、「Dev Container」と書かれた部分をクリックするか、コマンドパレットで「Rebuild Container」すれば、環境を初期化して再ビルドしてくれます。
もちろん、作業フォルダ内のファイルはそのまま保持してくれます。（上記のバインドフォルダなので、コンテナ環境側とは別）
また、上記サイトにあるとおり、githubを使う場合はひと手間かける必要があるようですね。
githubに接続するためのSSH鍵の、ホストWindowsからコンテナへの共有はこちらのサイトがわかりやすいです。
一点注意としては、.bash_profileを新規作成した場合、ログイン時に.bashrcが読み込まれなくなります。（Linuxの読み込み優先度が.bash_profileのほうが高いみたい）
ので、
if [ -f ~/.bashrc ]; then
. ~/.bashrc
fi
も追記する必要があります。
まとめ
なんだかんだとやらずに過ごしてきた、Dockerでの開発環境構築ですが、VSCodeやDockerの進化で敷居が低くなっていて、文字通りサクッとできるようになっていた。いい時代だ・・・！
そもそも、自分はもともと環境構築好きだったので、本来やりたかったことを差し置いて環境構築に時間をかけてしまって、気づいたら本題を忘れる・・・というのが良くあったので、この手軽かつ端的な開発環境構築は嬉しい。
今後はOS環境を汚すことを気にせずに、気兼ねなくサクッと環境構築して、本題に着手できるはず！！
Discussion