在不同的端口运行反应应用程序 - Javascript

简介

在开发 React 应用程序时，我们通常希望在本地端口上运行它以进行测试和开发。 默认情况下，React 应用程序在本地 3000 端口上运行。 但是，有时我们需要在不同的端口上运行应用程序。

在这篇文章中，我们将探讨如何在不同的端口上运行 React 应用程序以及如何配置开发服务器。

在不同端口上运行 React 应用程序

在 React 应用程序的根目录中，打开 .env 文件并添加以下内容：

PORT=3001

在这个例子中，我们将应用程序的端口设置为 3001 。保存并关闭文件。

现在我们需要使用 npm start 命令来启动我们的应用程序。 在这之前，请确保您已经安装了依赖项。

npm install

接下来，使用以下命令启动应用程序：

npm start

React 应用程序现在将在本地端口 3001 上运行。

配置开发服务器

Create React App (CRA) 已经为我们创建了一个开发服务器。 但是，我们可以自定义开发服务器的配置。 我们可以使用 http-proxy-middleware 中间件来将请求代理到其他服务器。

我们需要创建一个 setupProxy.js 文件并将其放置在 src 目录中。在该文件中，我们可以根据需要配置代理。

以下是一个简单的示例，它将所有以 /api 开头的请求代理到本地主机上的另一个端口（例如 http://localhost:8000 ）。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8000',
      changeOrigin: true,
    })
  );
};

我们还需要将 package.json 文件中的 start 脚本更改为以下内容：

{
  "scripts": {
    "start": "react-scripts start && node server.js",
  }
}

现在，我们可以在运行 React 应用程序的同时运行服务器。

结论

在本文中，我们学习了如何在不同的端口上运行 React 应用程序，并介绍了如何设置开发服务器以在本地主机上代理请求。 这对于开发和测试很有用。

希望这篇文章能对你有所帮助！