使用 Node.js 服务器代理设置 React 应用

2025-06-07

使用 Node.js 服务器代理设置 React 应用

Create React App是一款非常棒的工具，可以帮助你快速启动并运行 React 应用。不过，当你构建或制作需要服务器端组件的应用程序原型时，比如为 Twilio视频或聊天生成访问令牌时，它的易用性会略逊一筹。我发现最简单的方法是在同一个项目中使用服务器，这样你只需一个命令就可以启动所有组件。

读完本文，你将学习如何搭建一个与 React 应用一起运行的Express服务器。如果你迫不及待，可以直接跳到GitHub 上的入门项目。

工作原理

在Create React App中，你可以设置package.json一个选项，将非text/html请求代理到其他后端。你可以使用此功能代理到其他地方运行的应用程序，但今天我们希望能够在 React 项目内部运行服务器。

我们将整合一些 npm 模块，以便能够运行一个命令来同时运行我们的 React 应用程序和 Express 服务器，以便我们可以代理它。

入门

要继续阅读本文的其余部分，您需要安装 Node.js 和 npm。

首先使用Create React App创建一个新的 React 应用。你知道吗，你不需要全局安装这个create-react-app包？相反，你可以运行：

npm init react-app MyNewApp
cd MyNewApp
Enter fullscreen mode Exit fullscreen mode

在底层，npm init采用初始化程序名称，将create-其添加到前面并使用 npx 来安装和运行命令。

运行新的 React 应用程序以确保它已正确生成。

npm start
Enter fullscreen mode Exit fullscreen mode

如果您看到旋转的 React 徽标，那么我们就可以开始了。

添加服务器

我们将把服务器依赖项添加到devDependencies我们的 React 应用程序中，因为它们不是构建前端的一部分。

停止服务器Cmd/Ctrl + C并使用npm安装 Express 和 Body Parser：

npm install express body-parser --save-dev
Enter fullscreen mode Exit fullscreen mode

添加以下依赖项，帮助我们一起运行前端和服务器：

npm install node-env-run nodemon npm-run-all express-pino-logger pino-colada --save-dev
Enter fullscreen mode Exit fullscreen mode

在项目目录中创建一个名为 的文件.env来存储我们的环境变量。我们暂时不需要添加任何内容，但它稍后会很有用，可以用来添加服务器所需的任何凭据，例如 API 密钥。

接下来，在项目目录中创建一个名为 的新目录server和一个server/index.js文件。我们将创建一个可以测试的小应用程序。在 中添加以下代码server/index.js：

const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);

app.get('/api/greeting', (req, res) => {
  const name = req.query.name || 'World';
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ greeting: `Hello ${name}!` }));
});

app.listen(3001, () =>
  console.log('Express server is running on localhost:3001')
);
Enter fullscreen mode Exit fullscreen mode

打开package.json并在对象中添加一个新脚本以使用和"scripts"运行服务器：node-env-runnodemon

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon | pino-colada"
  },
Enter fullscreen mode Exit fullscreen mode

通过运行脚本测试服务器是否正常运行：

npm run server
Enter fullscreen mode Exit fullscreen mode

打开http://localhost:3001/api/greeting进行测试。您应该会看到一个 JSON 响应，其中包含“Hello World!”问候语。尝试name在该 URL 中添加一个名为 的查询参数，看看会得到什么。

运行服务器和 React 应用程序

为了同时运行服务器和 React 应用程序，我们需要添加一些东西package.json。

首先，我们要设置服务器的代理。将"proxy"密钥添加到package.json。我们已经将服务器设置为在端口 3001 上运行，因此将代理指向 localhost:3001。

"proxy": "http://localhost:3001"
Enter fullscreen mode Exit fullscreen mode

我们需要一个脚本来同时运行服务器和前端。我们将使用npm-run-all它来实现这一点。由于我们要同时运行两个脚本，所以我们想使用并行模式。npm-run-all该run-p命令为我们提供了一个便捷的快捷方式。

将以下内容添加到"scripts"中的部分package.json：

"scripts": {
    // other scripts
    "server": "node-env-run server --exec nodemon",
    "dev": "run-p server start"
  },
Enter fullscreen mode Exit fullscreen mode

运行npm run dev后，React 应用程序和服务器都会启动。但是，我们现在无法在浏览器中加载 localhost:3000/api/greeting，因为Create React App代理只会响应基础 HTML。

让我们从 React 应用程序的组件内部对其进行测试。

使用 React 的代理服务器

我们将向App组件添加一个表单，该表单将使用该/api/greeting组件形成问候语并将其显示在页面上。在 App 组件中添加以下构造函数和函数src/App.js：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      greeting: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
      .then(response => response.json())
      .then(state => this.setState(state));
  }
Enter fullscreen mode Exit fullscreen mode

并将此形式添加到函数中的 JSX 中render：

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="name">Enter your name: </label>
            <input
              id="name"
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
            <button type="submit">Submit</button>
          </form>
          <p>{this.state.greeting}</p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
Enter fullscreen mode Exit fullscreen mode

在浏览器中打开 React 应用，填写你的姓名并提交。欢迎信息显示你的 React 应用正在与代理服务器通信。

这仅仅是开始

Create React App在启动 React 应用程序方面表现出色，但如果您还需要服务器端组件，则可能会比较麻烦。在本文中，您了解了如何使用该proxy选项以及如何使用类似 的工具运行 Express 服务器npm-run-all。

您可以在此 GitHub 仓库中查看本文的所有代码，并将其作为使用 Express API 构建 React 应用的起点。此外，如果您想使用 React 创建Twilio Video或Twilio Chat应用，Twilio 分支已设置为返回其中任一应用的访问令牌。只需按照README中的说明操作即可。

使用此模板，构建基于 Express 服务器的 React 应用程序将更加快捷。希望它能为您提供一个良好的平台，助您构建自己的创意；我迫不及待地想看到您的成果！

文章来源：https://dev.to/twilio/set-up-a-react-app-with-a-nodejs-server-proxy-2pgc
Devto 翻译
PREV
尝试执行 FETCH（呃，POST 请求）💅💁🏼‍♀️
NEXT
了解如何为开源做出贡献