时间戳

首页 > 解决方案 > 使用域 http://example.com 的 express 后端构建 React 应用程序

reactjs - 使用域 http://example.com 的 express 后端构建 React 应用程序

问题描述

我在 React 中有一个 Web 应用程序，我需要实现一个联系表单。该应用程序是使用 create-react-app 创建的，并添加了服务器文件夹。对于我使用 sendgrid 邮件的表单。服务器是否在端口 4567 上工作，应用程序如何构建以在域上工作？这是一个单页应用程序。

谢谢，这很重要。

标签： reactjsformsexpresscontacts

解决方案

在生产环境中运行时，React 应用程序是简单的 HTML、CSS 和 JavaScript。这些文件在请求时从您的服务器发送到客户端，其方式与处理任何网页的请求/响应相同。在您的 React 应用程序准备好投入生产之前，需要完成几个步骤

1：创建生产版本

首先，您需要创建应用程序的生产版本。此过程将所有单独的文件.js或.jsx文件放在一起到一个缩小的文件中，对于.css. 然后你index.html的更新包含link到 CSS 和scriptJS 中。这样做是为了只需要发送三个文件，而不是开发中存在的 10 个或 100 个文件。

如果您曾经create-react-app启动过您的应用程序，则可以使用以下命令：

npm run build

去做这个。否则，你需要安装webpack，然后运行：

node_modules/.bin/webpack --config webpack.prod.js --mode production

（您可能希望将其作为脚本添加到package.json）。

有关更多信息，请参阅React：优化性能。

2. 提供您的应用程序

现在，您的服务器应该为您的应用程序提供一条路由，并且当它在该路由上收到请求时，服务器应该通过index.html从您的client/build/目录（client/React 应用程序的目录在哪里）发送来响应。

这是一个使用 Node/Express 作为服务器的示例（在 中app.js）：

const path = require('path');

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

请注意，这只是使用 Node 发送静态文件的方式，并且可以在任何服务器上轻松完成。

额外的

您提到您想在申请中提交表格。如果您接收 POST 请求的路由与表单所在的路由匹配（例如，表单已打开/form，服务器侦听 POST on /form），您可以只使用默认的 HTML 表单提交。然而，在使用 React 时，这不是一个很好的处理方式，因为路由将由您的服务器而不是由 React 控制。相反，您应该使用某种 AJAX 方法来提交表单。

由于您的服务器现在正在为您的 React 应用程序提供服务（而不是 React 在开发中为自己服务），您只需发出相关请求，这些请求就会发送到您的服务器。例如请求（使用 fetch API）：

const models = await fetch('/api/models');

将your_host/api/models默认设置为。

推荐阅读