通过K8s ConfigMap加载JSON至Angular遇阻的技术问询

我有一个运行在K8s集群中的小型Angular Web应用，原本通过以下代码从assets/text_content文件夹读取JSON配置，在ngOnInit方法中可正常运行：

fetch('assets/text_content/albums.json').then(res => res.json()).then((result: AlbumItem[]) => { 
  result.sort((a: AlbumItem, b: AlbumItem) => new Date(b.eventDate).getTime() - new Date(a.eventDate).getTime());
}) 

现在我想通过ConfigMap实现该JSON的可配置化，已完成以下操作：

1. 修改NGINX配置：

location /assets/text_content/ {
    root /usr/share/nginx/html;
}

2. 创建ConfigMap：

apiVersion: v1
kind: ConfigMap
metadata:
  name: album-config
data:
  albums.json: |
    [
      {
        "eventDate": "2021-6-5",
        "eventName": "Toer",
        "albumUrl": "https://url.com"
      }
]

3. 更新Deployment配置：

volumeMounts:
  - name: config-volume
    mountPath: /usr/share/nginx/html/assets/text_content/albums.json
    subPath: albums.json
volumes:
  - name: config-volume
    configMap:
      name: album-config
      items:
        - key: albums.json
          path: albums.json

4. 通过Helm部署后，用以下命令验证Pod中对应路径已存在更新后的JSON文件：

kubectl cp test-pod-86cb8b45bf-24w4h:/usr/share/nginx/html/assets/text_content/albums.json ./albums.json

但Angular无法读取该文件，我有这些疑问：

• 这本质是替换静态文件，为何Angular无法识别？
• 是否和Dockerfile中的SSR实现有关？我需要保留SSR以提升网站可发现性，Dockerfile如下：

### STAGE 1: Build ###
FROM node:18.10-alpine AS build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build:ssr

### STAGE 2: Nginx ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /usr/src/app/dist/test /usr/share/nginx/html
EXPOSE 8080

### STAGE 3: Server Side Rendering (SSR)
FROM node:18.10-alpine AS ssr-server
COPY --from=build /usr/src/app/dist ./dist
COPY package.json ./
WORKDIR /usr/src/app
EXPOSE 8080
CMD ["npm", "run", "serve:ssr"]

• 文件被覆盖的假设是否正确？
• 已验证Pod中文件存在，还能做哪些调试？有没有直接的解决方案？
• Angular的fetch是否存在缓存？组件每次都会重新获取该JSON吗？

已确认ConfigMap工作正常，问题应该出在Angular相关机制上，寻求解答。

附完整NGINX配置：

server {
    listen       80; #80 is a MUST! letsencrypt only goes to port 80
    include /etc/nginx/mime.types;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    location /assets/text_content/ {
        root /usr/share/nginx/html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

   # Forward requests to the node container which
   # renders on the server side:
   location ~ ^/(public)$ {
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
     proxy_set_header Host $http_host;
     proxy_redirect off;
     proxy_pass http://127.0.0.1:80;
   }
}

核心问题拆解 #

1. 路径匹配错误：你的Dockerfile最终运行的是ssr-server阶段的Node容器，SSR服务读取的是/usr/src/app/dist目录下的构建产物，但你把ConfigMap挂载到了NGINX所在的/usr/share/nginx/html目录——两个路径完全独立，SSR根本读取不到你替换的文件。
2. Angular SSR的资源加载逻辑：Angular在SSR构建时会将静态资源的引用固化到构建产物中，动态替换物理文件无法被SSR服务直接感知，需要确保挂载路径与SSR实际读取的路径一致。

针对性解决方案 #

1. 修正ConfigMap挂载路径 #

确认Angular SSR构建后，assets/text_content/albums.json在dist中的位置为dist/test/assets/text_content/albums.json，修改Deployment挂载配置：

volumeMounts:
  - name: config-volume
    mountPath: /usr/src/app/dist/test/assets/text_content/albums.json
    subPath: albums.json
volumes:
  - name: config-volume
    configMap:
      name: album-config
      items:
        - key: albums.json
          path: albums.json

2. 调试步骤 #

• 查看SSR服务日志：执行kubectl logs <pod-name>，检查Node服务是否有文件读取错误。
• Pod内直接验证：进入Node容器，执行cat /usr/src/app/dist/test/assets/text_content/albums.json确认文件内容；再用Node命令行测试fs.readFile或fetch是否能正常读取该文件。
• 浏览器网络排查：打开开发者工具Network面板，查看assets/text_content/albums.json的请求状态、响应内容，确认是否返回404或旧缓存内容。
• 强制禁用缓存：在fetch请求中添加缓存控制参数，避免浏览器返回旧内容：

  fetch('assets/text_content/albums.json', { cache: 'no-store' })
    .then(res => res.json())
    .then(...)
  

疑问解答 #

• 为何替换静态文件Angular无法识别？：因为你挂载的路径错误，SSR服务读取的是dist目录而非NGINX目录，动态替换的文件不在SSR的资源搜索路径内。
• 是否和SSR有关？：是的，SSR依赖Node服务读取构建后的dist目录，逻辑和纯静态Angular应用完全不同，不能套用静态文件替换的思路。
• 文件覆盖假设是否正确？：之前的挂载路径错误，文件没有被覆盖到SSR实际读取的位置，假设不成立。
• fetch是否有缓存？：浏览器默认会缓存静态资源，组件每次执行ngOnInit都会触发fetch，但如果浏览器有缓存，会直接返回旧响应，可通过cache: 'no-store'或URL加时间戳参数规避。

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