运行Docker镜像时Nginx托管Angular应用报自定义路径权限错误

API 探路者

2026-9-3

问题原因

两个核心配置错误导致报错：

Dockerfile的COPY指令路径配置错误：COPY dist/app1/ /usr/share/nginx/html 会直接把app1构建产物下的所有文件平铺复制到nginx的html根目录，不会保留app1子文件夹；后续执行app2的COPY指令时，还会直接覆盖app1已复制的同名文件。最终nginx配置中指定的根目录/usr/share/nginx/html/app1、/usr/share/nginx/html/app2实际不存在，nginx访问对应路径时默认禁止列目录，直接返回403错误。
Nginx配置中匹配静态资源的正则location块为空，请求带后缀的静态资源时匹配到该规则后无任何处理逻辑，会额外引发静态资源加载异常。

修复方案

按以下步骤调整配置即可解决问题：

修正Dockerfile中的COPY指令，确保构建产物复制后保留app1、app2的子目录结构：

COPY dist/app1/ /usr/share/nginx/html/app1/
COPY dist/app2/ /usr/share/nginx/html/app2/

修正Nginx配置，补全静态资源location的处理逻辑，补充index配置，修正后的完整配置如下：

server {
  listen 8002;
  root /usr/share/nginx/html/app1;
  index index.html;
  expires $expires;

  location ~ \.[a-z]+$ {
    try_files $uri =404;
  }

  location / {
    try_files $uri $uri/ /index.html;
    add_header file-served index;
  }
}

server {
  listen 8003;
  root /usr/share/nginx/html/app2;
  index index.html;
  expires $expires;

  location ~ \.[a-z]+$ {
    try_files $uri =404;
  }

  location / {
    try_files $uri $uri/ /index.html;
    add_header file-served index;
  }
}

重新构建镜像后启动，即可正常通过8020、8021端口分别访问两个Angular应用。