问题描述

我正在尝试使用 docker 运行我的 react 应用程序，当我运行容器时，一切似乎都很好，但我无法在 localhost(或 127.0.0.1)上访问它.这是我的配置:

I am trying to run my react app with docker, when I run the container, everything seems fine but I can't access it on localhost (or 127.0.0.1). Here is my configuration:

Dockerfile:

Dockerfile:

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app

COPY package.json /usr/src/app

RUN npm install

COPY . /usr/src/app

EXPOSE 8090

CMD ["npm", "run", "start-test"]

package.json

package.json

"start-test": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.dev.config --inline --hot --history-api-fallback --port 8090 --public localhost:8090 --host 0.0.0.0"

webpack.common.js

webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: [
      // 'react-hot-loader/patch',
      'babel-polyfill',
      path.join(__dirname, 'src', 'index.js'),
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {...},
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'Production',
      // hash: true,
      filename: './index.html',
    }),
    new webpack.NamedModulesPlugin(),
  ],
  resolve: {
    extensions: [' ', '.js', '.jsx', '.json'],
    modules: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'node_modules'),
    ],
  },
};

webpack.config

webpack.config

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    disableHostCheck: true,
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'app.css',
      disable: true,
    }),
  ],
});

当我使用构建时一切都很好

Everything is fine when I build by using

docker build --no-cache . -t seyaa/client

然后我使用启动容器

docker run  seyaa/client

控制台到此结束

> redux-minimal@1.0.0 start-test /usr/src/app
> ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.dev.config --inline --hot --history-api-fallback --port 8090 --public localhost:8090 --host 0.0.0.0

clean-webpack-plugin: /usr/src/app/dist has been removed.
Project is running at http://localhost:8090/
webpack output is served from /
Content not from webpack is served from ./dist
404s will fallback to /index.html
Hash: 64fdd9746e89b58394d3
Version: webpack 3.11.0
Time: 13617ms

终端看起来不错，但我无法访问 http://localhost:8090 或 http://127.0.0.1:8090 或 http://0.0.0.0:8090

The terminal looks fine but I can not access to http://localhost:8090 or http://127.0.0.1:8090 or http://0.0.0.0:8090

任何帮助将不胜感激.

谢谢

我在 mac 上运行

推荐答案

如果这是你的容器的输出，那么你正在监听 localhost 在容器中，这与在主机上不同.让服务器监听 0.0.0.0 而不是 localhost (检查这篇文章) 然后尝试点击 localhost 在您的主机上.从外观上看，您也没有向主机公开任何端口，因此您还需要将 docker run 更改为类似于 docker run -p 8090:8090seyaa/客户端.

If that's the output from your container, then you're listening on localhost in the container, which is not the same as on the host. Make the server listen on 0.0.0.0 instead of localhost (check this post) then try hitting localhost on your host machine. You're also not exposing any ports through to your host by the looks of it, so you'll also need to change your docker run to be something like docker run -p 8090:8090 seyaa/client.

这篇关于docker react 在本地主机中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！