VSCodeとdevcontainerとWSL2(ubuntu)で最新バージョンのテスト開発環境を。

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

# 結論
<strong>VSCode</strong>と<strong>docker</strong>,そしてVSCodeの拡張機能である<strong>Remote Containers</strong>で実現可能。

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

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

## 手順
### １　WSL2でubuntuが動くようにしておく。
WSL2でubuntuが動くようにしておく。
やり方はこちら :point_right_tone2: [WSL2+ubuntu20.04: GUI化して使う方法](https://qiita.com/atomyah/items/887a5185ec9a8206c7c4)の前半「Microsoft Storeからubuntu20.04をインストール」までを参考に。

### ２　dockerをインストールする。
[docker](https://www.docker.com/products/docker-desktop/)をインストールする。
dockerはデフォルトインストールするだけ。何の設定もしない。

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

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

まず、WSL2を立ち上げ、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/618b044f-0ca0-b1b4-4139-94cdebce9749.png)

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

```bash
hoge@LAPTOP-Q8RLNGHD:~$ mkdir workspace
hoge@LAPTOP-Q8RLNGHD:~$ pwd
/home/hoge/workspace
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/a68d9443-ab6d-1a57-96c0-eef2456702d5.png)

<br />

次にVSCode側の作業。

1. VSCodeを開く。
1. 「ファイル」 → 「新しいウインド」
1. 青いボタンの「フォルダを開く」をクリック ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/a6ef5dda-daa0-794f-f436-95e691fe9d6a.png)
1. するとローカルPCのフォルダが開かれるが、 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ef66454d-9da6-2e0c-ec12-458d1cfb28a4.png)
1. ローカルPC上にフォルダを作成しそれをコンテナにしても良いのだが、**めっちゃパフォーマンス遅くなります**。キャンセルしていったん閉じて、
1. VSCodeの左下の緑色のアイコンをクリック。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/94289b17-7cea-be6c-736d-179b785dd560.png)
1. 「新しいWSLウインドウ」を選ぶ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/96599447-e9ba-6a84-8905-dfb225d535c2.png)

1. 新しいVSCodeのウインドウが開く（リモートに接続しました、と表示されている）。青いボタン「フォルダを開く」をクリック。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/34e29b21-e21b-71ac-49a3-5afa48cbdd3a.png)

1. WSLのUbuntuのディレクトリ階層が表示される。最初に作成しておいたworkspaceを選ぶ。OKをクリック。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/99ddb2bd-7510-594d-302d-7e7030cb58b2.png)

1. 左枠の「ソース管理」アイコンをクリックして現れる青いボタン「リポジトリを初期化する」をクリック（画面ではなぜか英語になってしまったがInitialize Repository。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/7c11b268-d6c0-3717-ec42-b97c2c844704.png)
1. ファイル表示に戻して「Reopen Container」を選ぶ。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/189c0d2e-e156-07ca-a686-064e5c7e55e7.png)
1. この画面になる。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/916c9b46-553a-f556-67fb-d82b57b58344.png)
1. node で検索して出てくるNode.jsを選ぶ。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/af09059d-4729-d03c-c920-be3474e8b1cd.png)
1. 16-bullseys(default)のままで良い。エンター。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/30894eb3-1e51-5393-8568-691fbf7a6968.png)
1. 何もチェックしなくてよい。OKをクリック。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/1e38df3f-11ec-6f81-39d7-82f826c156ac.png)
1. これで一応完成である。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/8d66ff26-823a-b7bc-ccfd-c25a5c3fcd9f.png)
1. VSCodeのコマンドラインでnodeのバージョンが最新であることを確認できる。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/8c05ee46-6694-437e-f5d2-ba808130270c.png)

<br />

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

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

Dockerfileをいじって行う。

#### 手順

1. Dockerfileを開く。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/02cb3929-6ed9-e867-5176-8243f22a3332.png)

1. 最終行に`RUN su node -c "npm install -g gatsby-cli"`を追加。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/d9ca961a-0b35-2e09-9675-6af7650327e0.png)
1. 左下の緑のバーをクリックして、Rebuild Containerを選ぶ。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/2b193a07-82fc-d8d8-1eb9-372a31988205.png)
1. 完成しました。`gatsby --version`とVSCodeのコンソールで打ってみて下さい。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ec458b52-8b77-625e-7e16-7421dd1b8070.png)
1. 最新バージョンの4.14.0がインストールされました。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/8c94fe04-9340-e8c1-6499-55b134b8d912.png)


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


### 確認

まったくいじらなかったDockerの画面を見てみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/403f2a7b-5fd3-e48f-7f69-7deea5d2a046.png)

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

<br />

# 宣伝
静的サイトジェネレーターGatsbyの基本とnode APIの扱いについて踏み込んで解説・ハンズオンした電子書籍を上梓しましたので、よろしければお手に取ってみて下さい。
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B08DKQ1Q9S/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08DKQ1Q9S&linkCode=as2&tag=kokkahasan-22&linkId=949a4f99a02426849ca38c075e980b98"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B08DKQ1Q9S&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kokkahasan-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B08DKQ1Q9S" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B08DKQ1Q9S/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08DKQ1Q9S&linkCode=as2&tag=kokkahasan-22&linkId=4cd07e4678a3580955e9569f60d7ae6f">JAMStackを学ぼう Gatsby, React bootstrap, Netlifyでつくる企業サイト ～もうレンタルサーバーはいらない～</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B08DKQ1Q9S" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

<br />

GatsbyとmicroCMSを組み合わせてのコーポレートサイト作成手順を解説・ハンズオンした続編を上梓しました。どうぞお手に取ってみて下さい。
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B08KRPTW2R/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08KRPTW2R&linkCode=as2&tag=kokkahasan-22&linkId=d161de66a32957b65318849c9ec93faf"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B08KRPTW2R&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=kokkahasan-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B08KRPTW2R" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B08KRPTW2R/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08KRPTW2R&linkCode=as2&tag=kokkahasan-22&linkId=5ad235bbd59c9c43c5492687fb840791">JAMStackを学ぼう GatsbyとmicroCMSでつくるコーポレートサイト ～WordPressはもう古い～</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&l=am2&o=9&a=B08KRPTW2R" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

<br />