Question

我是整个nodejs / reactjs世界的新手，所以如果我的qs听起来很傻就道歉。所以我在这里玩这个reactjs应用程序：https://github.com/bebraw/reactabular

每当我执行“npm start”时，它总是在localhost：8080上运行

如何将其更改为在0.0.0.0:8080上运行以使其可公开访问？我一直在尝试阅读上面的repo中的源代码，但未能找到执行此设置的文件。

另外要添加 - 如果可能的话，如何让它在端口80上运行？

感谢。

Answer 1

这样的事对我有用。我猜这应该适合你。

使用此

运行webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在webpack.config.js

中设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

注意如果您使用的是热装，则必须执行此操作。

使用此

运行webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在webpack.config.js

中设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

Answer 2

这就是我这样做的方式，它看起来效果很好。

在webpack.config.js文件中添加以下内容：

devServer: {
    inline:true,
    port: 8008
  },

显然，您可以使用任何与其他端口不冲突的端口。我之所以提到冲突问题只是因为我花了大约4个小时。解决问题只是为了发现我的服务在同一个端口上运行。

Answer 3

使用以下命令配置webpack（在webpack.config.js中）

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

Answer 4

我是JavaScript开发和ReactJS的新手。我无法找到适合我的答案，直到通过查看react脚本代码来确定它。使用反应脚本使用ReactJS 15.4.1+，您可以使用环境变量从自定义主机和/或端口开始：

HOST='0.0.0.0' PORT=8080 npm start

希望这有助于像我这样的新人。

Answer 5

以下为我工作 -

1）在Package.json中添加：

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2）在webpack.config.js中，在您导出的配置对象下添加：

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3）现在在终端类型：npm run dev

4）在＃3编译完成后，只需转到您的浏览器并输入地址http://GACDTL001SS369k:8080/

您的应用程序现在应该可以使用其他人可以在同一网络上访问的外部URL。

PS：GACDTL001SS369k是我的电脑名称所以请更换你机器上的任何内容。

Answer 6

如果您使用＆＃39; create-react-app＆＃39;创建的React应用程序转到package.json并更改

"start": "react-scripts start",

到...（ unix ）

"start": "PORT=80 react-scripts start",

或......（胜利）

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

Answer 7

以下在JSON配置文件中为我工作：

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

Answer 8

我尝试了上面的解决方案，但没有运气。我在项目的package.json中注意到这一行：

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

}，

我看了bin/webpack-dev-server.js并发现了这一行：

.describe("port", "The port").default("port", 8080)

我将端口更改为3000.有点蛮力的方法，但它对我有用。

Answer 9

我在其他答案中苦苦挣扎。（我的设置是：在Windows下的Ubuntu 18.04虚拟机上使用npm run dev创建我的项目后，我正在使用webpack 3.12.0运行vue init webpack。我已经将vagrant配置为将端口3000转发到主机）

不幸的是，放置npm run dev --host 0.0.0.0 --port 3000无效--它仍然在localhost：8080上运行。
此外，文件webpack.config.js不存在，创建文件也无济于事。
然后，我发现配置文件现在位于build/webpack.dev.conf.js（以及build/webpack.base.conf.js和build/webpack.prod.conf.js）中。但是，修改这些文件似乎不是一个好主意，因为它们实际上是从process.env读取HOST和PORT的。

因此，我搜索了how to set process.env variables并通过运行以下命令获得了成功：

HOST=0.0.0.0 PORT=3000 npm run dev

完成此操作后，我终于得到“您的应用程序正在这里运行：http://0.0.0.0:3000”，并且终于可以通过从主机浏览到localhost:3000来看到它。

编辑：找到另一种方法是编辑config/index.js中的开发主机和端口。

Answer 10

对我来说：更改监听主机有效：

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

已更改为：

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

服务器开始监听0.0.0.0

Answer 11

I tried this to easily use another port:

PORT=80 npm run dev

Answer 12

在package.json中，如下更改“开始”值

注意：运行$ sudo npm start ，您需要使用 sudo 在端口80上运行react脚本

Answer 13

对我来说，此代码有效。只需将其添加到您的"scripts": { "dev-server": "encore dev-server", "dev": "webpack-dev-server --progress --colors", "watch": "encore dev --watch", "build": "encore production --progress" },文件中即可：

npm run build

并通过运行{{1}}

运行脚本“ build”

如何使webpack dev服务器在端口80和0.0.0.0上运行以使其可公开访问？

13 个答案: