Docker环境Nginx多location部署双Angular应用路径匹配异常

该问题由三处配置错误共同导致：

1. Location匹配规则写法错误
   • 配置中location /backend/仅能匹配带尾斜杠的/backend/xxx路径，访问无尾斜杠的/backend时，该规则不满足前缀匹配要求，会直接命中优先级最低的/规则，因此日志显示请求被转发到了前台站点的webpage目录。
   • 后续尝试的location ^~ \/backend\/写法完全无效：前缀匹配不需要给斜杠加反斜杠转义（转义是正则匹配的语法），规则中携带的反斜杠属于非法匹配字符，无法命中任何正常请求，相当于该规则未生效。
2. Nginx配置加载逻辑错误
   直接将仅包含location块的配置覆盖到Nginx主配置文件/etc/nginx/nginx.conf，但主配置文件必须包含events、http等外层块结构才能被Nginx正常解析加载，配置无效时Nginx会回退到默认配置，无论怎么修改location规则都不会产生效果。
3. 单页应用适配缺失
   • 部署在子路径的Angular应用构建时未指定base-href，会导致页面加载JS/CSS等静态资源时路径解析错误。
   • 未配置try_files规则，Angular为单页应用，前端路由刷新时会直接返回404。
   • 在location块重复引入mime.types，可能引发资源类型加载冲突。

1. 修正Angular后台构建配置 #

后台应用部署在/backend/子路径，构建时必须指定base路径，修改Dockerfile中后台的构建命令：

# 将原RUN npm run build命令替换为
RUN npm run build -- --base-href /backend/

也可以直接在angular.json中找到后台项目的构建配置，将baseHref参数值设置为/backend/。

注意：Angular 16+默认构建输出路径为dist/[项目名]/browser，构建后需确认输出目录的文件层级，保证后续文件拷贝路径正确。

2. 修正Dockerfile配置 #

不要直接覆盖Nginx主配置文件，改为将自定义服务配置写入Nginx默认的配置加载目录，避免结构错误：

# Nginx运行阶段配置
FROM nginx:latest
# 如果Angular构建输出存在browser目录层，需要补全源路径，例如/usr/local/app/dist/webpage/browser
COPY --from=build-webpage /usr/local/app/dist/webpage /usr/share/nginx/html/webpage
COPY --from=build-backend /usr/local/app/dist/backend /usr/share/nginx/html/backend
# 替换默认站点配置，不覆盖主配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

3. 修正Nginx配置 #

将nginx.conf内容替换为如下完整服务配置，移除冗余配置，补全路由重定向和单页应用支持：

server {
    listen 80;
    server_name mydomain.com;

    # 前台站点匹配规则
    location / {
        root /usr/share/nginx/html/webpage;
        index index.html index.htm;
        # 适配Angular前端路由，刷新页面不返回404
        try_files $uri $uri/ /index.html;
    }

    # 后台站点匹配规则
    location ^~ /backend {
        # 无尾斜杠访问/backend时，自动跳转到/backend/，避免相对路径解析错误
        rewrite ^/backend$ /backend/ permanent;
        root /usr/share/nginx/html;
        index index.html index.htm;
        # 后台路由回退到后台入口文件，避免跳转到前台页面
        try_files $uri $uri/ /backend/index.html;
    }
}

重新构建镜像启动容器后，按顺序验证即可：

• 访问mydomain.com可正常打开前台站点
• 访问mydomain.com/backend会自动跳转到mydomain.com/backend/，正常打开后台
• 刷新前后台的任意子路由页面，不会出现404错误
• 页面加载的JS/CSS/图片等静态资源路径正常，无404报错

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