Reactでコード変更時の更新にかかる時間を短くしたい

前提・実現したいこと

DockerでReactの開発環境を構築しています。
React初心者のため、チュートリアル的なコードを書いてみたのですが下記のコードの「hello」を別の文字に変更してブラウザ(localhost:3000)を更新した際、新しい文字が反映されるまで10秒ほどかかってしまいます。
更新にかかる時間を短縮する方法はあるのでしょうか。解決策をご存知の方がいればご教示ください。

環境など
MacOS Big Sur 11.1
ブラウザ : googlechrome
create-react-appを使用
react 17.0.1
npm 7.4.0

React内のコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Reactテスト</title>
6  </head>
7  <body>
8    <div id="root"></div>
9  </body>
10</html>

index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from "./App";

ReactDom.render(<App />, document.getElementById("root"));

App.js

import React from 'react';

const App = () => {
  return (
    <h1>hello</h1>
  );
};

export default App;

package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "babel": "babel src/index.js -o compiled.js"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

###Dockerのコード
docker-compose.yml

version: '3'

services:
  node:
    container_name: node
    build: ./docker/node
    stdin_open: true
    volumes:
      - ./frontend:/usr/src/app
    command: sh -c "cd reactapp && yarn start"
    ports:
      - "3000:3000"

Dockerfile

FROM node
WORKDIR /usr/src/app

hoshi-takanori

2021/02/10 06:36

Mac で React するのに docker が必要なんですか？

arubina33

2021/02/10 06:56 編集

個人的なReactの練習ではなく、インターン先の課題のようなものでバックエンド側も含めた環境構築にdockerを使うことを指定されているためです。 docker-composeにはnodeの部分だけを抜き出して記載しています。

hoshi-takanori

2021/02/10 07:16

なるほど。自分は macOS 上では docker を使ってないのでよく知りませんが、macOS のボリュームを docker からマウントすると遅いようですね。 https://blog.hanhans.net/2020/11/28/docker-for-mac-slow-again/

arubina33

2021/02/10 07:46

dockerのボリュームマウントの設定を変更したところ問題が解決しました。ありがとうございます。

行動規範の内容に同意します

回答1件

自己解決

dockerのボリュームマウントの設定を変更すると解決しました

参考サイト : Macのdockerが遅いストレスから解放されよう
docker-compose.ymlのvolumesの最後に「:delegated」を追加するとファイルのセーブ直後に変更内容がブラウザに反映されるようになりました。

docker-compose.yml

version: '3'

services:
  node:
    container_name: node
    build: ./docker/node
    stdin_open: true
    volumes:
      - ./frontend:/usr/src/app:delegated 
    command: sh -c "cd reactapp && yarn start"
    ports:
      - "3000:3000"

投稿2021/02/10 07:54

arubina33

総合スコア4