로컬 네트워크의 장치에서 webpack-dev-server에 액세스하는 방법은 무엇입니까?

일부 웹팩 개발 서버 구성이 있습니다 (전체 구성의 일부입니다).

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

다음 명령으로 webpack을 실행합니다.

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

http://localhost:8080로컬 컴퓨터에서 사용하여 dev 서버에 액세스 할 수 있지만 모바일, 태블릿 (동일한 Wi-Fi 네트워크에 있음)에서도 서버에 액세스하고 싶습니다.

어떻게 활성화 할 수 있습니까? 감사!

(당신이 Mac과 나와 같은 네트워크를 사용한다면.)

--host 0.0.0.0다음을 사용하여 webpack-dev-server 실행 — 서버가 로컬 호스트뿐만 아니라 네트워크의 요청을 수신 할 수 있습니다.

네트워크에서 컴퓨터 주소를 찾습니다. 터미널 ifconfig에서 en1섹션 또는 다음과 같은 섹션을 입력 하고 찾습니다.inet 192.168.1.111

동일한 네트워크의 모바일 장치에서 http://192.168.1.111:8080핫 리로딩 dev bliss를 방문 하여 즐기십시오.

webpack 구성 파일에서 직접 IP 주소를 설정할 수 있습니다.

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

완벽한 솔루션이 아닐 수도 있지만 ngrok 를 사용할 수 있다고 생각합니다 . Ngrok 는 로컬 웹 서버 를 인터넷에 노출하는 데 도움을 줄 수 있습니다. 로컬 개발 서버에서 ngrok를 가리킨 다음 ngrok URL을 사용하도록 앱을 구성 할 수 있습니다.

예를 들어 서버가 포트 8080에서 실행되고 있다고 가정합니다 . ngrok를 사용하여 실행을 통해 외부 세계에 노출 할 수 있습니다.

./ngrok http 8080

좋은 점은 작업을 테스트하거나 보여주기 위해 전 세계의 다른 사람에게 제공하는 노출 된 URL ngrok의보다 안전한 https 버전을 제공한다는 것입니다.

또한 노출 된 URL에 임의의 문자열 대신 사용자 친화적 인 호스트 이름 을 설정하는 등 명령에서 사용할 수있는 많은 사용자 지정 기능이 있습니다 .

모바일 반응을 확인하기 위해 웹 사이트를 열고 싶다면 browersync 를 선택해야합니다 .

저에게 도움이 된 것은 결국 이것을 webpack-dev-server 구성에 추가하는 것이 었습니다.

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

그런 다음 babel의 webpack.config.js 파일도 변경합니다.

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

이제 컴퓨터 호스트 이름 ( hostnameOSX의 터미널에서)을 얻고 정의한 포트를 추가 하기 만하면 모바일을 사용할 수 있습니다.

ngrok.io와 비교하여이 솔루션을 사용하면 모바일에서 react의 핫 리로딩 모듈을 사용할 수 있습니다.

forresto의 답변에 추가 정보를 추가하기 위해 댓글을 달 수 없었지만 향후 (2019) --public에는 보안 취약성으로 인해 플래그 를 추가해야합니다 --host 0.0.0.0. 확인 이 댓글 자세한 내용을.

답변으로 "다른 답변에 대한 응답"을 피하기 위해 여기에 forresto의 조언과이 작업을 수행하는 데 필요한 추가 세부 정보가 있습니다.

둘 다 추가 :

--host 0.0.0.0

과

--public <your-host>:<port>

여기서 your-host는 호스트 이름 (저에게는 (name) s-macbook-pro.local))이고 port는 액세스하려는 포트입니다 (다시 말하지만, 저에게는 8081입니다).

그래서 내 package.json은 다음과 같습니다.

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },