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

Question

我是整个 nodejs/reactjs 世界的新手，如果我的问题听起来很愚蠢，我深表歉意。所以我在玩 reactabular.js.

每当我执行 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-scripts 代码找出答案。使用 ReactJS 15.4.1+ 使用 react-scripts 您可以使用环境变量从自定义主机 and/or 端口开始：

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

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

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

Answer 7

如果您在使用 'create-react-app' 创建的 React 应用程序中，请转到您的 package.json 并更改

"start": "react-scripts start",

到 ... (unix)

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

或... (win)

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

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

我对其他一些答案感到困惑。（我的设置是：我是运行 npm run dev，使用 webpack 3.12.0，在 Windows 下的 Ubuntu 18.04 virtualbox 上使用 vue init webpack 创建我的项目后. 我有 vag运行t 配置为转发端口 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.

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

HOST=0.0.0.0 PORT=3000 npm run dev

这样做之后，我终于得到了 "Your application is running here: 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

我试过这个以轻松使用另一个端口：

PORT=80 npm run dev

Answer 12

对我来说，这段代码有效。只需将其添加到您的 package.json 文件中即可：

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

和运行脚本 "build" by 运行ning npm run build

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

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

node.js

reactjs

npm

webpack

webpack-dev-server

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

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

node.js

reactjs

npm

webpack

webpack-dev-server

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