로컬 네트워크의 장치에서 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);
  };
}

다음 명령을 사용하여 웹 팩을 실행합니다.

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과 같은 네트워크에 있는 경우)

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

네트워크에서 컴퓨터 주소를 찾습니다.터미널에 다음을 입력합니다.ifconfig그리고 그것을 찾습니다.en1섹션 또는 비슷한 것이 있는 섹션inet 192.168.1.111

동일한 네트워크의 모바일 장치에서http://192.168.1.111:8080그리고 뜨거운 새로고침 데브 블리스를 즐깁니다.

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

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

완벽한 해결책은 아닐 수도 있지만 이를 위해 ngrok를 사용할 수 있다고 생각합니다.Ngrok는 로컬 웹 서버를 인터넷에 노출시키는 것을 도와줄 수 있습니다.로컬 개발 서버에서 ngrok를 가리킨 다음 ngrok URL을 사용하도록 앱을 구성할 수 있습니다.

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

./ngrok http 8080

좋은 점ngrok즉, 노출된 URL의 보다 안전한 https 버전을 제공합니다. 이 URL은 전 세계의 다른 사람에게 제공하여 작업을 테스트하거나 보여줍니다.

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

모바일 응답을 확인하기 위해 웹 사이트를 열고 싶다면 브라우저 동기화를 선택해야 합니다.

저에게 도움이 된 것은 결국 이것을 웹팩-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 과 비교하여 이 솔루션은 모바일에서 리액트의 핫 리로드 모듈을 사용할 수도 있습니다.

포레토의 답변에 추가 정보를 추가하기 위해 코멘트를 달 수는 없지만, 앞으로(2019년) 여기에 추가해야 할 것입니다.--public 안보취플래로 플래그 --host 0.0.0.0혼자. 자세한 내용은 이 댓글에서 확인하세요.

"다른 답변에 대한 답변"을 피하기 위해 이 작업을 수행하는 데 필요한 추가 세부 정보와 함께 다음과 같은 조언을 제공합니다.

둘 다 추가:

--host 0.0.0.0

그리고.

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

여기서 host는 호스트 이름이고(나의 경우 (이름)s-hosts-pro.local) 포트는 액세스하려는 포트입니다(나의 경우 8081).

이것이 제 소포입니다.json 모양은 다음과 같습니다.

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

다음 요구 사항을 충족할 수 있는 솔루션을 검색하던 중 이 스레드를 발견했습니다.

• 공용 IP를 사용하여 URL을 자동으로 엽니다.를 들면, 들면를예,http://192.168.86.173:8080따라서 브라우저에서 복사하여 네트워크의 다른 장치로 전송할 수 있습니다.
• dev 서버를 로컬 네트워크에서 사용할 수 있습니다.

웹팩 4

devServer: {
  host: '0.0.0.0',
  useLocalIp: true,
}

웹팩 5

devServer: {
  host: 'local-ip',
}

와 함께webpack-dev-server 필요합니다. v4.0.0+

devServer: {
  host: '0.0.0.0',
  port: 8030,
  allowedHosts: ['all'] // or use 'auto' for slight more security
}

여기 있는 다른 답변들을 모두 시도했지만 성공하지 못했다면...또한 컴퓨터에서 실행 중인 방화벽이 없는지 확인하거나 컴퓨터에서 필요한 포트를 엽니다.

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