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

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

我对其他一些答案感到困惑。（我的设置是：在 Windows 下的 Ubuntu 18.04 virtualbox 上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(and 和build/webpack.base.conf.js)中build/webpack.prod.conf.js。然而，修改这些文件看起来并不是一个好主意，因为它们实际上是从process.env.

所以我搜索了如何设置 process.env 变量并通过运行命令获得了成功：

HOST=0.0.0.0 PORT=3000 npm run dev

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

编辑：找到另一种方法来做到这一点是通过编辑开发主机和端口config/index.js。

Answer 7

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

"start": "react-scripts start",

到...（unix）

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

或...（赢）

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