不能 运行 webpack-dev-server 里面 docker
Cannot run webpack-dev-server inside docker
我创建了一个 docker 图像,它使用容器内部的 webpack 提供一个简单的 React 应用程序,但我在浏览器中什么也得不到。
这是我的配置文件
package.json
{
"name": "invas_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --inline --content-base ."
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
Dockerfile
# Use starter image
FROM node:argon
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . /usr/src/app
# Expose port
EXPOSE 8080
# Default command to run
CMD ["npm", "start"]
什么工作正常
当我运行npm start
时,webpack-dev-server
运行正常,当我去http://localhost:8080时,我看到我的页面。
什么不起作用
当我 运行 我的服务器使用 docker 时,使用以下命令:
docker build -t anubhav756/app . && docker run -p 80:8080 anubhav756/app
日志显示容器内一切正常,但当我将浏览器指向 http://localhost 时,我得到 ERR_CONNECTION_RESET
示例代码结束here
您实际上只在本地主机上收听。
要从外部访问,请替换 package.json 文件中的以下行:
"start": "webpack-dev-server --inline --content-base ."
作者:
"start": "webpack-dev-server --host 0.0.0.0 --inline --content-base ."
相关讨论:https://github.com/webpack/webpack-dev-server/issues/147
如果您无法在容器内启用 webpack-dev-server 的热重载,我只想在 Raphayol 的回答中添加一些内容。
即使将我的项目文件夹安装到容器中,我也无法使 webpack 或 webpack-dev-server watch (--watch) 模式工作。
要解决此问题,您需要了解 webpack 如何检测目录中的文件更改。
它使用添加 OS 级别支持的 2 个软件之一来监视文件更改,称为 inotify 和 fsevent。标准 Docker 图像通常没有预安装这些(特别是 linux 的 inotify),因此您必须将其安装在 Docker 文件中。
在发行版的包管理器中查找 inotify-tools 包并安装它。幸运的是所有的alpine, debian, centos都有这个。
将 webpack-dev-server 与 Encore and exposing it through Docker, you we'll need to use --host 0.0.0.0
and --public localhost:8080
so files are served even on browsers 一起使用时。
这是我使用的:
webpack-dev-server --hot --host=0.0.0.0 --public=localhost:8080
我创建了一个 docker 图像,它使用容器内部的 webpack 提供一个简单的 React 应用程序,但我在浏览器中什么也得不到。
这是我的配置文件
package.json
{
"name": "invas_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --inline --content-base ."
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"http-server": "^0.8.5",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
Dockerfile
# Use starter image
FROM node:argon
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . /usr/src/app
# Expose port
EXPOSE 8080
# Default command to run
CMD ["npm", "start"]
什么工作正常
当我运行npm start
时,webpack-dev-server
运行正常,当我去http://localhost:8080时,我看到我的页面。
什么不起作用
当我 运行 我的服务器使用 docker 时,使用以下命令:
docker build -t anubhav756/app . && docker run -p 80:8080 anubhav756/app
日志显示容器内一切正常,但当我将浏览器指向 http://localhost 时,我得到 ERR_CONNECTION_RESET
示例代码结束here
您实际上只在本地主机上收听。 要从外部访问,请替换 package.json 文件中的以下行:
"start": "webpack-dev-server --inline --content-base ."
作者:
"start": "webpack-dev-server --host 0.0.0.0 --inline --content-base ."
相关讨论:https://github.com/webpack/webpack-dev-server/issues/147
如果您无法在容器内启用 webpack-dev-server 的热重载,我只想在 Raphayol 的回答中添加一些内容。
即使将我的项目文件夹安装到容器中,我也无法使 webpack 或 webpack-dev-server watch (--watch) 模式工作。
要解决此问题,您需要了解 webpack 如何检测目录中的文件更改。
它使用添加 OS 级别支持的 2 个软件之一来监视文件更改,称为 inotify 和 fsevent。标准 Docker 图像通常没有预安装这些(特别是 linux 的 inotify),因此您必须将其安装在 Docker 文件中。
在发行版的包管理器中查找 inotify-tools 包并安装它。幸运的是所有的alpine, debian, centos都有这个。
将 webpack-dev-server 与 Encore and exposing it through Docker, you we'll need to use --host 0.0.0.0
and --public localhost:8080
so files are served even on browsers
这是我使用的:
webpack-dev-server --hot --host=0.0.0.0 --public=localhost:8080