将 Create-React-App 与 Express 结合使用

结论

在我自己搭建测试应用的过程中，我找不到简单的方法在同一台服务器上部署Create React App和Express。这需要一些调整，如果你想尝试一下，可以参考以下步骤。

请注意：这些步骤假设您希望从同一位置运行应用服务器和 API。如果您只想部署到 Heroku 之类的平台，这将非常有用。

create-react-app如果您以前没有使用过create-react-app，请阅读以下内容：如果您还没有使用过 create-react-app，它有两种服务模式：一种是使用热加载器启动npm run start，另一种是优化的生产包，后者是一个标准的 index.html，您可以按照自己想要的任何方式提供服务。我希望找到一种方法，让该npm run start方法和npm run build方法与我的 API 以相同的方式工作，其中一种方法就是使用我将要带您完成的代理设置。

步骤 1：安装 create-react-app

    create-react-app your-app-name

步骤 2：安装用于创建 React 应用的软件包

 npm install; 

步骤 3：安装 express

npm install express --save

步骤 4：创建server.js文件

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/ping', function (req, res) {
 return res.send('pong');
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

步骤 5：更新 package.json

将以下内容添加到您的 package.json

"proxy": "http://localhost:8080"

如果不这样做，我们每次都得创建缓慢的生产版本（而不是更快的开发npm run start方法）。这是因为npm start使用了 3000 端口，而该端口与 Express API 运行的端口 (8080) 不同。

步骤 6：启动 Express 服务器

node server.js

或者nodemon如果你愿意的话。

步骤 7：启动你的 React 应用

保持节点运行，在单独的选项卡/窗口中执行此操作。

npm start 

通过热重载启动反应构建。

结论

localhost:3000现在，您可以使用它来开发您想要的一切npm run start，并且您的 API 将按预期工作（尽管请求来自端口 3000）。

当您想要部署时，只需运行生产版本npm run build并从中提供您的应用程序localhost:8080，如node server.js本例所示（请注意 server.js 底部的端口号）。

利润。

Lou 是《云原生软件工程通讯》的编辑，该通讯致力于使云软件工程更易于访问和理解，每两周您将在收件箱中收到一份针对云原生软件工程师的最佳内容摘要。