Ubuntu服务器下如何用Nginx部署ReactDOM渲染的单页应用？

核心问题分析 #

你当前的部署方式存在冲突：既配置了Nginx反向代理到serve服务，又设置了root指向build目录，同时可能存在build产物不完整或服务未正确运行的情况，导致页面空白。下面提供两种可行的部署方案：

方式一：直接用Nginx托管静态Build文件（推荐） #

这种方式无需额外启动serve服务，直接让Nginx处理静态文件，性能更优，适合单页应用：

1. 确认Build产物完整
   在项目根目录重新执行npm run build，确保无报错，且服务器上/path/to/build/index.html不为空（可通过cat /path/to/build/index.html查看内容）。
2. 修改Nginx配置
   替换当前sites-available中的配置：

   server {
       root /path/to/build;  # 填写build目录的绝对路径，例如/var/www/my-react-app/build
       server_name name www.name;
   
       # SPA路由适配：路由不存在时返回index.html，交由React处理
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       # 静态资源缓存优化（可选）
       location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   }
   

3. 生效配置
   验证配置合法性：sudo nginx -t，无问题后重启Nginx：sudo systemctl restart nginx
4. 访问验证
   无需再运行serve -s build，直接通过域名访问即可。

方式二：反向代理到serve服务（不推荐，多一层开销） #

若坚持使用serve服务，需修正配置并确保服务持续运行：

1. 后台托管serve服务
   用pm2等工具让serve后台运行，避免终端关闭后进程终止：

   npm install -g pm2
   pm2 start serve -- -s build --port 3000
   

2. 修改Nginx配置
   删除root配置，避免冲突：

   server {
       server_name name www.name;
   
       location / {
           proxy_pass http://localhost:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       }
   }
   

3. 生效配置并验证
   执行sudo nginx -t && sudo systemctl restart nginx，确认pm2中serve进程正常运行后访问域名。

空白页面排查要点 #

• 检查build/index.html是否为空：为空则重新执行npm run build
• 浏览器F12查看控制台：是否有资源404报错，若存在需检查package.json中homepage配置（根路径部署可设为"/"或留空）
• 确认Nginx配置路径为绝对路径，而非相对路径
• 检查服务器防火墙是否开放80端口

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