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的正确响应。

我在生产模式下获得了什么：

错误：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服务器上运行checkout 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将执行scripts的{{1}}部分中指定的命令。就您而言，它将运行scripts文件夹中的package.json文件。通常，它将应用程序捆绑到静态文件中以进行生产。因此，现在必须提供正在生成的静态文件。这部分目前是客户端。

build.js

服务器：
我建议您使用serve-static和{ "scripts": { ... "build": "node scripts/build.js", ... } }一起提供静态文件。

通过express
使用yarn add serve-static，root将是包含静态文件的目录，否则默认情况下它将发送serverStatic(root,options)文件。

在docs中，可以通过简单的方式使用它：

index.html

还可以检查here的其他变体。

要在Heroku上部署项目，请遵循this。

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

2 个答案: