无法在docker内部运行webpack-dev-server

Question

无法在docker内部运行webpack-dev-server

31

我已经创建了一个Docker镜像，其中包含一个简单的React应用程序，使用容器内部的Webpack进行服务，但在浏览器中什么也没有显示出来。

以下是我的配置文件： 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错误。

示例代码在这里。

- Anubhav Dhawan

你是在 Linux 上本地运行 Docker，还是使用 Docker Machine 在虚拟机中运行？如果是在虚拟机中运行，则容器端口已发布在虚拟机内部，因此您需要浏览到其 IP 地址 - docker-machine ip。 - Elton Stoneman

@EltonStoneman 原生支持 Linux。 - Anubhav Dhawan

docker ps 显示如下内容：容器 ID 镜像命令创建时间状态端口名称 c25001e81847 anubhav756/invas_client "npm start" 16 秒前正在运行 14 秒 0.0.0.0:80->8080/tcp berserk_hoover - Anubhav Dhawan

iptables -L 显示： DOCKER 链 (3 个引用) 目标协议选项来源地目的地
接受 tcp -- 任何地方 172.17.0.2 tcp dpt:http-altDOCKER-ISOLATION 链 (1 个引用) 目标协议选项来源地目的地
拒绝所有 -- 任何地方任何地方
拒绝所有 -- 任何地方任何地方
拒绝所有 -- 任何地方任何地方
返回所有 -- 任何地方任何地方 - Anubhav Dhawan

在终端输入以下命令：root@c25001e81847:/usr/src/app# curl http://localhost:8080 返回结果如下： <!doctype html><html> <meta charset=utf-8/> <title>React</title> <div id="app"></div> <script src="bundle.js"></script> - Anubhav Dhawan

显示剩余4条评论

4个回答

6

如果您无法在容器内启用webpack-dev-server的热重载功能，我希望可以补充Raphayol所说的内容。
即使将项目文件夹挂载到容器中后，我也无法让webpack或webpack-dev-server进入（- -watch）模式。
要解决此问题，您需要了解webpack如何检测目录中的文件更改。它使用两个软件之一来添加操作系统级别的文件更改监视支持，称为inotify和fsevent。标准Docker映像通常没有这些预安装（特别是针对Linux的inotify），因此您需要在Dockerfile中安装它。
在您的发行版包管理器中查找inotify-tools包并安装它。幸运的是，所有alpine、debian和centos都有这个软件包。

- HosseinAgha

4

使用webpack-dev-server与Encore并通过Docker公开时，您需要使用--host 0.0.0.0 和 --public localhost:8080，以便即使在浏览器不导航到0.0.0.0地址时也可以提供文件服务。

这是我使用的内容：

webpack-dev-server --hot --host=0.0.0.0 --public=localhost:8080

- Hugo H

0

为了补充Hugo H所说的，对我来说，我必须执行以下操作，才能让encore dev-server在远程服务器上的docker上正常工作，其中dev-server在声明地址上运行：

1）在webpack.config.js中：

.configureDevServerOptions(options => {
    options.allowedHosts = 'all';
    options.host = '0.0.0.0';

    options.client       = {
        webSocketURL: 'https://encore-webserver.domain/ws'
    };
})

在 package.json 文件中：

"dev-server": "encore dev-server --public https://encore-webserver.domain --port 80 ",

encore-webserver.domain指向一个节点Docker容器，该容器公开端口80并简单运行npm run dev-server

这些页面帮助我解决了我的问题：

- Jack The Grim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raphayol · Accepted Answer

您实际上只在本地主机上进行侦听。要从外部访问，请在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