容器前端项目不能在代码更改后自动刷新。

Question

几个月前，我有一个由docker和docker-compose.yml封装的前端项目。它很好，可以在我修改代码后自动刷新页面localhost:8080，下面显示了主要代码，

• docker-compose.yml

  client:
    build:
      context: ./client
      dockerfile: ./docker/local/Dockerfile
    restart: on-failure
    volumes:
      - ./client:/app
      - /app/node_modules
    networks:
      - myapp

  nginx:
    restart: always
    depends_on:
      - api
    volumes:
      - static_volume:/app/staticfiles
      - media_volume:/app/mediafiles
    build:
      context: ./docker/local/nginx
      dockerfile: Dockerfile
    ports:
      - "8080:80"
    networks:
      - myapp

configurations

• nginx

upstream client {
    server client:3000;
}


server {
    location /ws {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location / {
        proxy_pass http://client;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
    }
}

• .env文件

WDS_SOCKET_PORT=0
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true

• app.jsx

import React from "react";

const App = () => {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
};

export default App;

• package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

在进行代码更改之后，我可以进入容器，代码在内部发生变化，卷也可以工作。我不知道为什么前端包不会像几个月前那样更新。我重新安装了码头，换了一台新的个人电脑，但仍然没有运气.

有人能给我提供一些见解吗？

Answer 1

这是webpack的问题，如果我们将WATCHPACK_POLLING=true添加到.env文件中，自动刷新将正常工作。