何番煎じか分からないですが、日々変化している話だと思うので記録しておきます。これは20201001時点での作業ログ。

事前に知っておくと良い情報

• Windows10 バージョン1903/1909にもWSL2が来ている
  • 自分のマシンも含めて2004がまだ届いていない人はいるようなので、ありがたい
• WSL1で動かしているマシンはWSL2に変換できる
• WSL2ではIPアドレスが起動ごとに毎回変わる

できたいこと

• WSL2側に開発案件のgitリポジトリを置く
• それをVSCode Remote Developmentの一機能であるremote WSLによってWin側にファイルを持つのと同じ感覚で編集する
• 開発案件がWebアプリなら、WSL2の内側で立てたWebサーバーにWin側のブラウザから簡単な方法で接続できる

実際にやった作業

WSL2化まで

1. (既にWSL1のUbuntu 18.04が手元にある状態からスタート）
2. Windowsのバージョンを調べる → 1909だったが、マイナーバージョンが上記リンク先記載のものより進んでいたのでWSL2の導入が可能と判断

3. PowerShellで以下実行:

   Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform -NoRestart
   

4. WSL2を操作しようとすると「カーネル コンポーネントの更新が必要です」と表示されるので、指示に従ってダウンロード、インストールし、とりあえず再起動。

5. WSL2をデフォルトにするためにPowerShellで以下実行

   wsl.exe --set-default-version 2
   

6. 今動いているUbuntu 18.04をWSL2に変換 (上記リンク先の手順に従って)

   wsl.exe --set-version Ubuntu-18.04 2
   

VSCodeで編集、動作確認まで

ソースを見れるようにする

1. VSCodeにRemote Development Extensionを入れる。これのサブパッケージ(?)にRemote WSLがある
2. VSCodeのremote WSLボタン(?)からUbuntu 18.04側に置いてあるリポジトリを開く
3. Vueterなど当該プロジェクトで必要なプラグインをWSLマシン側にも配置 → この時点でWindows側にソースがあるのとほとんど何も変わらない感覚で開発ができる

開発中のWebアプリをWin側ブラウザで見れるようにする

1. 開発中のWebアプリをWSL2側で立ち上げる (自分の場合はnuxtだったのでWSL2の端末からnpm run devなど)。この時点で都度IPアドレスを調べればそこにWin側ブラウザでアクセスすれば接続できる
2. localhostでアクセスできるようにするために、.wslconfigを作る。なお設定後wslの再起動が必要だった。
3. 以後、http://localhost:3000/ などでWin側ブラウザからアクセスできるようになる

補足

任意のGUIアプリを動かすにはWindows側にX Serverが必要になるというあたりはssh先のLinux機と変わらないようです。このあたりもそのうち改善するのではないかと期待しています。