WSL2のubuntuをgatsbyの開発環境にする（他のフレームワークでも使える）

ubuntu on wsl2を準備

1. WSL2を有効化してubuntuをインストールする（参照：WSL2+ubuntu20.04: GUI化して使う方法）※ 特にGUI化する必要はないので「ubuntuにXRDPをインストール」以降の作業は必要ない。
2. すでにubuntu on WSL2があって、それを初期化したい場合は、Windowsの設定→アプリ→アプリと機能→ubuntu 20.04 on Windowsの詳細オプションをクリック。
   
   3.そしてリセットボタンをクリックすればあっという間に初期化される。
   

nodeのインストール

• aptでnodeとnpmをインストール

$ sudo apt update
$ sudo apt install nodejs npm

• nodeバージョン管理のために一応npmでnをインストール

$ sudo npm install -g n

• nodeの最新安定版（LTS）バージョンを確認

$ n --lts
18.12.1

• nでlts版のNode.jsをインストール

$ sudo n lts

• nでnodeバージョンを確認

$ n ls
node/18.12.1

• 最後にaptで入れたnodejsとnpmをアンインストール

$ sudo apt remove nodejs
$ sudo apt autoremove

Gatsbyをインストール

• gatsby-cliをインストール

$ sudo npm install -g gatsby-cli

Gatsbyプロジェクトを作成してみる

• userホームディレクトリの下にtempspaceフォルダを作成。そこに移動してgatsby new test-sampleコマンド（test-sampleはプロジェクト名）

$ mkdir /home/atom/tempspace
$ cd /home/atom/tempspace
$ gatsby new test-sample

• 完了したらtest-sampleプロジェクトフォルダに移動し一応Gatsbyのバージョン確認

$ gatsby -v
Gatsby CLI version: 5.2.0
Gatsby version: 5.2.0
  Note: this is the Gatsby version for the site at: /home/atom/tempspace1/test-sample

• そしてgatsby develop

$ gatsby develop

• Windows上でクロームなりFirefoxなりでhttp://localhost:8000 を開いてみる。WSLでgatsby developによって立ち上がったGatsbyデフォルトスターターのページがWindows上のブラウザで表示できるはず。
  

VS Codeでプロジェクトフォルダを開く

• まず新しいVS Codeのウインドを開く

• 拡張機能で、WSLをインストールする（以前はRemote WSLという名前だったかと…）
  

• 左下の緑の><アイコンをクリックして、「新しいWSLウインドウ」を選択する。
  

• 新しいウインドが開く。左下の緑の枠に接続先のWSL上のOS(ubuntu-20.04)が表示されているはず

• 「フォルダを開く」ボタンをクリックする。
  

• Gatsbyプロジェクトファイルのパスを選んでOKボタンをクリック
  

開けました。

以上です。