開発言語やフレームワークのバージョンを最新に変えると、イキナリ動かなくなる！コトは多いと思います。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はもう古い～
