Windows+WSL2+Ubuntu22.04+VS Code Dev ContainerでWEBシステム開発しよう！

9974 ワード

テキストリンク

概要

WEBシステム開発にVisual Studio CodeのDev Containerを使うとかなり楽ができます。意外と知られていないのでここに紹介します。
開発に使用する言語はPHP・Python・Ruby・Perl・Java・Scala・TypeScript・Go・Rustなどどれでもいけます。DBもMySQLやDynamoDBなどどれでも対応できます。

※iOSネイティブアプリやAndroidネイティブアプリ開発には向きません。Electronアプリ開発にも向きません。.NET系言語の場合もおそらくVisual Studioを使う方がいいです。

Dev ContainerではVisual Studio CodeとDockerコンテナをつなぎ、Dockerコンテナを開発環境として利用します。
IaCが流行りつつありますが、開発環境のIaCともいえるかもしれません。

図解

各種方式の比較

観点	本方式	XAMPP・MAMP	WSL2直接	Windows直接
初期セットアップ	△	◎	○	○
2回目以降	◎	○	○	○
チーム開発	◎	△	△	△
複数プロジェクト	◎	△	△	△
本番環境の再現度	◎	×	○	×
モバイル回線での開発	△	○	○	○

※個人の感想です

想定するユーザーは「（非.NET系）WEBシステム開発で複数プロジェクト（新規開発・運用）を並行して行う中堅ITエンジニア」とします。

初期セットアップ

Dockerをインストールする必要があったり、Dockerファイルなどの調整が必要で多少の手間があります。スムーズにいけば30分ぐらいで終わります。

2回目以降

かなりの部分を流用（コピペ）できるため省力化できます。

チーム開発

ほかの方式ではバージョンをそろえたり、パスをそろえたりするのが難しい場合もあります。
本方式は立ち上がりさえすればコンテナ内は100％の一致があるので、環境違いによる問題などは大部分回避できます。

複数プロジェクト

ほかの方式は各プロジェクト間で相互に影響を与える場合があります。たとえばnodejsのバージョンを複数並行運用したり、XAMPPの設定であったり、PATHが変わったために別プロジェクトを壊してしまったり。
本方式は各プロジェクトごとに別コンテナに分かれるためそういった問題から解放されます。

モバイル回線での開発

Dockerイメージが数百MB～1GBあるため、回線速度がない環境での使用には向きません。

本方式のデメリット

Dockerの知識がある程度要求されます。基本的な構成であればコピペでなんとかなりますが、サポートがなく自力解決のできないまったくの初心者にはお勧めできません。
WSL2やDockerといったVM・コンテナを動かすのでメモリがある程度必要です。16GBだと少し厳しく、32GB以上あれば快適に使えます。
画像のペーストは2022年4月現在できません。コードを含むテキストのペーストは問題なくできます。

どういう人にお勧めか？

Dockerやサーバー管理も苦ではない、フルスタック気味のITエンジニアであればおそらく幸せになれます。

また、チーム開発においては1人以上詳しい人がいれば大丈夫でしょう。環境周りのサポートからある程度開放されます。

セットアップの流れ

公式ドキュメントは以下です。ただし最新（Ubuntu22.04）のものを使いたい場合などは微妙にドキュメント通りではありません。

注意点

WSL 1ではなくWSL 2が正解です。
ubuntu22.04は公式ドキュメント通りだと入らず、Microsoft Storeから入手する必要があります。
ubuntu22.04ではDockerはそのままだと起動がこけます。iptablesの設定変更が必要です。
CPUの仮想化支援機能が必要です。BIOSで無効化されている場合もあります。

Windows Terminal

必須ではないですが、あるほうが便利です。https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701より入手してください。
タブ機能があったり、Powershell、コマンドプロンプト、WSL2をまとめて扱えたり、とにかく便利です。

CPUの仮想化支援機能の確認

タスクマネージャーを開き、右下部分の仮想化が有効であることを確認します。
もし有効でない場合、CPUやBIOSの設定を見直します。

タスクマネージャー

Windowsの機能の有効化

WSLおよびHyper-Vの有効化をします。

スタートメニューよりWindowsの機能の有効化または無効化を検索し、開きます。
Hyper-VおよびLinux用Windowsサブシステムにチェックをいれます。
OKボタンをクリック
再起動を促されるので再起動します

WSL2をデフォルトに設定する

Powershellを開きます。
wsl --set-default-version 2を実行します。
このように表示されれば成功です。

WSL2+Ubuntu

Microsoft StoreでUbuntuと検索します。
複数のバージョンが出てくるのでUbuntu22.04を選択し、入手します。
スタートメニューよりUbuntu22.04を起動します。
言語はEnglishを選ぶといいと思います。
そのほかの項目はデフォルトのままで大丈夫です。
Powershellでwsl --list -vを実行し、次のように表示されれば大丈夫です。VERSIONが2（1ではなく）であることを確認しましょう。

カーネル更新

カーネル更新が必要なケースもあるようです。
公式ドキュメント手順4よりx64 マシン用 WSL2 Linux カーネル更新プログラムパッケージを入手し、適用してください。

トラブル時には

Ubuntuセットアップ画面のvをクリックします。
エラーメッセージなどが黒色の領域に出ている(スクロールもできます)ので、エラーメッセージをもとに検索します。特に公式のトラブルシュートのページは参照する価値があります。
どうしようもなくなった場合、 Windowsの機能の有効化よりLinux用Windowsサブシステムのチェックを外し、再起動するとすべてをリセットできます。

Dockerをいれる

Ubuntu(WSL2)のシェルで次のコマンドを実行します。

sudo apt-get update
sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
sudo usermod -aG docker $USER

iptablesの設定を変える

Ubuntuでsudo update-alternatives --config iptablesを実行し、1を選びます。

iptables

試しに動かしてみる

sudo service docker start
docker run hello-world

※docker run hello-worldにsudoがついていないことに注目してください。これはsudo usermod -aG docker $USERを設定したことによって実現されています。この設定がない場合、Visual Studio CodeからDockerをうまく操作できません。

Visual Studio Codeのインストール

公式サイトからインストーラをダウンロードし、実行します。
その際、codeコマンドを利用するためにPATHに追加にチェックを入れます。(Visual Studio Code Insidersをインストールした場合はcode-insidersコマンドが利用できるようになります)

再起動を忘れないようにしてください。

Dev Containerの起動方法

Dockerの起動

Windows TerminalなどでWSL2のubuntuに入りsudo service docker startなどでDockerデーモンを起動します。
このシェルは閉じず、そのまま放置します。WSL2は1つもシェルが開かれていない場合、しばらく時間が経過した後に自動的に停止します。つまりDockerも停止してしまいます。

.gitconfigファイルを作っておく

Visual Studio CodeがWSL2の~/.gitignoreをコンテナの~.gitignoreファイルにマウントしようとします。この際、もしファイルがない場合空ディレクトリが作られ、おかしな挙動をするようになります。

WSL2のubuntu上で

touch ~/.gitignore

Visual Studio Codeで開く

開き方はいろいろありますが、WSL2のubuntuでプロジェクトのディレクトリに移動し、code .あるいはcode-insiders .を実行しVisual Studio Codeを開く方法が楽です。
Containerモード以外で起動した場合はF1 → Reopen in Containerします。