如何指定一个端口运行一个创建-反应-基于应用程序的项目?

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

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

如果你不想设置环境变量，另一个选项是修改包的scripts部分。json:

"start": "react-scripts start"

来

Linux(在Ubuntu 14.04/16.04上测试)和MacOS(在MacOS Sierra 10.12.4上由aswin-s测试):

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

或者(可能)更通用的解决方案IsaacPak

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

窗户 JacobEnsor的解决方案

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

cross-env自由在任何地方都适用。详见Aguinaldo Possatto的回答

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

这里有另一种方法来完成这项任务。

在项目根目录下创建.env文件，并指定端口号。如:

PORT=3005

对于我的windows朋友们，我发现了一种改变ReactJS端口的方法，可以在任何你想要的端口上运行。在运行服务器之前，请转到

 node_modules/react-scripts/scripts/start.js

在其中，搜索下面的行并将端口号更改为所需的端口

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

这样就可以开始了。

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

yourapp/scripts/start.js

scroll down and change the port to whatever you want

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

希望这对你有所帮助;)

如果能够指定一个不是3000的端口，无论是作为命令行参数还是作为环境变量，那就太好了。

现在，这个过程相当复杂:

1. 运行# EYZ0
2. 等待它完成
3. 编辑scripts/start.js，用你想使用的任何端口找到/替换3000
4. 编辑config/webpack.config.dev.js并执行相同的操作
5. # EYZ0

你可以使用< >强cross-env < / >强来设置端口，它可以在Windows、Linux和Mac上工作。

yarn add -D cross-env

然后是包装。Json的开始链接可以是这样的:

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

在我的包里换衣服。"start": "export PORT=3001 && react-scripts start"也适用于我，我在macOS 10.13.4上

只需在webpack.config.js中更新一点:

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

然后再次运行npm start。

总之，我们有三种方法来实现这一目标:

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

最可移植的方法是最后一种方法。但正如其他帖子所提到的，将.env添加到.gitignore中，以避免将配置上传到公共源存储库。

更多细节:这篇文章

在Windows中可以通过两种方式实现。

1. 在“\node_modules\react-scripts\scripts\start.js”下搜索

   .
   .
   .

   例如:const DEFAULT_PORT = parseInt(process.env. port = parseInt)PORT, 10) || 9999;

<李> < p >在包中。Json，追加下面的行。 "start": "set PORT=9999 &&react-scripts开始” 然后使用NPM start启动应用程序。它将在9999启动应用程序 李港。< / p > < / >

在调用命令时给出端口号，而不需要更改应用程序代码或环境文件中的任何内容，怎么样?这样就可以从几个不同的端口运行和服务相同的代码库。

如:

# EYZ0

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

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

如:

# EYZ0

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

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

# EYZ0 (Windows):

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

# EYZ0 (Ubuntu):

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

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

例如:

.env

PORT=4200

您可以在这里找到该操作的文档:https://create-react-app.dev/docs/advanced-configuration

试试这个:

npm start port=30022

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

为什么不干脆

PORT=3030 npm run start

只需运行下面的命令

PORT=3001 npm start

这适用于Linux基本操作系统

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

在Windows上的Powershell中(以管理员身份运行):

(cd到你的CRA应用程序根文件夹)

美元env:端口= 3002;npm开始

对于windows操作系统，可直接在cmd命令下执行此命令

set PORT=3001 && npm start

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

你可以在< >强package.json < / >强内修改你的<强>脚本< / >强:

-on MacOs:

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

- # EYZ0

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

方法1

在项目的根目录下创建.env文件

像这样设置

PORT=3005

方法2

在# EYZ0

set PORT=3006 && react-scripts start

在我的例子中，我的react项目有两个文件:.env和.env.development。

我把这个添加到.env.development中，让它与npm start命令一起工作，用于开发:

PORT=3001

如果你在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 .

编辑webpack.config.js并添加你想要在其上运行的端口。这就是你要找的东西:

< p > devServer: {port: 3005， historyApiFallback:没错, }, < / p >

而且

< p >输出:{ publicPath:“http://localhost: 3005 /“ }, < / p >

编辑project/package.json文件。

转到scripts部分。将start键对应的值更新如下。

# EYZ0

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

注意:你可以使用任何端口号，但最好是避免使用众所周知的端口号，如22,21,80等。

可以在包中指定端口。通过定义端口号:

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

PORT=3003 npm start

你需要更新你的package.json来指定不同的端口

在脚本部分，替换start命令如下:—

确保所提到的PORT可以自由监听

&;start&;: "export PORT=3001;react-scripts时;

您的应用程序将从http://localhost:3001开始

谢谢

对于窗口使用cmd

set PORT=3001 && npm start

很多答案都没有提到windows的一个关键部分。对我来说，在windows中的指定端口运行react应用程序的工作是使用以下命令。您可以从下面的示例更改端口号。别忘了使用&&

set PORT=4200 && react-scripts start