Nginx+Docker环境下热重载无法自动识别CSS变更的解决问询

我用Nginx搭配Docker部署服务，请求会代理到Express后端。修改CSS源文件后，http://localhost:3000/上的应用没法自动识别变更，必须手动访问http://localhost:3000/css/main.css刷新浏览器，再返回主页才能看到修改效果。下面是我的相关配置，求可行的解决办法。

version: '3'
services:
  dev-nginx:
    build:
      context: ./nginx/
    container_name: dev-nginx
    links:
      - dev-node
    ports:
      - "3000:3000"
      - "443:443"
    volumes:
      - ./client/dist:/usr/share/nginx/static
  dev-webpack:
    build:
      context: ./client
    container_name: dev-webpack
    volumes:
      - ./client/:/app
      - /app/node_modules
    ports:
      - "8080:8080"
  dev-node:
    build:
      context: ./server/
    container_name: dev-node
    environment:
      - CHOKIDAR_USEPOLLING=true
      - NODE_ENV=development
      - PORT=3000
    volumes:
      - ./server/:/app
      - /app/node_modules

upstream backend {
  server dev-node:3000;
}
server {
    listen       3000;
    server_name  localhost;
    root   /usr/share/nginx/static;
    access_log  /var/log/nginx/host.access.log  main;
   location ~* \.(js|css|map|png|jpg|jpeg|gif|ico)$ {
        expires 1d;
    }
    location ^~ /(audio|build|images|style) {
        autoindex on;
    }
    location / {
      proxy_pass http://backend;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
    }
    location ~ /\.ht {
       deny  all;
    }
 }

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    #sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

问题核心是Nginx给静态资源设了1天的长缓存，浏览器直接读本地旧缓存，不会主动拉取更新后的CSS。结合开发环境需求，按以下步骤调整：

1. 重置开发环境静态资源缓存策略 #

修改Nginx站点配置里的静态资源规则，把CSS、JS这类高频更新的资源缓存禁用或设极短过期时间：

# 针对JS/CSS/SourceMap禁用缓存
location ~* \.(js|css|map)$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}
# 图片、图标这类低频变更的资源保留长缓存
location ~* \.(png|jpg|jpeg|gif|ico)$ {
    expires 1d;
}

2. 确认Webpack编译产物同步正常 #

检查Webpack配置的输出目录是否为./client/dist，确保Docker卷挂载能让容器内的编译产物实时同步到宿主机的./client/dist（也就是Nginx挂载的目录）。如果Webpack热更新没生效，还可以在Webpack配置里开启hot: true。

3. 开发环境直接代理Webpack Dev Server（可选） #

如果想利用Webpack的热重载实时更新，可让Nginx把静态资源请求直接转发到dev-webpack服务，不用依赖文件同步：
修改Nginx站点配置，添加如下规则：

location ~* \.(js|css|map)$ {
    proxy_pass http://dev-webpack:8080;
    expires -1;
    add_header Cache-Control "no-cache";
}

同时注释掉原来指向本地静态目录的缓存规则，这样修改CSS后，Webpack会实时推送更新到页面。

内容的提问来源于stack exchange，提问作者Taste of Leaving