捆绑 React/Express 个用于生产的应用程序

Question

我的应用程序是使用 "create-react-app" 和 Express.js 作为后端构建的。我应该如何为应用程序进行生产设置？

这是我来自 Express 的 user.js 文件：

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.json(['Hello World'])
});

module.exports = router;

我在 React 文件夹的 package.json 文件中设置了 "Proxy"。

"proxy": "http://localhost:3001"

"create-react-app" 具有构建命令：

npm run build

如果我只是运行 "npm run build" 在 react 文件夹中，或者我必须在我的 Express 文件中设置一些东西，我的应用程序是否捆绑用于生产？

Answer 1

如果 Express 既充当您的 API 又充当您的应用程序服务器，则在基本级别上，您需要设置 Express 以在没有其他 [=44] 时加载 React 应用程序的 index.html =] 路由被捕获。您可以通过使用 sendFile() 和 Node 的 path 来完成此操作，注册一个 "catch-all" 路由在所有其他 API 端点之后，在Express 应用程序的主文件。

app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.resolve(__dirname, 'index.html'));
});

sendFile() 中的路径需要指向 React client/frontend 应用程序的 index.html 的位置。 sendFile() 中的具体内容完全取决于项目的结构。例如，如果你有 React 应用程序在一个名为 client 的文件夹中，该文件夹有一个由 create-react-app npm run build 生成的 build 文件夹， sendFile() 看起来像：

app.use(express.static(path.join(__dirname, 'client', 'build')));

// API route
app.use('/users', usersRouter);

app.use('*', function (request, response) {
  response.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});

app.use() 中的 * 例如 app.use('*', function (request, response)); 实际上意味着所有 HTTP 动词（GET、POST、PUT 等）。如果您不将此放在您的 API routes/paths 之后，它将阻止您的 React 客户端应用程序调用 API，因为它会捕获所有要求，顺序很重要。

然后您只需构建 React 应用程序，然后运行 Express 应用程序。

希望对您有所帮助！

捆绑 React/Express 个用于生产的应用程序

Bundle React/Express App for production

production

express

reactjs