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

时间:2017-01-19 19:58:17

标签: node.js docker webpack docker-compose dockerfile

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

我有一个使用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将您的容器菜单推送到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 creator:

{
  "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而不是#34; Safari无法打开此页面#34;。

接近忘记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

感谢任何消息或建议。

祝大家有个美好的一天,谢谢你的时间!

1 个答案:

答案 0 :(得分:0)

只需在npm start中添加--host=0.0.0.0参数即可解决问题。

编辑后我的package.json似乎是:

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