VSCodeのRemote-ContainerでReact(Node.js+TypeScript)環境をサクッと構築する。

##環境構築はDockerで作りたい。

Dockerに慣れてくると何でもDockerを使いたくなりませか？
僕はそんな人間の一人で、パソコンを買い換えてDockerを本格的に使い始めてから、手元の環境が汚れるのが嫌で環境構築は全てDockerを使っています。~~潔癖症かな?~~

今回は、VSCodeでDockerを使い倒すための神拡張機能のRemote-Containersを使って、JavaScriptのライブラリのReactの開発環境を作っていきます。

#####事前に準備が必要なもの
- Docker
- VSCode


##Remote-Containersを使って環境を作る

事前にDockerがインストールされているものとします。

拡張機能のDockerとRemote-Containers をインストールします。
<img width="757" alt="スクリーンショット 2020-07-21 11.16.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/f37a0f38-ca03-0338-fe62-25f8f636c2f5.png">

<img width="903" alt="スクリーンショット 2020-07-21 9.59.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/29381583-aac3-6379-aec0-bfdc91fbc395.png">

適当なフォルダを開いて、コマンドパレットから
Remote-Containers:Add Development Containers Configuration Files
を選択。
<img width="650" alt="スクリーンショット 2020-07-21 10.05.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/0e79da44-50d4-bae3-e747-2da394d8127c.png">

インストールしたい環境のサンプルが表示されるので、Show All Definitionsを選択し、
<img width="612" alt="スクリーンショット 2020-07-21 10.07.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/f85f3e59-5f6a-eba2-5694-b51b960ad55e.png">

最新版であるNode.js 14 & TypeScriptを選択。
<img width="609" alt="スクリーンショット 2020-07-21 10.07.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/6c849c59-64f2-66c0-2cd2-b86dbc429e7b.png">

そうすると.devcontainerフォルダが生成され、中にはMS社が用意してくれた指定した環境のDockerFileと追加設定を行うdevcontainer.jsonが保存されています。
<img width="1176" alt="スクリーンショット 2020-07-21 10.12.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/2a613f05-70a3-db70-495d-e38e90461c66.png">

<img width="1128" alt="スクリーンショット 2020-07-21 10.11.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/8ad2ebc2-2e74-0d55-0297-a046dc0b3fc8.png">

Reactを利用するにはコマンドラインツールのcreate-react-appを使うのがラクチンなので、これをnpmでインストールする設定をDockerFileに追記しておきます。
<img width="679" alt="スクリーンショット 2020-07-21 10.15.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/00bdab98-163f-ffbd-32bc-10d23bc1dc96.png">

また、コンテナ側の3000番ポートを使用することになるので、devcontinaer.jsonファイルにフォワードポートの設定を追記します。
<img width="812" alt="スクリーンショット 2020-07-21 10.17.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/cd1d0ef9-4f86-7355-be2e-0c8dbf72470a.png">

最後にこれらのファイルを元にDockerイメージとコンテナを生成します。拡張機能からRemote-Containers:Rebuild and Reopen in Container 実行。
（または右下に出てるであろうポップアップをクリック）
<img width="614" alt="スクリーンショット 2020-07-21 10.20.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/9680a8e1-63ba-39c7-c079-7e550486b61e.png">

<img width="634" alt="スクリーンショット 2020-07-21 10.23.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/14b483c2-c310-6e2a-9632-fe7d8bc8e70f.png">

画面が一度閉じ、再び開いたあと少し待つと、VScodeの左下がコンテナの中に入っていることを示す状態に変わっていると思います。
<img width="357" alt="スクリーンショット 2020-07-21 10.37.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/f7a40b07-588a-4cca-7dc5-753575a67961.png">

これでReactの環境は完成です。簡単！

##実際に動かしてみる

create-react-appを実際に使って、サンプルアプリを動かしてみます。

ターミナルを開いて、
```# npx create-react-app test 
```
を実行。必要なライブラリ一式がダウンロードされていきます。
<img width="973" alt="スクリーンショット 2020-07-21 10.51.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/beb483d5-fb2a-5054-7110-82307463cea8.png">

Happy hacking!の文字が出たら完了です。
testディレクトリが作成されており、中にはReactを動かすためのテンプレート になるファイルが生成されています。
<img width="423" alt="スクリーンショット 2020-07-21 10.59.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/9a05d902-b289-f54f-77a8-6d0d3eec8fb7.png">

こいつを動かしてみます。

```
# cd/test     //カレントディレクトリを移動
# npm start   //アプリを起動
```
アプリを起動したらlocalhost:3000にアクセス。下記のような画面が表示されていたら成功です！
<img width="1651" alt="スクリーンショット 2020-07-21 11.03.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/7dd7dc1f-d52b-993d-41af-a9eafcc40b54.png">

コンテナから抜けるには、VSCodeの画面を閉じるだけでコンテナOKです。
再びコンテナに入るには、VSCodeのDockerのオプションからお目当てのコンテナを右クリックして、Startをクリック。
<img width="274" alt="スクリーンショット 2020-07-21 11.21.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/d04eef29-d6e2-80bd-2835-394c4d94f23c.png">

そうするとコンテナが立ち上がるので、もう一度右クリックしてAttach Visual Studio Codeをクリックして完了です。
<img width="412" alt="スクリーンショット 2020-07-21 11.21.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270149/022c55ec-39a0-2ede-0980-90e56e85c709.png">



それでは、良いDocker & Reactライフを！