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

初Qiita投稿です！

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

そもそもなぜDockerを使ったのか

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

ハマったポイントの要約

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

導入手順

① Dockerの導入

ここから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参考の作業です。

⑤ 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の導入が確認できました！

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

その他

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

⑥ VS CODEの導入

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

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

参考記事

導入参考

不具合調査の参考

WSL使った場合の構築メモ

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