Cloud9.io의 Webpack dev 서버에서 React 앱을 실행할 때 "잘못된 호스트 헤더"메시지가 표시됩니다.

Question

Cloud9.io 우분투 VM 온라인 IDE 환경으로 사용하고 있는데이 문제를 해결하여 줄였습니다. Webpack dev server로 앱을 실행하는 중 오류가 발생했습니다.

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

$ IP가 $ PORT 포트 번호가 호스트 주소가 변수입니다 :

나는 그것을 실행합니다.

기본 IP 및 PORT 정보가있는 Cloud 9에서 앱을 배포 할 때 이러한 변수를 사용하도록 안내 받았습니다.

서버가 부팅되어 코드를 컴파일해도 아무런 문제가 없습니다. 이 아니며은 색인 파일을 보여줍니다. "잘못된 호스트 헤더"가있는 빈 화면 만 텍스트로 표시됩니다.

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 
    } 
} 

웹팩 dev에 서버가 : 이것은 내 package.json입니다

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 

:

이

는 요청이다

{ 
    "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" 
    } 
} 

이것은 webpack.config.js입니다 내 호스트 설정으로 인해이를 반환합니다. webpack-dev-server/lib/Server.js 줄 60에서. https://github.com/webpack/webpack-dev-server

내 질문은 올바르게이 검사를 통과하도록 설정하는 방법입니다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

devServer의 public 속성을 요청의 호스트 값으로 설정해야한다는 것을 알았습니다. 외부 주소에 표시됩니다. - VAR에 대한

웹팩-DEV-서버 --public $ C9_HOSTNAME <을 : 다른 솔루션은 CLI에 그것을 사용

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

그래서 난 내 webpack.config.js이 필요 Cloud9 외부 IP는

Answer 2

나는 웹팩-DEV-서버 2.4.4 beacuse 호스트 체크를 추가, 이것으로 해결

devServer: { 

    compress: true, 

    disableHostCheck: true, // That solved it 

}  

Answer 3

편집 node_modules/webpack-dev-server/lib/Server.js 라인 (425) 갱신

return true; 

Answer 4

로 라인 당신이 사용하는 경우 생성 - - 응용 프로그램 반응 단지

npm run start --public $C9_HOSTNAME 

를 시작하려면이 명령을 실행 C9에를 그리고 어떤 호스트 이름에서 응용 프로그램에 액세스 터미널에 호스트 이름을 얻기 위해 $C_HOSTNAME을 입력하십시오.