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

로컬 네트워크의 장치에서 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내 로컬 컴퓨터에서 사용하여 개발 서버에 액세스 할 수 있지만 내 모바일, 태블릿 (동일한 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,
    ...
}

---

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

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

./ngrok http 8080

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

Also it has lots of customization available in the command such as set a user friendly hostname instead of random string in the exposed url and lots of other thing.

If you just want to open your website to check mobile responsiveness you should go for browersync.

---

For me, what helped eventually was adding this to the webpack-dev-server config:

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

and then also changing babel's webpack.config.js file:

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

Now just get your computer hostname (hostname on OSX's terminal), add the port you defined, and you're good to go on mobile.

Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.

---

I could not comment in order to add additional information to forresto's answer, but here in the future (2019) you'll need to add a --public flag due to a security vulnerability with --host 0.0.0.0 alone. Check out this comment for more details.

In order to avoid "responding to other answers" as an answer here's forresto's advice plus the additional details you'll need to make this work:

Add both:

--host 0.0.0.0

and

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

where your-host is the hostname (for me it is (name)s-macbook-pro.local)) and port is whatever port you're trying to access (again, for me it's 8081).

So here's what my package.json looks like:

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

참고URL : https://stackoverflow.com/questions/35412137/how-to-get-access-to-webpack-dev-server-from-devices-in-local-network