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

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

"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"

Windows JacobEnsor 的解决方案

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

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

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

---

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

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

PORT=3005

---

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

例如：

.env

PORT=4200

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

---

您可以使用 cross-env 设置端口，它适用于 Windows、Linux 和 Mac。

yarn add -D cross-env

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

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

---

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

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

---

只需运行以下命令

PORT=3001 npm start

---

方法一

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

https://i.stack.imgur.com/B7E0y.png

像这样设置

port=3005

方法二

https://i.stack.imgur.com/4bCsC.png

在 package.json

set PORT=3006 && react-scripts start

---

在您的 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"
}

---

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

set PORT=3001 && npm start

---

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

-在 MacOs 上：

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

-在窗户上

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

---

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

 node_modules/react-scripts/scripts/start.js

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

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

你很高兴。

---

为什么不只是

PORT=3030 npm run start

---

这适用于 Linux Elementary OS

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

---

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

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

然后再次运行 npm start。

---

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

yourapp/scripts/start.js

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

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

希望这可以帮助你;）

---

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

喜欢：

$ export PORT=4000 && npm start

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

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

喜欢：

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

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

---

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

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

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

PORT=3003 npm start

---

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

---

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

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

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

更多详情：this article

---

尝试这个：

npm start port=30022

---

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

---

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

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

运行 npm runeject 等待完成编辑 scripts/start.js 并使用您要使用的任何端口查找/替换 3000 编辑 config/webpack.config.dev.js 并执行相同的 npm start

---

在 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 端口启动应用程序。

---

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

---

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

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

PORT=3001

---

在 Windows 上的 Powershell 中（以管理员身份运行）：

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

$env:PORT=3002 ; npm 开始

---

如果您在 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 并添加你想要运行它的端口。这就是您要查找的内容：

'devServer: { 端口: 3005, historyApiFallback: true, },

和

输出： { publicPath: "http://localhost:3005/", },

---

您需要更新您的 package.json 以指定不同的 PORT

在脚本部分替换启动命令，如下所示：-

确保提到的 PORT 可以免费收听

“开始”：“出口 PORT=3001；反应脚本开始”

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

谢谢

---

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

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

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

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

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

---