在生产环境中使用带有 Express 的 Create-React-App

Question

如何在生产模式下将我的 react-app 与 express 一起使用？ 目前我在一个终端调用yarn run start，在另一个终端调用node server.js。

这在开发模式下工作得很好。我在 package.json (http://localhost:8080) 中添加了"proxy"。

问题是我不知道如何让它在实时模式下工作。 我只是打电话给yarn build，但是现在服务器正在运行是没有意义的；-)

我可以用简单的方法解决这个问题吗？

一些代码：

package.json

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

server.js

const app = express();
app.post("/checkout", async (req, res) => {
  ...
});
app.listen(8080);

在 react-app 中，我使用 axios 将数据发布到此 API。

我在开发模式下得到/想要什么：

来自 API 的正确响应。

我想要的产品模式：

来自 API 的正确响应。

我在 prod 模式下得到的结果：

错误：404（在我看来，因为服务器没有运行）

文件夹结构：

my-app
├── build
├── node_modules
├── public
│   ├── favicon.ico
│   ├── data
│   ├── index.html
│   └── manifest.json
├── scripts
│   ├── build.js
│   ├── start.js
├── src
│   ├── components
│   │     Component1.js, Component2.js, ...
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── server.js
└── README.md

我可以使用 netlify 的 Lambda 函数解决这个问题吗？

这是服务器脚本： server.js

const express = require("express");
const ... require(...);

const app = express();

app.post("/checkout", async (req, res) => {
  console.log("Request:", req.body);

  let error;
  let status;
  try {
    const { token } = req.body;

    const var1 = await stripe.customers.create({
      ...
    });

    const idempotency_key = uuid();
    const charge = await stripe.charges.create(
      {...}
    );
  }

  res.json({ ... });
});

app.listen(8080);

其他方式：是否可以在 php 服务器上运行结帐 api？

Answer 1

运行以下命令进行生产构建

npm run build 或yarn build

在 server.js 文件中添加以下行以将客户端/构建作为静态内容提供服务

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

然后在定义的所有其他api路由的末尾添加下面的路由，这将发送索引文件

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

Answer 2

客户：
yarn build 是指 yarn run build。 yarn run 将执行在package.json 的scripts 部分中指定的命令。在您的情况下，它将运行脚本文件夹中的 build.js 文件。通常，它将应用程序捆绑到静态文件中以进行生产。所以现在必须提供正在生成的静态文件。这部分现在是客户端。

{
  "scripts": {
    ...
    "build": "node scripts/build.js",
    ...
  }
}

服务器：
我建议您使用serve-static 以express 提供静态文件。

• 用yarn add serve-static安装它
• 使用serverStatic(root,options)，根目录将是您的静态文件目录，否则默认发送index.html 文件。

来自docs，这可以简单地使用：

var express = require('express')
var serveStatic = require('serve-static')

var app = express()

app.use(serveStatic('public/ftp', { 'index': ['default.html', 'default.htm'] }))
app.listen(3000)

您还可以查看其他变体here。

要在 Heroku 上部署您的项目，请关注 this。