Question

我制作了一个React应用程序，该应用程序与this tutorial指导下的API服务器托管在同一台计算机上。

我的目录以

的方式设置

- root
  - server.js (entry for the API server)
  - app (for all back-end stuff)
  - client (directory for React app)
    - public (static files used in the front-end)
    - src (for all front-end stuff)
    - build (directory containing static build)
      - index.html (entry for front-end)
      - ... (other bundled stuff)

我正在以下方法提供我的React应用程序的静态副本。

// server.js

const app = express();
if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));
}

app.use('/api', routes); // for API routes

我遇到了一个问题，当我在本地启动它时（使用NODE_ENV=production）一切顺利，页面刷新不会破坏应用程序。

但是，在将此部署到Elastic Beanstalk之后，页面刷新会破坏应用程序，并在浏览器中显示此html错误消息。

Cannot GET /{whichever url path I had prior to refresh}

我可以在日志中看到浏览器尝试使用 GET / {url_pathname}

向服务器发送请求

我最初怀疑同时使用React路由器和Express路由器会变得有趣，但是我又很困惑，为什么这与localhost中的情况不一致。

Answer 1

如果您运行的是基本上在单个索引文件上运行的react应用程序，那么您的中间件路由器应该具有一个始终指向某个索引文件的catch-all路由。

 app.get('/*',(req, res) => {
   res.sendFile(path.join(__dirname + '/client/build/index.html'))
 })

请注意，当前示例取决于path模块......所以：

import path from 'path'
// or
const path = require('path')

Answer 2

如果您使用的是NGINX，则需要更新位于的配置文件的的/ etc / nginx的/位点可用的

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

或者，如果您的应用不在默认目录中，例如＆＃34; app-location＆＃34;你会得到这个。

location /app-location { root /var/www; index index.html; try_files $uri $uri/ /app-location/index.html; }

然后重新启动nginx

sudo service nginx restart

从服务器提供静态React应用程序，刷新时崩溃

2 个答案: