基于Docker与Nginx部署Create React App遇空白页问题求助

哥们，我太懂这种反向代理后React应用突然白屏的糟心事儿了！之前踩过一模一样的坑，咱们一步步来把它搞定：

核心问题根源 #

Create React App默认是按域名根路径部署来打包的，所以静态资源（js、css）的引用路径都是绝对路径（比如/static/js/main.xxx.js）。当你把应用挂在/mycms子路径下时，浏览器会去请求https://myweb.com/static/...而不是https://myweb.com/mycms/static/...，直接404找不到资源，页面自然就空白了。

分步解决方案 #

1. 给React应用配置子路径前缀 #

首先得告诉React它要部署在/mycms下，有两种简单的方式：

• 方式一：修改package.json
  在你的React项目根目录的package.json里加一行：

  "homepage": "/mycms"
  

• 方式二：构建时指定环境变量
  直接在构建命令里带上前缀：

  PUBLIC_URL=/mycms npm run build
  

  两种方式效果一样，都会让打包后的静态资源引用自动加上/mycms前缀，比如变成/mycms/static/js/main.xxx.js。

2. 调整Nginx的反向代理配置 #

仅仅写proxy_pass是不够的，还得处理路径重写和单页应用的路由问题。把你的Nginx配置改成这样：

location /mycms {
    # 反向代理到React容器的5000端口
    proxy_pass http://MyCMS:5000;
    # 传递必要的请求头，确保容器能正确识别请求
    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;

    # 关键：把/mycms前缀去掉后再转发给容器
    # 因为容器里的serve是在根路径提供服务的，不需要/mycms前缀
    rewrite ^/mycms(.*)$ $1 break;
}

# 如果你的React用了客户端路由（比如react-router的BrowserRouter），必须加这个配置！
# 处理刷新页面时的404问题，把所有非静态资源的请求都指向index.html
location /mycms/ {
    try_files $uri $uri/ /mycms/index.html;
}

3. 确保React容器以生产模式正确运行 #

别用开发服务器（npm start）跑生产环境！一定要用serve命令托管打包后的build文件夹，而且要加-s参数开启单页应用模式：

1. 先在React项目里执行npm run build生成build文件夹
2. 容器的启动命令改成：

   serve -s build -l 5000
   

   （-l 5000指定端口为5000，和Nginx配置里的一致）

4. 重启服务验证 #

• 重启Nginx容器：docker restart [你的Nginx容器名]
• 重启React容器，确保它是用上面的serve命令启动的
• 打开浏览器访问https://myweb.com/mycms，同时打开开发者工具的Network标签，检查js、css文件的请求URL是不是https://myweb.com/mycms/static/...——如果是，那问题就解决了！

额外排查点 #

如果还是有问题：

• 看浏览器控制台的错误信息，是404还是其他错误？
• 确认Nginx容器和MyCMS容器确实在同一个Docker网络里：docker network inspect [你的网络名]，看看两个容器都在列表里吗？
• 检查MyCMS容器本身能不能正常访问：在Nginx容器里执行curl http://MyCMS:5000，看能不能拿到index.html的内容。

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