如何使用webpack启动应用程序以在Docker容器中进行生产？

Question

感谢您浏览此页面。 希望你能留下任何评论，这对我有帮助。

我有一个使用React + Redux和Webpack的应用程序（使用Webpack开发服务器）。

我已经尝试了几次在Docker容器中的端口8004：8080上启动它，但是不能这样做，不知道为什么。

我的目的是在我的Docker机器上启动许多站点，但首先我需要在本地机器上测试它。

这就是为什么我使用这个代码使用docker-compose.yml文件的原因：

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:

我无法使用Dockerfile将menuforyou容器的菜单推送到localhost：8004：

FROM node:7.4.0-onbuild

EXPOSE 8080

当然，我需要发布我的可怜的webpack配置“menuforyou”js网站：

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'
            }
        ]
    }
};

不是没有package.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"
  }
}

所以，我发生了什么，我仍然无法从localhost：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"
},
...