如何指定端口到运行基于 create-react-app 的项目？

Question

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

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

Answer 1

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

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

Answer 2

如果您不想设置，另一种选择是将 package.json 的 scripts 部分修改为：

"start": "react-scripts start"

至

Linux（在 Ubuntu 14.04/16.04 上测试）和 MacOS（在 [=49 上测试） =] 在 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 的

由于我的回答很受欢迎而更新： 目前我更喜欢使用保存在 file(useful to store sets of variables for different deploy configurations in a convenient and readable form). Don't forget to add *.env into .gitignore if you're still storing your secrets in .env files. Here is the explanation of why using environment variables is better in the most cases. Here 中的环境变量是为什么在环境中存储秘密是个坏主意的解释.

Answer 3

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

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

PORT=3005

Answer 4

对于我的 windows 伙伴们，我发现了一种方法可以将 ReactJS 端口更改为运行在您 want.Before 运行将服务器转到 [=12= 的任何端口上]

 node_modules/react-scripts/scripts/start.js

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

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

你很高兴。

Answer 5

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

yourapp/scripts/start.js

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

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

希望这对您有所帮助 ;)

Answer 6

如果能够指定 3000 以外的端口作为命令行参数或环境变量，那就太好了。

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

运行 npm run eject
等待完成
编辑 scripts/start.js 和 find/replace 3000 以及您要使用的任何端口
编辑 config/webpack.config.dev.js 并执行相同的操作
npm start

Answer 7

您可以使用 cross-env 设置端口，它将在 Windows、Linux 和 Mac 上工作。

yarn add -D cross-env

然后在 package.json 开始 link 可能是这样的：

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

Answer 8

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

Answer 9

只需在 webpack.config.js 更新一下：

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

然后运行再 npm start。

Answer 10

总而言之，我们可以通过三种方法来完成此任务：

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

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

更多详情：this article

Answer 11

在Windows中可以通过两种方式完成。

在“\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开始申请端口.

Answer 12

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

喜欢：

$ export PORT=4000 && npm start

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

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

喜欢：

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

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

Answer 13

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

package.json (Windows):

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

package.json (Ubuntu):

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

Answer 14

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

例如：

.env

PORT=4200

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

Answer 15

试试这个：

npm start port=30022

Answer 16

如果您已经完成 npm run eject，请转到 scripts/start.js 并将 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; 中的端口（在本例中为 3000）更改为您想要的任何端口。

Answer 17

为什么不只是

PORT=3030 npm run start

Answer 18

仅运行命令下方

PORT=3001 npm start

Answer 19

这适用于 Linux 小学 OS

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

Answer 20

在 Windows 上的 Powershell 中（运行作为管理员）：

（cd 到您的 CRA 应用程序根文件夹）

$env:PORT=3002 ; npm 开始

Answer 21

对于windows，可以在cmd

上直接运行这个命令

set PORT=3001 && npm start

Answer 22

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

Answer 23

您可以在 package.json[=26= 中修改您的脚本 ]:

-在 MacO 上：

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

-上 Windows

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

Answer 24

方法一

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

这样设置

port=3005

方法二

在package.json

set PORT=3006 && react-scripts start

Answer 25

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

我将此添加到 .env.development 以使其与 npm start 命令一起用于开发：

PORT=3001

Answer 26

万一你在 Dockerfile 中运行 npm start，并且你不能在 docker run 中映射端口，就像做 -p 3001:3000 这样的事情，这是可行的：

FROM node

ENV PORT=3001

# whatever here, COPY .. etc.

CMD npm start

或者您可以将端口号作为参数传递给 docker buid:

FROM node

ARG PORT=${PORT}
ENV PORT=${PORT}

# whatever here, COPY .. etc.

CMD npm start

在docker buid

中使用--build-arg

docker build --build-arg PORT=3001 .

Answer 27

编辑 webpack.config.js 并添加您想要运行的端口。这就是您要找的：

'devServer: { port: 3005, historyApiFallback: true, },

和

output: { publicPath: "http://localhost:3005/", },

Answer 28

编辑您的 project/package.json 文件。

转到 scripts 部分。将 start 键对应的值更新为以下内容。

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

现在您的 React 应用程序将运行在 http://localhost:4000/

注意：您可以使用任何端口号，但最好是 avoid well-known port numbers，例如 22、21、80 等

Answer 29

可以在package.json中指定端口，通过定义端口号：

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

或运行终端脚本时可以指定端口：

PORT=3003 npm start

如何指定端口到运行基于 create-react-app 的项目？

How to specify a port to run a create-react-app based project?

reactjs

npm

create-react-app

react-server

如何指定端口到 运行 基于 create-react-app 的项目？

How to specify a port to run a create-react-app based project?

reactjs

npm

create-react-app

react-server

如何指定端口到运行基于 create-react-app 的项目？