おは代々木ダイアリー

いろいろ試したメモを書きます。このブログはアフィリエイトを使用したプロモーションを含みます

Windows(WSL2)でdevcontainerするときのTips 2024年版

超久々にdevcontainerを使った開発環境をWSL2上に構築する機会があり、調べてみるといろいろと便利なことができるようになっていたようなのでご紹介です。

ちなみに、今回の開発環境は TypeScript を用いた開発向けで、Windows環境からWSL2上に立ち上げたコンテナに繋いで使用することを想定しています。

なお、自分が今回初めて知った内容を記載するので、自分にとって既知だった内容は書きませんし、2024年に追加された新機能を全部網羅しているわけではありませんのでご了承ください。(あくまで2024年に知った内容であり、2024年に追加された機能ではないかもしれません)

他の端末からコンテナ内にアクセスさせる

devcontainerで立ち上げたコンテナ内のサービスにポートフォワーディングで開発端末からアクセスする(例: localhost:8080 など)ということは今までもできましたが、以下のように設定することで開発端末で 0.0.0.0 で待ち受けることができるようになるみたいです。

{
  "remote.localPortHost": "allInterfaces"
}

コレ、つまりどういうことかというと、ReactNativeアプリなどを開発端末経由でコンテナから取得してAndroidネイティブでデバッグすることができる、ということなんです。

つまり、「ローカルで開発してないと他の端末でデバッグできないしな~~~」といってdevcontainer使用に二の足を踏んでいる人にもオススメできる、ということです。

これを知るまでは、ReactNativeの開発はnodejsなのでWindowsローカルでも不自由なく開発することができたので、頑張ってdevcontainerを使う必要もないかと考えていたんですが、これなら頑張らずともdevcontainerで開発できるわけなので今ではバリバリReactNative案件でもdevcontainerを使っています。

なお、この機能は Insider (開発版)のVSCodeでないとちゃんと動いてくれないようです。stable版に来るのはいつになるのでしょうか

Devcontainer setting `remote.localPortHost=allInterfaces` is not respected · Issue #6445 · microsoft/vscode-remote-release · GitHub

メモリ枯渇対策

WSL2上で使用するDockerは結局のところVMと同じなので、WSL2上で確保されてしまったメモリはホストで使用することができなくなります。当初は私も32GBのメモリで頑張っていたんですが、typescriptで開発をしているとトランスパイルでゴリゴリメモリを奪われるのか、開発環境を立ち上げたままゲームしたりってことができなくなりました。

適宜開放する

今まではWSLで使用できるメモリ上限を設定するのが有効な手段として知られてきましたが、いつの間に使えるようになったのか Linux上でキャッシュを消去するために /proc/sys/vm/drop_caches を叩くという手があるそうです。

sudo sh -c "echo 3 >'/proc/sys/vm/drop_caches'"

上記コマンドを適宜たたくか、あるいは .wslconfig に以下のように記述することで、適宜CPUアイドル時にキャッシュ開放を叩いてくれるみたいです。

[experimental]
autoMemoryReclaim=gradual

参考: WSL での詳細設定の構成 | Microsoft Learn

メモリを増設

自分はDellのG5 5000というゲーミングPCで開発をしているんですが、この際メモリも盛ろうということで適当にDDR4メモリを見繕って増やしました。適当に転がってたのを使用したので32+16で48GBとかいう中途半端な容量になっていますが、メモリ枯渇の憂き目にはあわずに開発も遊びもできるようになりました。

ちなみに使ったのはコチラのメモリ

まぁ規格さえ合っていればなんでもいいのだ・・・

終わりに

久々に開発環境を整えてみたら結構学びがありますね。今回は初めてTypeScript向けに構築しましたが、まさかメモリが足らなくなって増設することになるとはって感じです。新しい autoMemoryReclaim というオプションについて知ることもできてよかったと思います。どなたかのご参考になれば幸いです。

また何か見つけたら追記していきたいと思います~