はじめに

最近仕事用の PC が異音を出すようになったため、新しい PC に交換してもらった。せっかくのまっさらな PC なので、新たなことを試していこうと思う。
これまでの開発では、WSL2 上に仮想環境を作成することで開発を行ってきたが、複数人で開発する際には各々の実行環境が異なっていることが多く、その度に確認することが手間だった。また仮想環境のアクティベートを忘れてローカル環境を変更してしまうことも何度かしてしまっていた。そこで今回の PC 故障を機に開発環境統一化やローカル環境のクリーン化を目指し Docker での開発環境構築に取り組んでみる。

想定する Docker 開発環境ルール

以下のようなルールを想定。言語が異なってもすべて VSCode で扱える「統一性」と VSCode 拡張機能もコンテナごとに設定するなど「ローカル環境のクリーンさ」を重視した。

ローカルの Windows と開発関連は完全に分離（ファイルも WSL2 上に配置）
開発環境はすべて Docker コンテナ上に作成
コンテナイメージは Dockerfile により作成（追加パッケージがあれば必ず追記）
ファイルへのアクセスは基本的に VSCode を使用
VSCode Extensions やポートをコンテナごとに設定

WSL2 のインストール

Docker のバックグラウンドで使用するためインストールする。Hyper-V よりもパフォーマンスが良く、また WSL2 環境自体も容易に再構築できるため Windows 環境を汚さなくてもさまざまなことを試せるのが嬉しい。

Windows 10 用 Windows Subsystem for Linux のインストールガイドを参考にした。参考サイトにある WSL2 の実行要件を見て問題がないことを確認。
まず「Windows の機能の有効化または無効化」で以下項目のチェックボックスをオンにして、PC を再起動する。

Linux 用 Windows サブシステム
仮想マシンプラットフォーム

次に x64 マシン用 WSL2 Linux カーネル更新プログラムパッケージをダウンロードして実行する。次に PowerShell を管理者権限で実行し、以下コマンドで WSL2 を既定のバージョンとして設定する。

PS > wsl --set-default-version 2

最後に Microsoft Store から Linux ディストリビューションを選択し、インストールする。ここでは、Ubuntu-20.04 を選択した。インストール後に起動して、ユーザーアカウントとパスワードを設定したら WSL2 のセットアップは完了。ついでに.bashrc には以下設定を追記しておく。コマンドの履歴を補完してくれるのが便利。

.bashrc

...
# User specific aliases
alias ls='ls -G'
alias la='ls -a'
alias rm='rm -i'
alias mv='mv -i'
alias cp='cp -i'
alias ..='cd ..'

# 履歴補完前方一致
bind '"\C-n": history-search-forward'
bind '"\C-p": history-search-backward'
# 上矢印キー
bind '"\e[A": history-search-backward'
# 下矢印キー
bind '"\e[B": history-search-forward'

あとはディレクトリ構成を見るのに便利な tree を sudo apt install tree でインストールしておく。

Docker Desktop のインストール

肝心要の Docker を入れていく。インストール自体は非常に簡単。

Docker Desktop for Mac and Windows からセットアップファイルをダウンロードして実行。途中の設定では「Install required Windows components for WSL 2」にチェックを入れたままで進める。

VSCode のインストール

VSCode をインストールする。インストール先は Windows となるが、（後述の拡張機能を用いて）基本的には WSL2 上から開くことを想定している。

Visual Studio Code からセットアップファイルをダウンロードして実行。追加タスクの設定ではデフォルトのまま「PATH への追加」のみチェック。この設定で WSL 上で code . などで VSCode を実行できるようになる。Windows 上でフォルダやファイルを VSCode で開くことはないのでその他はチェックしない。

VSCode 拡張機能の追加

次に、拡張機能を入れていく。以下は Docker 開発環境に必須なもの。

Docker
Remote Containers
Remote WSL

Docker

Dockerfile や docker-compose.yml の編集時のサポート、Docker イメージやコンテナ、ネットワークといったものの状況を VSCode 上で把握できるようになる。その他にも機能があるが、コンテナの状況を簡単に見ることができ、GUI で削除などもできるのが便利。

Remote Containers

以下2つのファイルで設定を行う。

devcontainer.json：VSCode 上のコンテナ設定ファイル
Dockerfile ：Docker イメージ作成ファイル

VSCode 画面左下の緑 [><] をクリックすると、Add Development Container Configuration Files... を選択すると、.devcontainer ディレクトリが作成され、その配下に上記2つのファイルが作成される。またその際、使用する言語などに合わせてサンプルも使用できる。詳細は Get started with development Containers in Visual Studio Code を参照。
基本的にはサンプルを参考に細かい部分を自分用にカスタマイズ（コンテナごとの拡張機能の設定など）すればよい。devcontainer.json に関しては devcontainer.json reference に詳細が記載されている。

Remote WSL

WSL2 上で code . などの実行により VSCode による編集が可能。開発自体は Docker 環境で行うが、開発関連のファイルを WSL2 上に置く想定なので、「一度 WSL2 上のプロジェクトディレクトリから VSCode に接続」→「 VSCode 画面左下の緑 [><] からコンテナ環境に接続し直す」ことを想定している。また .bashrc など WSL2 上自体の設定ファイルの編集にも使用できる。（vim を扱えないので VSCode with Emacs Key Binding で編集したい。。。）

その他拡張機能

その他の便利な拡張機能はコンテナごとに設定したいので、必ず使用するもの以外はローカル VSCode にはインストールしない。私がローカルに入れたのは以下3つくらい。

Awesome Emacs Keymap（Emacs キーバインディングにできるありがたい機能）
Bracket Pair Colorizer 2
vscode-icons

おわりに

雑ではあるが、ひとまず自身の開発自体はできそうなのでここまでとする。今後使用していく中で勘違いやよりよい使い方などが出てくれば更新していきたい。

Docker 開発環境構築 (WSL2 + VSCode)