VSCode > Remote Containers > Reactの環境を作って、create-react-ap




環境

Mac：Catalina
docker: 19.03.13
docker desktop for mac
Dockerはインストール済みとする。


# 環境準備

拡張機能である、Remote-Containersを入れる

![スクリーンショット 2020-10-24 18.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/79c0ee6d-5fa2-e240-af92-621a06342d58.png "スクリーンショット 2020-10-24 18.44.09.png")


# VSCodeを起動

適当な加フォルダでVSCodeを開きます（中身はからっぽでOK）


![スクリーンショット 2020-10-24 18.35.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/d7e9cc17-67d5-2579-d15a-5a7f314fad5d.png "スクリーンショット 2020-10-24 18.35.01.png")


# 開発コンテナ設定ファイルの作成

表示 > コマンドパレットを開く

`Remote-Containers: Add`まで打ち込んだら表示される、`Remote-Containers: Add Development Container Configuration Files... `を選択します。

![スクリーンショット 2020-10-24 18.46.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/7af9e3a3-6df2-ea93-cf6f-7ed4f92eb439.png "スクリーンショット 2020-10-24 18.46.13.png")


Show All Definitions...を選択します。


![スクリーンショット 2020-10-24 18.48.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/e3715c4b-7477-c973-c856-1ce65775feb8.png "スクリーンショット 2020-10-24 18.48.07.png")



検索BOXに`node` と入力し、`Node.js & Typescript`を選択します。
![スクリーンショット 2020-10-24 18.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/a4192b27-61f9-a4be-b160-57ece9d81858.png "スクリーンショット 2020-10-24 18.50.28.png")


バージョンは現時点最新の14を選択しときます
![スクリーンショット 2020-10-24 18.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/8cd8310a-9265-4c75-3036-32a3fd6f596e.png "スクリーンショット 2020-10-24 18.53.49.png")


これで設定ファイルが追加されました。

![スクリーンショット 2020-10-24 18.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/9b63e652-cd75-529b-1d9e-d746db3cc100.png "スクリーンショット 2020-10-24 18.54.20.png")


# React設定の追加　

### Dockerfile

Dockerfileの17行目あたりに`create-react-app`のインストールを追加する

```:Dockerfile
# [Optional] Uncomment if you want to install more global node packages
# RUN sudo -u node npm install -g <your-package-list -here>
RUN sudo -u node npm install -g create-react-app
```

### devcontainer.json

ポートフォワードの設定を行う。
23行目あたりのポートフォワードのコメントを外して3000と入力する。

```:devcontainer.json
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [3000],
```



# Dockerの有効化

左下のアイコンをクリックし、
![スクリーンショット 2020-10-24 19.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/bf7dee8c-b816-535e-b07e-cc0c58bec16c.png "スクリーンショット 2020-10-24 19.03.49.png")

コマンドパレットに表示された`Containers:Rebuild and Reopen in Container`を選択する。

![スクリーンショット 2020-10-24 19.02.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/665d93a8-f838-2472-1396-3194b5f98e96.png "スクリーンショット 2020-10-24 19.02.12.png")


# react app の作成と実行

### 作成

ターミナルにて以下を打ち込む

```
npx create-react-app my-app
```

![スクリーンショット 2020-10-24 19.13.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/0d9a0eee-7f31-900d-3db8-57e9fcd5569a.png "スクリーンショット 2020-10-24 19.13.09.png")

しばらく待つとreact appの雛形が作成される。
（初回はかなり待たされる）

![スクリーンショット 2020-10-24 19.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/6561d841-3d9c-42bf-f5b2-5ea79ba04076.png "スクリーンショット 2020-10-24 19.16.36.png")


Happy hacking!が表示されたら完了

![スクリーンショット 2020-10-24 19.19.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/9db138bd-61f6-ced9-594a-a6af85ffd662.png "スクリーンショット 2020-10-24 19.19.43.png")


### 実行

環境作成が完了したら、ターミナルにて以下を打ち込む

```
cd my-app
npm start
```

しばらく待つと起動します。

![スクリーンショット 2020-10-24 19.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/cf1ca4b7-60fa-88d4-f704-6fd19ee92681.png "スクリーンショット 2020-10-24 19.22.49.png")




ブラウザにて http://localhost:3000 にアクセス！
以下の画面が表示されればOK
![スクリーンショット 2020-10-24 19.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/a0291efc-875e-44d3-232b-406fc7f50e76.png "スクリーンショット 2020-10-24 19.15.02.png")


Happy hacking!


# おまけ

Terminalに`warning: setlocale: LC_CTYPE: cannot change locale (ja_JP.UTF-8)`と表示されるときは

![スクリーンショット 2020-10-24 19.32.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/bf3faf19-270e-2e34-c54e-66e9ea710a22.png "スクリーンショット 2020-10-24 19.32.24.png")

Dockerfileに以下を追加することで解決します

```:Dockerfile
RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
```

# 参考


[How to use Visual Studio Code Remote Containers to develop Microsoft Teams apps · Garry Trinder](https://garrytrinder.github.io/2019/10/using-vscode-remote-containers-to-develop-msteams-apps)