node.js 如何让 webpack 开发服务器在端口 80 和 0.0.0.0 上运行以使其可公开访问？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33272967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
提问by 90abyss
I am new to the whole nodejs/reactjsworld so apologies if my question sounds silly. So I am playing around with reactabular.js.
我是整个nodejs/ reactjs世界的新手，如果我的问题听起来很傻，我深表歉意。所以我在玩reactabular.js。
Whenever I do a npm startit always runs on localhost:8080.
每当我做一个npm start它总是运行localhost:8080。
How do I change it to run on 0.0.0.0:8080to make it publicly accessible? I have been trying to read the source code in the above repo but failed to find the file which does this setting.
如何更改它以继续运行0.0.0.0:8080以使其可公开访问？我一直在尝试阅读上述 repo 中的源代码，但未能找到执行此设置的文件。
Also, to add to that - how do I make it run on port 80if that is at all possible?
另外，补充一点 -80如果可能的话，我如何让它在端口上运行？
回答by Bhargav Ponnapalli
Something like this worked for me. I am guessing this should work for you.
像这样的东西对我有用。我猜这应该对你有用。
Run webpack-dev using this
使用这个运行 webpack-dev
webpack-dev-server --host 0.0.0.0 --port 80
And set this in webpack.config.js
并在 webpack.config.js 中设置
entry: [
'webpack-dev-server/client?http://0.0.0.0:80',
config.paths.demo
]
NoteIf you are using hot loading, you will have to do this.
注意如果您使用热加载，则必须执行此操作。
Run webpack-dev using this
使用这个运行 webpack-dev
webpack-dev-server --host 0.0.0.0 --port 80
And set this in webpack.config.js
并在 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()]
回答by bkane56
This is how I did it and it seems to work pretty well.
我就是这样做的，它似乎工作得很好。
In you webpack.config.js file add the following:
在 webpack.config.js 文件中添加以下内容：
devServer: {
inline:true,
port: 8008
},
Obviously you can use any port that is not conflicting with another. I mention the conflict issue only because I spent about 4 hrs. fighting an issue only to discover that my services were running on the same port.
显然，您可以使用任何不与其他端口冲突的端口。我提到冲突问题只是因为我花了大约 4 个小时。解决问题只是为了发现我的服务在同一个端口上运行。
回答by Beder Acosta Borges
Configure webpack (in webpack.config.js) with:
使用以下命令配置 webpack（在 webpack.config.js 中）：
devServer: {
// ...
host: '0.0.0.0',
port: 80,
// ...
}
回答by Anonymous
I am new to JavaScript development and ReactJS. I was unable to find an answer that works for me, until figuring it out by viewing the react-scripts code. Using ReactJS 15.4.1+ using react-scripts you can start with a custom host and/or port by using environment variables:
我是 JavaScript 开发和 ReactJS 的新手。我无法找到适合我的答案，直到通过查看 react-scripts 代码找出答案。使用 ReactJS 15.4.1+ 和 react-scripts，您可以使用环境变量从自定义主机和/或端口开始：
HOST='0.0.0.0' PORT=8080 npm start
Hopefully this helps newcomers like me.
希望这对像我这样的新人有所帮助。
回答by Sumeet
Following worked for me -
以下对我来说有效 -
1) In Package.jsonadd this:
1）在Package.json添加这个：
"scripts": {
"dev": "webpack-dev-server --progress --colors"
}
2) In webpack.config.jsadd this under config object that you export:
2）在webpack.config.js您导出的配置对象下添加：
devServer: {
host: "GACDTL001SS369k", // Your Computer Name
port: 8080
}
3) Now on terminal type: npm run dev
3）现在在终端类型上： npm run dev
4) After #3 compiles and ready just head over to your browser and key in address as http://GACDTL001SS369k:8080/
4) 在#3 编译并准备好之后，只需转到您的浏览器并输入地址作为 http://GACDTL001SS369k:8080/
Your app should hopefully be working now with an external URL which others can access on the same network.
您的应用程序现在应该可以使用其他人可以在同一网络上访问的外部 URL。
PS: GACDTL001SS369kwas my Computer Name so do replace with whatever is yours on your machine.
PS：GACDTL001SS369k是我的计算机名称，所以请替换为您机器上的任何名称。
回答by R01010010
If you're in a React Application created with 'create-react-app' go to your package.jsonand change
如果您在使用“create-react-app”创建的 React 应用程序中，请转到您的package.json并更改
"start": "react-scripts start",
"start": "react-scripts start",
to ... (unix)
到...（unix）
"start": "PORT=80 react-scripts start",
"start": "PORT=80 react-scripts start",
or to ... (win)
或...（赢）
"start": "set PORT=3005 && react-scripts start"
"start": "set PORT=3005 && react-scripts start"
回答by krubo
I struggled with some of the other answers. (My setup is: I'm running npm run dev, with webpack 3.12.0, after creating my project using vue init webpackon an Ubuntu 18.04 virtualbox under Windows. I have vagrant configured to forward port 3000 to the host.)
我在其他一些答案中挣扎。（我的设置是：在 Windows 下的 Ubuntu 18.04 虚拟机上npm run dev使用创建我的项目后，我正在使用 webpack 3.12.0运行vue init webpack。我已将 vagrant 配置为将端口 3000 转发到主机。）
- Unfortunately putting
npm run dev --host 0.0.0.0 --port 3000didn't work---it still ran on localhost:8080. - Furthermore, the file
webpack.config.jsdidn't exist and creating it didn't help either. - Then I found the configuration files are now located in
build/webpack.dev.conf.js(andbuild/webpack.base.conf.jsandbuild/webpack.prod.conf.js). However, it didn't look like a good idea to modify these files, because they actually read the HOST and PORT fromprocess.env.
- 不幸的是，放置
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.
So I searched about how to set process.env variablesand achieved success by running the command:
所以我搜索了如何设置 process.env 变量并通过运行命令取得了成功：
HOST=0.0.0.0 PORT=3000 npm run dev
After doing this, I finally get "Your application is running here: http://0.0.0.0:3000" and I'm finally able to see it by browsing to localhost:3000from the host machine.
这样做之后，我终于得到“您的应用程序正在此处运行：http: //0.0.0.0: 3000”，我终于能够通过localhost:3000从主机浏览到它来看到它。
EDIT: Found another way to do it is by editing the dev host and port in config/index.js.
编辑：找到另一种方法是通过编辑config/index.js.
回答by Ankush
For me: changing the listen host worked:
对我来说：改变监听主机工作：
.listen(3000, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
was changed to :
改为：
.listen(3000, '0.0.0.0', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
and the server started listening on 0.0.0.0
并且服务器开始监听 0.0.0.0
回答by Roman
Following worked for me in JSON config file:
以下在 JSON 配置文件中对我有用：
"scripts": {
"start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
回答by Sparky1
I tried the solutions above, but had no luck. I noticed this line in my project's package.json:
我尝试了上面的解决方案，但没有运气。我在我的项目的 package.json 中注意到了这一行：
"bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"
},
},
I looked at bin/webpack-dev-server.jsand found this line:
我查看bin/webpack-dev-server.js并找到了这一行：
.describe("port", "The port").default("port", 8080)
I changed the port to 3000. A bit of a brute force approach, but it worked for me.
我将端口更改为 3000。有点暴力方法，但它对我有用。
