构建新Docker镜像后VueJS项目内容未更新问题咨询

1. 浏览器强缓存：Vue打包的静态资源如果未配置哈希后缀，或是Nginx默认设置了较长的静态资源过期时间，浏览器会直接读取本地缓存的旧资源，不会请求服务器的新内容，重启电脑后缓存被清理所以能看到更新。
2. Nginx内核缓存问题：官方nginx:stable-alpine镜像默认开启sendfile参数，容器环境下偶发会出现文件更新后内核缓存未同步的问题，导致Nginx仍然返回旧的静态文件，重启系统会清空内核缓存所以恢复正常。
3. 镜像构建/容器启动流程不规范：使用docker-compose启动时如果没有加--build参数，即使本地构建了新镜像，docker-compose仍然会使用本地缓存的旧镜像创建容器；如果旧容器没有被彻底删除就启动新容器，也会复用旧容器的运行状态。
4. 镜像标签复用冲突：每次构建新镜像都使用vuejs/youtas-v0.2相同标签，旧的镜像层没有被正确覆盖，Docker会优先调用缓存的旧镜像层，导致新的代码变更没有被打进镜像里。

临时验证方法 #

• 访问页面时按Ctrl+Shift+R强制刷新跳过浏览器缓存，快速验证是否为浏览器缓存问题
• 进入vue-nginx容器内检查静态文件内容，确认新镜像的打包产物是否正确复制进去：

  docker exec -it $(docker ps -q --filter "name=vue-nginx") cat /usr/share/nginx/html/index.html
  

  如果返回内容是旧的，说明镜像构建环节有问题；如果内容是新的，就是缓存或Nginx配置问题。

永久解决方法 #

1. 规范部署命令，每次更新代码后执行以下命令启动服务，避免复用旧资源：

   docker-compose down && docker-compose up -d --build --force-recreate
   

   --build参数会强制重新构建镜像，--force-recreate会强制删除旧容器创建新容器。
2. 自定义Nginx配置，关闭sendfile并优化缓存策略：
   在Vue项目根目录新建nginx.conf文件，内容如下：

   user  nginx;
   worker_processes  auto;
   
   error_log  /var/log/nginx/error.log warn;
   pid        /var/run/nginx.pid;
   
   events {
       worker_connections  1024;
       use epoll;
   }
   
   http {
       include       /etc/nginx/mime.types;
       default_type  application/octet-stream;
   
       # 关闭sendfile避免内核缓存不同步
       sendfile off;
       tcp_nopush on;
       keepalive_timeout 65;
   
       server {
           listen 80;
           server_name localhost;
           root /usr/share/nginx/html;
           index index.html;
   
           # html文件设置不缓存，每次都请求最新
           location ~* \.(html)$ {
               add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
               expires -1;
           }
   
           # 带哈希的静态资源设置长期缓存
           location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
               expires 1y;
               add_header Cache-Control "public, immutable";
           }
       }
   }
   

   之后修改Vue对应的Dockerfile，在COPY --from=build-stage行之后添加配置复制逻辑：

   COPY nginx.conf /etc/nginx/nginx.conf
   

3. 优化镜像标签规则，每次构建新镜像时使用不同的标签（比如带上版本号、构建时间或Git Commit哈希），避免标签复用导致的缓存问题。
4. 定期清理Docker残留无用资源：

   docker system prune -f
   

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