Question

我的应用程序是使用＆＃34; create-react-app＆＃34;以及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;

我有＆＃34;代理＆＃34;在React文件夹中的package.json文件中进行设置。

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

＆＃34;创建反应的应用程式＆＃34;有构建命令：

npm run build

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

Answer 1

如果Express同时充当您的API和应用程序服务器，那么在基本级别，您需要设置Express以在没有捕获其他API路由时加载React应用程序的index.html。您可以使用sendFile()和节点path，注册＆＃34;全能＆＃34;在Express应用程序的主文件中所有其他API端点后。

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

sendFile()中的路径需要指向React客户端/前端应用程序的index.html的位置。究竟进入sendFile()的内容完全取决于项目的结构。例如，如果您将React应用程序放在名为client的文件夹中，该文件夹中有一个由{strong> create-react-app build生成的npm run build文件夹，则{{1看起来像是：

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()，实际上意味着所有HTTP动词（GET，POST，PUT等）。如果你没有把这个放在你的API路径/路径之后，它会阻止你的React客户端应用程序调用API，因为它会捕获所有请求，命令非常重要。

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

希望这有帮助！

Bundle React / Express App用于生产

1 个答案: