初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
# 起動時のカレントフォルダを指定
working_dir: /app
# 起動後に実行するコマンドを指定
command: npm start
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起動し問題なく動作するようになりました！
④ 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構築でエラーでまくってましたが、上記はすんなり構築できました 笑
↧
