静态React应用部署至Elastic Beanstalk后刷新崩溃问题

兄弟，这个问题我太熟了——本质就是单页应用(SPA)的前端路由在服务器端没有配置 fallback 规则。本地运行正常是因为你自己的Node服务器已经处理了所有路由请求，转发到React的index.html，但Elastic Beanstalk默认的web服务器（不管是nginx还是Apache）不知道要这么做，刷新时浏览器直接请求某个路由路径（比如/dashboard），服务器找不到对应的文件就返回HTML错误了。

下面分两种常见场景给你解决方案：

场景1：用Node.js服务器同时托管API和React静态文件 #

如果你的项目是用Express（或类似Node框架）同时提供API服务和托管React的build文件夹，那要确保服务器配置了全局路由 fallback：

1. 检查你的服务器代码，确认最后有这样的配置：

const path = require('path');
const express = require('express');
const app = express();

// 1. 托管React静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

// 2. 你的API路由放在前面
app.get('/api/data', (req, res) => {
  res.json({ content: '从API返回的数据' });
});

// 3. 关键：所有非API、非静态文件的请求，都转发到index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

// 监听EB指定的端口（EB会把端口存在process.env.PORT里）
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

2. 确认package.json的start脚本是启动这个服务器：

"scripts": {
  "start": "node server.js",
  "build": "cd client && npm install && npm run build"
}

3. 部署前确保React已经构建，或者在EB的部署流程中自动构建：
   • 可以添加.ebextensions/01_build_react.config文件，让EB在部署时自动安装前端依赖并构建：

commands:
  01_install_client_deps:
    command: cd client && npm install
  02_build_react:
    command: cd client && npm run build

场景2：直接用EB托管React静态文件（无Node API服务器） #

如果你的API是单独部署，EB只用来托管React的build文件夹，那需要修改EB的web服务器配置，添加路由fallback：

针对Nginx（EB Node.js平台默认用Nginx反向代理） #

在项目根目录创建.ebextensions/nginx/conf.d/elasticbeanstalk/react.conf文件，内容如下：

location / {
  try_files $uri $uri/ /index.html;
}

这个配置告诉Nginx：如果找不到请求的文件或目录，就返回index.html，让React的前端路由来处理。

针对Apache（如果用的是EB的Python/PHP等静态托管平台） #

创建.ebextensions/apache/conf.d/react.conf文件，内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

额外检查点 #

• 确认你的React路由用的是BrowserRouter（不是HashRouter）——HashRouter不会有刷新问题，但URL里会带#，如果你用的是BrowserRouter就必须配置服务器fallback。
• 查看EB的日志找具体错误：登录EB控制台，进入你的环境，点击左侧的「日志」→「请求日志」，看看刷新时返回的是404还是其他错误，能帮你定位问题。

按上面的步骤配置后，重新部署到EB，刷新页面就不会崩溃了！

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