Nginx与Docker配置：隐藏URL端口并解决React代理页面空白问题

这问题我之前帮人排查过好几次，核心原因是React项目的静态资源路径和路由没有适配子路径，加上Nginx的代理配置没处理好静态资源请求，导致组件加载失败。咱们一步步来解决：

第一步：调整React项目的子路径配置 #

不管你用的是Create React App、Vite还是其他构建工具，都需要让React知道它运行在/cv这个子路径下，这样它生成的静态资源路径、路由都会自动加上/cv前缀：

• Create React App：在package.json里添加一行：

  "homepage": "/cv"
  

  然后重新执行npm run build，把构建后的文件重新部署到容器里。
• Vite：在vite.config.js（或.ts）里修改base配置：

  export default defineConfig({
    base: '/cv/',
    // 其他配置...
  })
  

  同样重新构建部署。
• 如果用React Router（BrowserRouter）：确保路由的basename设置为/cv：

  <BrowserRouter basename="/cv">
    {/* 你的路由组件 */}
  </BrowserRouter>
  

第二步：修正Nginx的代理配置 #

之前的proxy_pass只处理了/cv根路径的请求，但React的静态资源（比如/cv/static/js/xxx.js）和路由刷新的情况没处理好，调整后的配置如下：

events {}
http {
    server {
        listen 80;
        server_name 1.1.1.1;
        port_in_redirect off;

        location / {
            return 200 'This is nginx stroke';
        }

        # 处理/cv路径的所有请求
        location /cv {
            proxy_pass http://localhost:4001;
            # 传递必要的请求头，确保容器能正确识别请求来源
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 关键：处理React Router的刷新场景，以及静态资源的路径匹配
            try_files $uri $uri/ /cv/index.html;
        }
    }
}

为什么之前的配置会失效？ #

你之前的proxy_pass http://localhost:4001只代理了/cv这个路径的请求，但当React加载静态资源时，它会请求/cv/static/xxx这类路径，而如果Nginx的location /cv没有正确匹配这些子路径（或者没有用try_files处理路由刷新），这些请求要么走到根location返回那个文本，要么返回404，导致组件无法加载。

最后一步：重启服务 #

修改完React配置并重新构建部署后，重启你的Docker容器，然后重启Nginx服务（sudo nginx -s reload），再访问http://1.1.1.1/cv应该就能正常显示React组件了。

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