React部署Choreo后路由跳转404及文件不存在错误求助

你的问题是React单页应用(SPA)的客户端路由在Nginx下未正确生效：直接访问子路径（如/dashboard）时，Nginx会尝试在服务器上查找对应物理文件，但React路由是客户端控制的，服务器不存在/dashboard这个文件，因此返回404。你的try_files规则逻辑正确，但问题出在Nginx没有加载到你的自定义配置文件。

具体修正步骤 #

1. 调整Nginx配置文件的复制路径 #

你的Dockerfile中将nginx.conf复制到了/usr/share/nginx，但这个目录不是Nginx的配置加载目录。对于nginxinc/nginx-unprivileged镜像，默认会加载/etc/nginx/conf.d/*.conf下的配置文件，你需要将自定义配置替换默认的default.conf。

修改Dockerfile中的COPY指令：

# 替换原有COPY nginx.conf的行
COPY nginx.conf /etc/nginx/conf.d/default.conf

2. 确认Nginx配置内容（现有规则无需修改） #

你的nginx.conf规则是正确的，确保内容如下：

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 优先匹配物理文件，找不到则转发到index.html交给React路由处理
        try_files $uri $uri/ /index.html;
    }
}

3. 可选：验证Nginx配置有效性 #

构建镜像后，可临时运行容器检查配置是否合法：

docker run -it --rm <你的镜像名称> nginx -t

如果输出显示test is successful，说明配置加载正常。

4. 重新构建并部署到Choreo #

修改完成后重新构建Docker镜像，推送至Choreo指定的镜像仓库，重新部署应用即可。

额外注意点 #

• 确保React项目使用的是BrowserRouter（而非HashRouter），HashRouter会在路径前添加#，不会触发服务器请求，但BrowserRouter必须依赖Nginx的配置支持才能正常工作。
• 检查Choreo的路由映射设置，确保外部请求的路径能正确转发到容器的8080端口。

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