reactjs - 如何指定一个端口来运行基于 create-react-app 的项目？

Question

我的项目基于create-react-app。npm start或者yarn start默认情况下将在端口 3000上运行应用程序，并且没有在 package.json 中指定端口的选项。

在这种情况下，如何指定我选择的端口？我想同时运行两个这个项目（用于测试），一个在端口3005，另一个是3006

score 946 · Accepted Answer

如果您不想设置环境变量，另一种选择是修改scriptspackage.json 的部分：

"start": "react-scripts start"

至

Linux（在 Ubuntu 14.04/16.04 上测试）和MacOS（由@aswin-s 在 MacOS Sierra 10.12.4 上测试）：

"start": "PORT=3006 react-scripts start"

或者（可能是）@IsaacPak 提供的更通用的解决方案

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor 解决方案

"start": "set PORT=3006 && react-scripts start"

cross-env lib在任何地方都可以使用。有关详细信息，请参阅 Aguinaldo Possatto答案

由于我的回答很受欢迎而更新：目前我更喜欢使用保存在文件中的环境变量（有助于以方便和可读的形式.env存储不同配置的变量集）。如果您仍将秘密存储在文件中，请deploy不要忘记添加。这里解释了为什么在大多数情况下使用环境变量更好。这里解释了为什么在环境中存储秘密是个坏主意。*.env.gitignore.env

score 358 · Accepted Answer

这是完成此任务的另一种方法。

在您的项目根目录创建一个.env文件并在那里指定端口号。喜欢：

PORT=3005

score 96 · Accepted Answer

.env此外，在主目录中创建一个具有名称的文件，package.json并将PORT变量设置为所需的端口号。

例如：

.env

PORT=4200

您可以在此处找到此操作的文档：https ://create-react-app.dev/docs/advanced-configuration

score 54 · Accepted Answer

您可以使用cross-env来设置端口，它可以在 Windows、Linux 和 Mac 上运行。

yarn add -D cross-env

然后在 package.json 中，开始链接可能是这样的：

"start": "cross-env PORT=3006 react-scripts start",

score 32 · Accepted Answer

您可以指定一个名为的环境变量PORT来指定服务器将运行的端口。

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

score 18 · Accepted Answer

18

只需运行以下命令

PORT=3001 npm start

于 2020-09-15T10:43:31.040 回答

score 17 · Accepted Answer

在您的package.json中，转到脚本并使用--port 4000or set PORT=4000，如下例所示：

package.json（视窗）：

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json（Ubuntu）：

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

score 16 · Accepted Answer

16

对于windows，可以直接在cmd上运行这个命令

set PORT=3001 && npm start

于 2021-06-16T03:34:16.240 回答

score 9 · Accepted Answer

方法一

在项目的根文件夹中创建 .env 文件

设置成这样

port=3005

方法二

在package.json

set PORT=3006 && react-scripts start

score 8 · Accepted Answer

对于我的 Windows 人，我发现了一种方法来更改 ReactJS 端口以在您想要的任何端口上运行。在运行服务器之前转到

 node_modules/react-scripts/scripts/start.js

在其中，搜索下面的行并将端口号更改为您想要的端口

 var DEFAULT_PORT = process.env.PORT || *4000*;

你很高兴。

score 8 · Accepted Answer

8

这适用于 Linux Elementary OS

"start": "PORT=3500 react-scripts start"

于 2021-01-29T20:10:50.517 回答

score 8 · Accepted Answer

您可以在package.json中修改脚本：

- 在 MacOs 上：

"scripts": {
     "start": "PORT=9002 react-scripts start",
     "build": "react-scripts build",
     ...     
}

-在 Windows 上

  "scripts": {
      "start": "set PORT=9002 && react-scripts start",
      "build": "react-scripts build",
      ...
}

score 7 · Accepted Answer

7

为什么不只是

PORT=3030 npm run start

于 2020-07-22T07:32:50.533 回答

score 7 · Accepted Answer

只需更新一点webpack.config.js：

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

然后npm start再次运行。

score 5 · Accepted Answer

您可以在启动应用程序时找到默认端口配置

yourapp/scripts/start.js

向下滚动并将端口更改为您想要的任何内容

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 4000；

希望这可以帮助你;）

score 4 · Accepted Answer

如何在调用命令时提供端口号而无需更改应用程序代码或环境文件中的任何内容？这样就可以从几个不同的端口运行和服务相同的代码库。

喜欢：

$ export PORT=4000 && npm start

您可以使用您喜欢的端口号代替4000上面的示例值。

您也可以在package.json 脚本中使用相同的表达式。

喜欢：

"start": "export PORT=4000 react-scripts start"

但是对于后者，您将需要更改package.json，但是对于前者，除了从命令行调用中的端口值外，您不会更改任何内容。

score 2 · Accepted Answer

2

尝试这个：

npm start port=30022

于 2020-04-14T22:57:27.093 回答

score 2 · Accepted Answer

In case you have already done npm run eject, go to scripts/start.js and change port in const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; (3000 in this case) to whatever port you want.

score 2 · Accepted Answer

总而言之，我们有三种方法可以做到这一点：

设置一个名为“PORT”的环境变量
修改package.json的“scripts”部分下的“start”键
创建一个 .env 文件并将 PORT 配置放入其中

最便携的将是最后一种方法。但正如其他海报所提到的，将 .env 添加到 .gitignore 中，以免将配置上传到公共源存储库。

更多细节：这篇文章

score 2 · Accepted Answer

更改我的 package.json 文件"start": "export PORT=3001 && react-scripts start"也对我有用，我使用的是 macOS 10.13.4

score 1 · Accepted Answer

1

我只是在项目的根目录中创建 .env 并更改 PORT=3001

于 2021-12-05T20:58:32.433 回答

score 1 · Accepted Answer

能够指定除之外的端口3000作为命令行参数或环境变量会很好。

现在，这个过程非常复杂：

跑npm run eject
等待它完成
编辑scripts/start.js并查找/替换3000为您要使用的任何端口
编辑config/webpack.config.dev.js并做同样的事情
npm start

score 1 · Accepted Answer

在 Windows 中，它可以通过 2 种方式完成。

在 " \node_modules\react-scripts\scripts\start.js" 下，搜索 "DEFAULT_PORT" 并添加所需的端口号。

例如： const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 9999;
在 package.json 中，附加以下行。"start": "set PORT=9999 && react-scripts start" 然后使用 NPM start 启动应用程序。它将在 9999 端口启动应用程序。

score 0 · Accepted Answer

In Powershell on Windows (Run as Administrator):

(cd to your CRA app root folder)

$env:PORT=3002 ; npm start

score 0 · Accepted Answer

就我而言，我的反应项目有两个文件：.env和.env.development.

我添加了它以.env.development使其与npm start开发命令一起使用：

PORT=3001

reactjs - 如何指定一个端口来运行基于 create-react-app 的项目？

25 回答 25

Related

Reference