Azure Web App容器化React应用：Nginx移除$uri/致404问题排查

核心问题：路径拼接错误引发404 #

报错里的/etc/nginx/htmlindex.html是典型的路径拼接缺斜杠导致的——Nginx把root路径和index文件名直接连在一起，没自动补斜杠。这和你移除$uri/后路由规则被打破，同时自定义配置的root或index指令存在问题有关。

疑惑1：为啥出现/etc/nginx/html路径？ #

这是Nginx的默认root路径，如果你的自定义nginx.conf没正确覆盖默认配置，或者Docker Compose部署时配置文件挂载/加载失败，Nginx就会 fallback 到这个默认目录。

• 检查Dockerfile里是否正确把自定义配置复制到指定位置，比如：

  COPY nginx.conf /etc/nginx/conf.d/default.conf
  

• 检查Docker Compose的配置文件挂载路径（如果用挂载），避免映射错误导致配置没生效。

疑惑2：为啥不去/usr/share/nginx/html/找文件？ #

只有当Nginx的root指令明确设为/usr/share/nginx/html时，才会去这个目录查找。出问题的原因可能是：

1. 自定义配置里的root或index指令有语法问题，导致Nginx没加载到正确配置，转而用默认路径；
2. 移除$uri/后，丢失了自动补全目录斜杠的逻辑，访问根路径时没正确触发index文件查找，反而错误拼接了路径。

修复步骤 #

针对React这类SPA应用，正确的Nginx配置要兼顾路由 fallback 和路径正确性：

1. 修正Nginx配置，确保root、index指令正确，同时保留SPA路由支持：

   server {
       listen 80;
       server_name localhost;
   
       root /usr/share/nginx/html;
       index index.html index.htm;
   
       # SPA路由核心规则：非静态资源请求都跳转到index.html
       location / {
           try_files $uri $uri/ /index.html; # 这里的$uri/是处理目录请求的，别直接删
       }
   
       # 静态资源缓存（可选）
       location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   }
   

   要是实在不想保留$uri/，可以改成：

   location / {
       try_files $uri /index.html;
       # 这样访问目录时直接返回index.html，SPA一般不需要目录列表
   }
   

2. 确保Dockerfile正确复制配置和静态文件：

   # 构建React应用
   FROM node:18-alpine as build
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   # 部署到Nginx
   FROM nginx:alpine
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   COPY --from=build /app/build /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

3. 检查Docker Compose配置，避免挂载冲突：

   version: '3.8'
   services:
     react-app:
       build: .
       ports:
         - "80:80"
       # 调试时挂载配置文件的话，确保路径正确
       # volumes:
       #   - ./nginx.conf:/etc/nginx/conf.d/default.conf
   

4. 验证配置：进入容器执行nginx -t检查语法，再用cat /etc/nginx/conf.d/default.conf确认配置内容正确。

总结 #

• /etc/nginx/html是Nginx默认root路径，说明你的自定义配置没生效或有语法错误；
• htmlindex.html是路径拼接缺斜杠导致的，本质是配置未正确加载或路由规则错误；
• try_files $uri $uri/ /index.html是SPA的标准配置，别随便删$uri/，除非你明确不需要处理目录访问。

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