소개

취미로 웹 앱을 개발 중일 때,
지금까지 로컬에서는 MacBook의 브라우저만으로의 체크를 하고 있어,
iPhone에서의 확인은 글로벌 서버에 올라간 후 확인을 하고 있었습니다.

하지만 iPhone에서 확인하면서 미세 조정을 원한다면,
일일이 업하고 수정하고 싶은 것의 반복하는 것은 힘들기 때문에,
로컬에서 iPhone에서 확인할 수있는 방법을 조사했습니다.

인터넷에서 다양한 선인 분들이 지남 해 주고있었습니다 만,
내가 이번 서버를 시작하고 있던 webpack-dev-server를 고려한 방법은 확실히 발견되지 않았으므로, 정리해 둡니다.

전제 조건

MacBook과 iPhone은 동일한 네트워크(Wi-Fi)에 연결해야 합니다.

MacBook 측 조작

먼저 MacBook의 IP 주소를 확인합니다.
MacBook의 IP 주소는 "시스템 환경 설정"→ "네트워크"에서 확인할 수 있습니다.

위 그림의 빨간색 선이 그려져 있음에 설명되어 있습니다.

이번은 만일 IP 주소가 「192.168.10.1」이라고 하는 것으로 해서 이하 진행해 갑니다.

확인한 IP 주소를 package.json에 추가합니다.

package.json

"scripts": {
    "start": "webpack && webpack-dev-server --mode development --host 192.168.10.1",

이 상태에서 npm start를 두드리면,
기본적으로

Project is running at http://localhost:8080/

되었던 곳이,

Project is running at http://192.168.10.1:8080/

라는 표기로 바뀝니다.

이상으로, MacBook측의 조작은 종료입니다!

iPhone 측 조작

safari, Google Chrome 등의 브라우저를 열고 URL 부분에http://192.168.10.1:8080를 입력합니다.

이상으로 iPhone 측의 조작은 종료입니다!

나는 이것으로 연결할 수 있었다!
이상입니다!