소개

이 기사는 Mac + iPhone이라는 환경을 가정합니다.
Win + Android도 기본적인 점은 공통입니다.

확인 사항

PC와 스마트폰이 같은 네트워크화에 있는지 확인

WiFi의 경우, 기본적으로는 같은 SSID로 접속하고 있으면 같은 네트워크입니다.

방화벽 설정을 OFF로 설정

[システム環境設定]>[セキュリティとプライバシー]>[ファイアウォール]

localhost 시작

명령줄에서 개발 중인 디렉토리에서 http 서버를 시작합니다.

Python2의 경우

$ python -m SimpleHTTPServer

python3의 경우

$ python3 -m http.server

실행 예

$ python3 -m http.server                                                                                                      
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

선택적으로 포트 번호를 지정하지 않으면 위와 같이 8000번을 사용합니다.
PC의 확인은 브라우저에서 localhost:8000에 액세스하기만 하면 됩니다.

참조 : 개발용 로컬 서버를 시작하는 방법

스마트 폰에서 액세스

방법①：ngrok로 호스팅(이쪽이 간단)

brew 에서 ngrok을 설치합니다.

$ brew install ngrok

설치가 완료되면 위의 단계를 통해 로컬 호스트를 시작합니다.
거기에서 사용하는 포트 번호를 지정하여 ngrok에서 호스팅을 시작합니다.

$ ngrok http 8000

이런 느낌으로 일어납니다.

ngrok by @inconshreveable                                                                             (Ctrl+C to quit)

Session Status                online
Session Expires               1 hour, 59 minutes
Update                        update available (version 2.3.38, Ctrl-U to update)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://b885d499a91a.ngrok.io -> http://localhost:3000
Forwarding                    https://b885d499a91a.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

https://b885d499a91a.ngrok.io 이렇게 게시된 URL에 액세스하면 페이지가 열립니다.
스마트 폰의 경우 캐시 지우기가 번거롭기 때문에 브라우저를 비공개 모드로 전환하는 것이 좋습니다.

방법②: 로컬 네트워크의 IP 주소로 연결

Mac의 IP 주소 표시

[システム環境設定]>[ネットワーク]>[詳細]>[TCP/IP]IPv4アドレス: 192.168.11.43 는 로컬 네트워크에서이 터미널의 주소입니다.
일반적으로 로컬 IPv4 주소는 192.168.XX.XX 와 같은 형태를 하고 있습니다.
이 주소는 고정이 아니므로 네트워크에 연결할 때마다 해당 시간의 주소를 확인하십시오.



또는 ifconfig 에서 확인하는 경우

$ ifconfig en0 inet                                                                                                            
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    inet ⭐️192.168.11.43⭐️ netmask 0xffffff00 broadcast 192.168.11.255

iPhone 브라우저에서 액세스

[ローカルIPアドレス] : [ポート番号] 로 표시할 수 있습니다.



스마트 폰의 경우 캐시의 클리어가 번거롭기 때문에 브라우저의 비공개 모드에서 확인하면 되겠습니다.

액세스할 수 없는 경우 확인 사항

http 서버를 시작하는 디렉토리가 맞습니까?

방화벽이 꺼져 있습니까?

PC와 스마트폰이 같은 네트워크 아래에 있습니까?

Mac의 IP 주소와 포트 번호가 최신입니까?