无法访问由 webpack-dev-server 在 vagrant 上启动的网页
Can't access web-page started by webpack-dev-server on vagrant
从 React 和 Flux 架构开始,但遇到了一些基础架构问题。
我无法访问由 webpack-dev-server 在 vagrant box (scotch-box) 上启动的网页。该命令在 localhost:3002 上启动应用程序,我的 vagrant box 在 Windows 主机中有一个 IP (192.168.33.10) 地址,我可以访问它。但是当我尝试访问 192.168.33.10:3002 时出现错误:
“无法访问该页面....”
我检查过我可以从 vagrant box 控制台访问页面 curl http://localhost:3002
。
有人知道为什么会这样吗?
我也在使用 es2015 的 babel 和 presets 和 react。
这是 webpack 配置文件:
module.exports = {
entry: "./src/js/main.js",
output: {
path: "./dist",
filename: "bundle.js",
publicPath: "/"
},
devServer: {
inline: true,
port: 3002,
contentBase: "./dist"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
]
}
};
这是我的 package.json
{
"name": "flux-jenezis",
"version": "1.0.0",
"description": "Flux realisatoin usign egghead guide",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"flux",
"react"
],
"author": "jenezis",
"license": "ISC",
"dependencies": {
"flux": "^2.1.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0"
}
}
UPD:我可以访问由节点服务器启动的不同应用程序,它们可由 192.168.33.10:3002
访问
UPD2: 使用 windows 默认工具进行网络诊断,诊断结果为:“远程设备不接受连接"
找到解决方案。默认情况下 webpack-dev-server
运行 是 localhost:<port>
上的应用程序。要更改它,您可以使用此命令 运行 webpack-dev-server
(通过传递 --host 选项):
webpack-dev-server --port 3000 --hot --host 0.0.0.0
0.0.0.0
绑定到所有主机。
我更改了 package.json
,现在它看起来像:
{
"name": "flux-jenezis",
"version": "1.0.0",
"description": "Flux realisatoin usign egghead guide",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0"
},
"keywords": [
"flux",
"react"
],
"author": "jenezis",
"license": "ISC",
"dependencies": {
"flux": "^2.1.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0"
}
}
对于那些可能仍然遇到这个问题的人,就像我一样,我遇到的问题是端口转发。我的 Virtualbox 虚拟机是一个 linux 虚拟机,上面有一个 apache 网络服务器。我使用 Vagrant 通过一个配置文件轻松启动我的虚拟机,Vagrant 称这些为 'Vagrantfile'。在 'Vagrantfile' 中,您可以指定要在来宾计算机(您的 VM)和主机(您的实际 OS)之间转发的端口。
看起来像这样:
config.vm.network "forwarded_port", guest: 3000, host: 3000
当 VM 启动时,该端口现在可以从您的主机上的来宾计算机访问。换句话说,如果您的 webpack 配置如下所示:
devServer: {
host: '0.0.0.0',
port: 3000
}
您现在应该可以从主机上的浏览器访问 http://0.0.0.0:3000
。
注意:如果您使用的是 Virtualbox 而不是 Vagrant,并且您仍然需要端口转发方面的帮助,请访问这篇文章以获取一些有用的提示:https://blog.codecentric.de/en/2017/08/fix-webpack-watch-virtualbox/
从 React 和 Flux 架构开始,但遇到了一些基础架构问题。
我无法访问由 webpack-dev-server 在 vagrant box (scotch-box) 上启动的网页。该命令在 localhost:3002 上启动应用程序,我的 vagrant box 在 Windows 主机中有一个 IP (192.168.33.10) 地址,我可以访问它。但是当我尝试访问 192.168.33.10:3002 时出现错误: “无法访问该页面....”
我检查过我可以从 vagrant box 控制台访问页面 curl http://localhost:3002
。
有人知道为什么会这样吗?
我也在使用 es2015 的 babel 和 presets 和 react。
这是 webpack 配置文件:
module.exports = {
entry: "./src/js/main.js",
output: {
path: "./dist",
filename: "bundle.js",
publicPath: "/"
},
devServer: {
inline: true,
port: 3002,
contentBase: "./dist"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: "babel",
query: {
presets: ["es2015", "react"]
}
}
]
}
};
这是我的 package.json
{
"name": "flux-jenezis",
"version": "1.0.0",
"description": "Flux realisatoin usign egghead guide",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"flux",
"react"
],
"author": "jenezis",
"license": "ISC",
"dependencies": {
"flux": "^2.1.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0"
}
}
UPD:我可以访问由节点服务器启动的不同应用程序,它们可由 192.168.33.10:3002
UPD2: 使用 windows 默认工具进行网络诊断,诊断结果为:“远程设备不接受连接"
找到解决方案。默认情况下 webpack-dev-server
运行 是 localhost:<port>
上的应用程序。要更改它,您可以使用此命令 运行 webpack-dev-server
(通过传递 --host 选项):
webpack-dev-server --port 3000 --hot --host 0.0.0.0
0.0.0.0
绑定到所有主机。
我更改了 package.json
,现在它看起来像:
{
"name": "flux-jenezis",
"version": "1.0.0",
"description": "Flux realisatoin usign egghead guide",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0"
},
"keywords": [
"flux",
"react"
],
"author": "jenezis",
"license": "ISC",
"dependencies": {
"flux": "^2.1.1",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"react-router": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.7.7",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0"
}
}
对于那些可能仍然遇到这个问题的人,就像我一样,我遇到的问题是端口转发。我的 Virtualbox 虚拟机是一个 linux 虚拟机,上面有一个 apache 网络服务器。我使用 Vagrant 通过一个配置文件轻松启动我的虚拟机,Vagrant 称这些为 'Vagrantfile'。在 'Vagrantfile' 中,您可以指定要在来宾计算机(您的 VM)和主机(您的实际 OS)之间转发的端口。
看起来像这样:
config.vm.network "forwarded_port", guest: 3000, host: 3000
当 VM 启动时,该端口现在可以从您的主机上的来宾计算机访问。换句话说,如果您的 webpack 配置如下所示:
devServer: {
host: '0.0.0.0',
port: 3000
}
您现在应该可以从主机上的浏览器访问 http://0.0.0.0:3000
。
注意:如果您使用的是 Virtualbox 而不是 Vagrant,并且您仍然需要端口转发方面的帮助,请访问这篇文章以获取一些有用的提示:https://blog.codecentric.de/en/2017/08/fix-webpack-watch-virtualbox/