Windows+WSL2+Ubuntu22.04+VS Code Dev ContainerでWEBシステム開発しよう!
概要
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を選びます。
試しに動かしてみる
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
します。
Dev Containerの設定方法
Visual Studio Codeのインタラクティブなコマンドで設定する方法
WSLモードで開いている状態でF1→Add Development Container Configuration Files
を実行します。
.devcontainerフォルダの中にDockerfileやdevcontainer.jsonが生成されます。
手動で設定する方法
devcontainer.jsonやDockerfileをどこかからコピペしてきたり、自分自身で書きます。docker-composeも利用可能です。
※より高度な設定に関して、別の記事を書こうと思います。
よくあるトラブル
調べてもだめな場合、DMでご相談ください。一緒に解決していきましょう。
Ubuntuの(初回)起動に失敗する
トラブル時にはを参照してください
Dockerが起動できない
- WSL2になっていますか?
- iptablesの設定を変えましたか?
codeコマンドがない
- Visual Studio Codeインストール時にPATHに追加を選びましたか?
- 再起動しましたか?
Dev Containerがうまく起動できない
- VS Codeの右下にStarting Dev Container(show log)というトーストが出ているのでクリックします。
- ログがつらつらと出ているので怪しい部分を選び、検索します。
ファイルIOがやたら遅い気がする
Windows側にファイルを置いていませんか?Volume Mountするフォルダ/ファイルはWSL2側にある必要があります。
何をやってもうまくいかない
トラブル時にはを実行してみてもいいかもしれません。WSL上のあらゆるものが消え、リセットされます。コードももちろん消えるので注意してください。
コードを救出したい場合、wsl2上のubuntuのシェルに入り、プロジェクトのフォルダでexplorer.exe .
を実行するとファイルエクスプローラーで該当ディレクトリを開くことができます。もちろんコピーもできるはずです。
Author And Source
この問題について(Windows+WSL2+Ubuntu22.04+VS Code Dev ContainerでWEBシステム開発しよう!), 我々は、より多くの情報をここで見つけました https://zenn.dev/algovitae/articles/2022devcontainer著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol