Dockerコンテナでwebpackを使ってアプリを起動するには？

Question

このページをご覧いただきありがとうございます。あなたが私のために役立つ任意のコメントを残すことを願っています。

私は、React + ReduxとWebpack（Webpack dev server ofcourse）のアプリを持っています。

Dockerコンテナ内のポート8004：8080で数回試してみましたが、できません。その理由はわかりません。

私の目的は、私のDockerマシンで多くのサイトを起動することですが、まずローカルマシン内でテストする必要があります。 Dockerfileで8004：私はローカルホストにmenuforyouコンテナをプッシュすることはできません

version: '2' 

services: 
    mysql: 
    build: mysql/ 
    restart: always 
    volumes: 
     - db_data:/var/lib/mysql 
    container_name: mysql 
    vshvetsov: 
    depends_on: 
     - mysql 
    build: vshvetsov/ 
    ports: 
     - 8000:80 
    restart: always 
    container_name: vshvetsov 
    translators: 
    depends_on: 
     - mysql 
    build: translators/ 
    ports: 
     - 8001:80 
    restart: always 
    container_name: translators 
    oral: 
    depends_on: 
     - mysql 
    build: oral/ 
    ports: 
     - 8002:80 
    restart: always 
    container_name: oral 
    proling: 
    depends_on: 
     - mysql 
    build: proling/ 
    ports: 
     - 8003:80 
    restart: `always` 
    container_name: proling 
    menuforyou: 
    build: menuforyou/ 
    ports: 
     - 8004:8080 
    restart: always 
    container_name: menuforyou 
volumes: 
    db_data: 

：

FROM node:7.4.0-onbuild 

EXPOSE 8080 

私はこのコードでドッキングウィンドウ-compose.ymlファイルを使用する理由、です

そしてもちろん、私は「menuforyou」JSサイトの私の貧弱なWebPACKのコンフィグを投稿する必要があります：Pなし

module.exports = { 
    entry: './src/app/App.js', 
    output: { 
     path: './src', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: './src', 
     inline: true, 
     historyApiFallback: true, 
     port: 8080, 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader' 
      } 
     ] 
    } 
}; 

ありませんackage.json、NPMの作成者に感謝：

{ 
    "name": "menuforyou", 
    "version": "1.0.0", 
    "description": "Quest for Middle/Senior developer CSSSR", 
    "main": "./build/bundle.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/VadimShvetsov/MenuForYou.git" 
    }, 
    "homepage": "https://github.com/VadimShvetsov/MenuForYou", 
    "author": "Vadim Shvetsov", 
    "license": "ISC", 
    "dependencies": { 
    "pug-html-loader": "^1.0.9", 
    "react": "^15.3.2", 
    "react-addons-create-fragment": "^15.3.2", 
    "react-autosuggest": "^7.0.1", 
    "react-dom": "^15.3.2", 
    "react-redux": "^4.4.5", 
    "redux": "^3.6.0", 
    "redux-logger": "^2.7.4", 
    "redux-thunk": "^2.1.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.7", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "css-loader": "^0.26.1", 
    "json-loader": "^0.5.4", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

だから、何私はまだローカルホストから得ることができないことを、私と一緒に起こっている：8004何かを代わりに「Safariは、このページを開くことができません」。

menuforyouフォルダのツリーを忘れることが近かった...しかし、それはここにある：

. 
├── Dockerfile 
├── README.md 
├── package.json 
├── src 
│   ├── app 
│   │   ├── App.js 
│   │   ├── actions 
│   │   │   ├── SearchAction.js 
│   │   │   └── UsersAction.js 
│   │   ├── components 
│   │   │   ├── Form.js 
│   │   │   ├── Main.js 
│   │   │   ├── Search.js 
│   │   │   ├── Users 
│   │   │   │   ├── UserListItem.js 
│   │   │   │   └── UsersList.js 
│   │   │   └── Users.js 
│   │   ├── constants 
│   │   │   └── ActionTypes.js 
│   │   ├── reducers 
│   │   │   ├── SearchReducers.js 
│   │   │   ├── UsersReducers.js 
│   │   │   └── rootReducer.js 
│   │   ├── store 
│   │   │   └── configureStore.js 
│   │   ├── styles 
│   │   │   ├── Main.css 
│   │   │   └── Search.css 
│   │   └── utils 
│   │    └── helpers.js 
│   ├── data 
│   │   └── users.json 
│   └── index.html 
└── webpack.config.js 

は、任意のメッセージに感謝または示唆ます。

あなたのお時間をありがとうございます。

Answer 1

この問題は、npm startに--host=0.0.0.0パラメータを追加するだけで解決します。

だから、編集後の私のpackage.jsonは以下のように思える：

... 
"scripts": { 
    "start": "webpack-dev-server --host=0.0.0.0" 
}, 
...