React uygulamamı Cloud9.io'daki bir Webpack geliştirici sunucusunda çalıştırırken "Geçersiz Ana Bilgisayar üstbilgisi" iletisi alıyorum

Bir ortam olarak, bir Cloud9.io ubuntu VM Online IDE kullanıyorum ve bu hatayı yalnızca Webpack dev sunucusuyla çalıştırarak bu sorunu gidererek azalttım.

Ben ile başlatmak:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$ IP, ana bilgisayar adresi $ PORT olan port numarası olan bir değişkendir.

Varsayılan IP ve PORT bilgilerine sahip oldukları için bir uygulamayı Cloud 9'da dağıtırken bu değişkenleri kullanmam isteniyor.

Sunucu botlar kodu, hiçbir sorun yukarı ve derler, bu bir değil bana rağmen dizin dosyasını gösteren. Yalnızca metin olarak "Geçersiz Ana Bilgisayar üstbilgisi" bulunan boş bir ekran.

Bu İstek:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

Bu benim package.json:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

Bu webpack.config.js'dir:

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

Webpack dev sunucusu, ana bilgisayar kurulumum nedeniyle bunu döndürüyor. Webpack-dev-server / lib / Server.js satır 60'da. Https://github.com/webpack/webpack-dev-server adresinden

Sorum şu: Bu kontrolü doğru bir şekilde geçmek için nasıl ayarlarım. Herhangi bir yardım büyük mutluluk duyacağız.

webpack-dev-server2.4.4 bir ana bilgisayar denetimi eklediği için sorun oluşur . Bunu webpack yapılandırmanıza ekleyerek devre dışı bırakabilirsiniz:

 devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it

 }      

EDIT: Lütfen bu düzeltmenin güvensiz olduğunu unutmayın.

Güvenli bir çözüm için lütfen aşağıdaki cevaba bakın: https://stackoverflow.com/a/43621275/5425585

publicDevServer özelliğini isteğimin ana bilgisayar değerine ayarlamam gerektiğini öğrendim. Bu harici adreste görüntülenecek olması.

Bu yüzden webpack.config.js dosyamda buna ihtiyacım vardı

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

Başka bir çözüm CLI'de kullanıyor:

webpack-dev-server --public $ C9_HOSTNAME <- Cloud9 harici IP için var

Benim için işe yarayan buydu:

Webpack.config.js dosyasında devServer altında allowedHosts ekleyin:

devServer: {
  compress: true,
  inline: true,
  port: '8080',
  allowedHosts: [
      '.amazonaws.com'
  ]
},

--Host veya --public parametrelerini kullanmama gerek yoktu.

Webpack-dev-server kullanırken bu yapılandırmayı webpack yapılandırma dosyanıza ekleyin (ana bilgisayarı yine de 0.0.0.0 olarak belirleyebilirsiniz).

devServer: {
    disableHostCheck: true,
    host: '0.0.0.0',
    port: 3000
}

Daha güvenli seçenek, Webpack yapılandırmanıza aşağıdaki gibi allowedHosts eklemek olacaktır:

module.exports = {
devServer: {
 allowedHosts: [
  'host.com',
  'subdomain.host.com',
  'subdomain2.host.com',
  'host2.com'
   ]
  }
};

Dizi izin verilen tüm ana bilgisayarları içerir, altyazıları da belirtebilirsiniz. buradan daha fazla göz atın

Henüz CRA'dan çıkmadıysanız, webpack yapılandırmanızı kolayca değiştiremezsiniz. Yapılandırma dosyası gizli node_modules/react_scripts/config/webpackDevServer.config.js. Bu yapılandırmayı değiştirmeniz önerilmez.

Bunun yerine, ana bilgisayar denetimini devre dışı bırakmak için ortam değişkenini DANGEROUSLY_DISABLE_HOST_CHECKşu trueşekilde ayarlayabilirsiniz :

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start  
# or the equivalent npm command

Webpack yapılandırma dosyasını düzenlemek yerine, ana makine denetimini devre dışı bırakmanın daha kolay yolu .env, kök klasörünüze bir dosya eklemek ve bunu koymaktır :

DANGEROUSLY_DISABLE_HOST_CHECK=true

Değişken adından da anlaşılacağı gibi, devre dışı bırakmak güvenli değildir ve yalnızca geliştirme ortamında kullanılması tavsiye edilir .

C9'da create-tepki uygulaması kullanıyorsanız, başlatmak için bu komutu çalıştırın

npm run start --public $C9_HOSTNAME

Ve ana bilgisayar adınız ne olursa olsun uygulamaya erişin (örneğin $C_HOSTNAMEana bilgisayar adını almak için terminali yazın)

webpack-dev-serverBir kapsayıcıda çalışıyorsanız ve kapsayıcı adıyla istekte bulunuyorsanız, bu hatayı alırsınız. Aynı ağdaki diğer kapsayıcılardan gelen isteklere izin vermek için, --publicseçeneği kullanarak kapsayıcı adını (veya kapsayıcıyı çözmek için kullanılan herhangi bir adı) sağlamanız yeterlidir . Bu, güvenlik kontrolünü tamamen devre dışı bırakmaktan daha iyidir.

Benim durumumda, docker-compose webpack-dev-serveradlı bir kapta çalışıyordum assets. Start komutunu şu şekilde değiştirdim:

webpack-dev-server --mode development --host 0.0.0.0 --public assets

Ve diğer konteyner şimdi üzerinden istekte bulunabildi http://assets:5000.