Docker构建React应用不删除旧镜像重编译时静态chunk文件报404错误

问题出在你定义的react_static_volume命名卷的挂载逻辑上
Docker的命名卷默认行为是：只要卷已经在宿主机上创建存在，后续容器启动挂载该卷时，会直接复用宿主机卷内的已有内容，不会用新镜像对应目录下的文件覆盖卷内容。你每次构建React项目生成的静态文件都会带新的哈希后缀，旧哈希的文件已经不存在于新镜像里，但旧卷里还是旧的文件，同时新镜像的新哈希文件没有被同步到卷中，nginx配置又是优先读取react_static_volume里的静态资源，就会出现旧缓存的HTML引用的旧哈希文件找不到，或者新HTML引用的新哈希文件不在卷里的404错误。
你删除旧镜像的时候连带删除了关联的旧卷，所以重新启动会用新镜像的内容初始化新卷，就不会报错，Elastic Beanstalk不重建环境直接部署的本质也是旧的命名卷没有被清空，复用了旧内容。

可选解决方案 #

方案1：移除静态资源卷挂载，直接让nginx代理react服务的静态资源 #

你现在的配置同时做了两层静态资源处理：既把react的static目录挂载到卷共享给nginx，又让nginx根路径代理react的serve服务。完全可以删掉卷挂载的逻辑，所有静态资源直接走react服务返回，不需要共享卷，从根源避免卷内容不同步的问题：

• 删掉docker-compose.yml中react服务下的volumes配置段里的- react_static_volume:/usr/src/app/build/static
• 删掉nginx服务下的volumes配置段里的- react_static_volume:/usr/src/app/react_files/static
• 删掉nginx.conf里的location /static/ { alias /usr/src/app/react_files/static/; }配置，所有静态资源会自动走根路径的代理规则到react服务读取。

方案2：每次构建前清理旧的命名卷 #

如果要保留现有静态资源通过nginx直接返回的架构，每次重新构建启动时添加-v参数自动删除旧卷：
执行命令替换为docker-compose up --build -v，或者单独执行docker volume rm 你的项目名_react_static_volume清理旧卷后再启动。

方案3：改为使用绑定挂载而非命名卷 #

将react的static目录直接绑定挂载到宿主机的指定目录，每次构建后新的文件会自动覆盖宿主机目录内容，不会出现残留：
修改docker-compose.yml的volumes段，把命名卷改为宿主机相对路径挂载即可。

内容的提问来源于stack exchange，提问作者nmt2