我的项目基于 create-react-app。默认情况下,npm start
或 yarn start
将在 端口 3000 上运行应用程序,并且在 package.json 中没有指定端口的选项。
在这种情况下,如何指定我选择的端口?我想同时运行两个这个项目(用于测试),一个在端口 3005
,另一个是 3006
next -p 3005
。
package.json
正在使用 yarn
"start": "yarn run react-scripts start"
,那么在这种情况下如何添加 port
?
如果您不想设置 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
.env
的文件中。在他们的情况下,他们建议使用不应签入源代码控制的 .env.local
,以便您可以安全地将 .env
签入源代码控制。所以同样的建议仍然适用。
在除 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
"start": "set PORT=3005 react-scripts start"
只是设置端口但不运行应用程序
"start": "set PORT=3005 && react-scripts start"
只需运行以下命令
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"
}
"start": "cross-env PORT=4000 react-scripts start"
(需要 npmjs.com/package/cross-env)
对于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*;
你很高兴。
node_modules
目录中所做的更改将在软件包更新时被吹走。可能最好使用其他答案之一。
为什么不只是
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;
希望这可以帮助你;)
yarn eject
。
如何在调用命令时提供端口号而无需更改应用程序代码或环境文件中的任何内容?这样就可以从几个不同的端口运行和服务相同的代码库。
喜欢:
$ export PORT=4000 && npm start
您可以使用您喜欢的端口号代替上面的示例值 4000
。
您也可以在 package.json 脚本中使用相同的表达式。
喜欢:
"start": "export PORT=4000 react-scripts start"
但是对于后者,您将需要更改 package.json
,但是对于前者,除了从命令行调用中的端口值之外,您不会更改任何内容。
npm start -p 4000
而不是 export PORT=4000 && npm start
。
可以通过定义端口号在 package.json 中指定端口:
"scripts": {
"start": "PORT=3006 react-scripts start"}
或者可以在终端中运行脚本时指定端口:
PORT=3003 npm start
PORT=3006
创建一个 .env 文件
更改我的 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 等。
cross-env
软件包并执行"start": "cross-env PORT=3006 react-scripts start"
。这将适用于任何环境。cross-env
之类的用例是当您有多个开发人员在不同的系统上工作时。也许有些人更喜欢 MAC,而另一些人则更喜欢 Windows。或者,另一种情况,所有开发人员都使用 Windows,但您想添加一个环境变量,该变量将在运行 Ubuntu 的 CI/CD 服务器上运行。我希望这会有所帮助。