Windows10のDocker×VSCode環境でReactを動かすまでの道のり

初Qiita投稿です！

現在React Bootcampに参加しており、
Windows10でのDockerを使った環境構築で躓いたポイントがあったので共有します。

https://react-nagoya.connpass.com/event/220664/

# そもそもなぜDockerを使ったのか
もともとNodistで構築しようとしていたが過去に手動で導入したNode.jsと干渉しまくってうまく動作しなかった。
調べていく中で以下の記事にたどり着きNodistではなくDockerで構築することに。

https://zenn.dev/ymasaoka/articles/note-uninstall-nodish-windows

# ハマったポイントの要約
- docker-compose.ymlでエラーが出まくる
    - →ファイルの文字コードをUTF-8に変更したら直った
- Docker上のReactアプリにアクセスできない
    - →Docker立ち上げ時にポート開放を行う

# 導入手順
## ① Dockerの導入

https://www.docker.com/

ここからWindows用のインストーラーを入手。
インストーラーに従ってインスールすればOK。

## ② docker-compose.ymlファイルを作成
```docker-compose.yml
version: '3'

services:
  app:
    # 起動するイメージを指定
    image: node:16.6.1

    # コンテナを起動させ続ける
    tty: true

    # ホスト:コンテナのポート 
    ports:
      - '3000:3000'
    
    # ソースコードを格納するフォルダをマウント
    #（ホスト側の./srcをコンテナの/appにマウント）
    volumes:
      - ./src:/app

    # 起動時のカレントフォルダを指定（npx create-react-appで作ったディレクトリを指定）
    working_dir: /app/reactbootcamp-youtube

    # 起動後に実行するコマンドを指定
    command: npm run start  
    
    # 標準入出力とエラー出力をコンテナに結びつける設定
    stdin_open: true
```
docker-compose.ymlで何度もエラーが出ていたのですが、
結論ファイルの文字コードが原因でした。
こちらはUTF-8に変更すれば直りました。

## ③ Dockerを起動 ※ここが一番重要※
起動コマンド

```
# 起動コマンド
docker-compose run --rm -p 3000:3000 app /bin/bash
```

元々は以下のコマンドを打っていました。

```
# エラーが出ていたコマンド
docker-compose run --rm app /bin/bash
```

このあとコンテナ内でReact立ち上げた際にhttp://localhost:3000/ にアクセスすると以下のエラーが発生していました。

```
# エラー内容
このページは動作していませんlocalhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE
```
そもそもdocker-compose.ymlファイルにport設定していたので意識していなかったのですが、
ReactBootCampに参加されている方々のアドバイスを元起動オプションでport3000を指定するとその後React起動し問題なく動作するようになりました！

（補足：2021年8月12日）
ymlファイルに書いたport番号をマッピングするには--service-portsオプションが必要だったみたいです。
今は以下のコマンドで起動しています。

```
docker-compose run --service-ports --rm app /bin/bash
```

## ④ ReactProjectsの作成 ※ReactBootCamp用※

```
npx create-react-app reactbootcamp-youtube --template typescript
```

ここからは以下git参考の作業です。

https://github.com/Hiro-mackay/react-bootcamp/tree/bootcamp-1

## ⑤ Reactの起動

```
# 起動ディレクトリに移動（ReactBootCampの場合）
cd reactbootcamp-youtube

#コマンド
npm run start

#出力
Compiled successfully!

You can now view youtube in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.100.145:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
```

ここでhttp://localhost:3000 にアクセスすると無事にReactの導入が確認できました！
![unknown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258465/2c63e2a9-533d-655e-bd37-3b852a54321f.png)

導入開始から色々あって6時間ぐらいかかりました 笑
導入サポートいただけた方々ありがとうございました！

## その他
色々環境変えてエラー多発したらコマンドプロンプト再起動する
そもそもDocker起動忘れていたことも

## ⑥ VS CODEの導入

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ここからインスール。
インスール終わったら以下の拡張機能をインスールする。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

ここからF1を押してコマンドパレットから以下手順でDockerコンテナに接続。
① 「Remote-Containers: Open Folder in Container...」を選択
② ReactBootcampフォルダを選択
③ 「From 'docker-compose.yml'」を選択


# 参考記事
## 導入参考
https://ishida-it.com/blog/post/2019-11-21-docker-nodejs/

https://ishida-it.com/blog/post/2019-11-22-docker-nodejs-vscode/

## 不具合調査の参考
https://qiita.com/amuyikam/items/01a8c16e3ddbcc734a46

https://blog.ikedaosushi.com/entry/2018/07/23/191952

## WSL使った場合の構築メモ

https://qiita.com/nekonekonekosan/items/61a6b9d4da6bdfd1d0bb

※Docker構築でエラーでまくってましたが、上記はすんなり構築できました 笑