node.js - 如何使用 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

当然，我需要发布我糟糕的“menuforyou”js 站点的 webpack 配置:

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"
},
...