開発言語やフレームワークのバージョンを最新に変えると、イキナリ動かなくなる！コトは多いと思います。Pythonならpyenvを使えば良いのでしょうが、例えばrubyやRust、node.jsやJSフレームワーク（Angular、React、Next、Vue、Gatsby…）の場合はどうすれば？。

結論

VSCodeとdocker,そしてVSCodeの拡張機能であるRemote Containersで実現可能。

当方の現環境

Windows10 Home 19043.1706
VSCode: 1.67.2
node v12.18.3
Gatsby CLI: 2.12.95
Gatsby: 2.25.0
にて本番環境を構築し運用している。

当方の目的

わたしの場合、最新バージョンGatsbyでWebサイトを新しく開発したい。そして今ある既存の本番環境に影響を与えたくない（Gatsby version 2.xxを使っているところにいきなりGatsby CLI version 4.xxにしたら９０％以上の確率でビルドできなくなると思う）。
ゆえに既存環境に影響を与えない開発環境を新しく作りたい。

手順

１　WSL2でubuntuが動くようにしておく。

WSL2でubuntuが動くようにしておく。
やり方はこちら WSL2+ubuntu20.04: GUI化して使う方法の前半「Microsoft Storeからubuntu20.04をインストール」までを参考に。

２　dockerをインストールする。

dockerをインストールする。
dockerはデフォルトインストールするだけ。何の設定もしない。

３　コンテナ（作業スペース）となるフォルダを作成する。

コンテナ（作業スペース）となるフォルダを作成する。

まず、WSL2を立ち上げ、

WSL2のUbuntuで作業スペース（コンテナ）となるフォルダ（ディレクトリ）を作成しておく。ここではホームディレクトリ配下に"workspace"フォルダを作った。

hoge@LAPTOP-Q8RLNGHD:~$ mkdir workspace
hoge@LAPTOP-Q8RLNGHD:~$ pwd
/home/hoge/workspace

次にVSCode側の作業。

VSCodeを開く。
「ファイル」 → 「新しいウインド」
青いボタンの「フォルダを開く」をクリック
するとローカルPCのフォルダが開かれるが、
ローカルPC上にフォルダを作成しそれをコンテナにしても良いのだが、めっちゃパフォーマンス遅くなります。キャンセルしていったん閉じて、
VSCodeの左下の緑色のアイコンをクリック。
「新しいWSLウインドウ」を選ぶ
新しいVSCodeのウインドウが開く（リモートに接続しました、と表示されている）。青いボタン「フォルダを開く」をクリック。
WSLのUbuntuのディレクトリ階層が表示される。最初に作成しておいたworkspaceを選ぶ。OKをクリック。
左枠の「ソース管理」アイコンをクリックして現れる青いボタン「リポジトリを初期化する」をクリック（画面ではなぜか英語になってしまったがInitialize Repository。
ファイル表示に戻して「Reopen Container」を選ぶ。
この画面になる。
node で検索して出てくるNode.jsを選ぶ。
16-bullseys(default)のままで良い。エンター。
何もチェックしなくてよい。OKをクリック。
これで一応完成である。
VSCodeのコマンドラインでnodeのバージョンが最新であることを確認できる。

４　Gatsby最新バージョンインストール

当方ではGatsby最新バージョンの開発環境が欲しいので、Gatsby-cliをインストールする。しかし、~~VSCodeのコマンドラインでnpm install -g gatsby-cliとやってもできない~~
スミマセン、npm install -g gatsby-cliでインストールできます。

Dockerfileをいじって行う。

手順

Dockerfileを開く。
最終行にRUN su node -c "npm install -g gatsby-cli"を追加。
左下の緑のバーをクリックして、Rebuild Containerを選ぶ。
完成しました。gatsby --versionとVSCodeのコンソールで打ってみて下さい。
最新バージョンの4.14.0がインストールされました。

ここからは普通にgatsby new [サイト名]から始めて開発を進めていくだけ。WSL上にコンテナを作ったのでビルド（gatsby build）の速さは通常と変わらない。ぜひ試してみて下さい。

確認

まったくいじらなかったDockerの画面を見てみる。

コンテナがひとつ出来ている。これはVSCodeで先のワークスペースを開いていればRunしている状態になり、VSCodeを閉じると勝手にStopする。削除しないように注意。

宣伝

静的サイトジェネレーターGatsbyの基本とnode APIの扱いについて踏み込んで解説・ハンズオンした電子書籍を上梓しましたので、よろしければお手に取ってみて下さい。

JAMStackを学ぼう Gatsby, React bootstrap, Netlifyでつくる企業サイト～もうレンタルサーバーはいらない～

GatsbyとmicroCMSを組み合わせてのコーポレートサイト作成手順を解説・ハンズオンした続編を上梓しました。どうぞお手に取ってみて下さい。

JAMStackを学ぼう GatsbyとmicroCMSでつくるコーポレートサイト～WordPressはもう古い～