로컬 환경을 스마트 폰 실제 기기 (Android, iOS)로 확인하는 방법

배경

업무로 web사이트(HTML,CSS,JS)를 작성하고 있어, PC의 브라우저로 디자인(PC/SP)을 확인하면서 진행하고 있었습니다.
작업도 종반에 걸려, SP디자인의 표시를 스마트폰 실기를 사용해 확인하고 싶다고 디자이너로부터 요망이 있었을 때에 한 일의 메모나 막힌 것을 정리했습니다.
※ 꽤 간단하게 할 수 있었습니다.

목차

1. 간단한 웹 서버 준비
2. 실제 기기의 브라우저에 로컬 호스트의 URL을 입력합니다.
3. 막힌 것

1. 간단한 웹 서버 준비

http-server라는 것이 있습니다.
아래와 같은 때에 편리합니다.

웹 사이트에 서버 측 (Ruby.PHP ... etc)
조금 확인하고 싶은 것만으로, 번거로운 설정을 하고 싶지 않다.

npm을 사용하여 설치할 수 있습니다.

npm install -g http-server　　　　　　// PCのグローバル環境にhttp-serverをインストール

이것만.
그런 다음 작업중인 디렉토리로 이동합니다. http-server를 시작합시다.

$ cd [作業ディレクトリ]
$ http-server   // http-serverを立ち上げる

시작하면 포트 번호와 IP 정보가 표시됩니다. 이런 느낌↓
화살표의 곳에, IP(192.00.00.111같은)의 정보가 나오고 있다고 생각합니다.

2. 실제 기기의 브라우저에 로컬 호스트의 URL 입력

스마트 폰 (실기)에서 브라우저를 엽니 다. 주소창에 URL을 직접 입력합니다.

예
http://IP 정보:포트 번호
http://192.00.00.111:8080

이제 스마트 폰 (실기) 화면에 웹 사이트가 표시된다고 생각합니다.

3. 막힌 것

wifi의 라우터 설정으로 Guest 용이라면 다른 단말을 인식 할 수없는 것 같습니다.
표시되지 않았습니다.
wifi를 전환하면 표시됩니다.
라우터 설정에 대한 자세한 내용은 현장 네트워크 관리자에게 문의하여 확인해 보십시오.

참고 사이트

http-server를 설치할 때 참고로 한 사이트
htps : // 노래. jp / 엔트리 / 2018/02 / n pmh t tpse r ゔぇr /