捆绑 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": "http://localhost:3001"

“create-react-app”有构建命令：

npm run build

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

Answer 1

如果 Express 同时充当您的 API 和应用程序服务器，则在基本级别上，您需要设置 Express 以在没有捕获其他 API 路由时加载 React 应用程序的 index.html。您可以通过使用 sendFile() 和 Node 的 path 来做到这一点，在您的 Express 应用程序的主文件中在所有其他 API 端点之后注册“catch-all”路由。

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

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

sendFile() 内的路径需要指向 React 客户端/前端应用程序的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 路由/路径之后，它将阻止你的 React 客户端应用程序调用 API，因为它会捕获所有请求，顺序非常重要。

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

希望对您有所帮助！