모바일에서 리액트 앱 미리보기를 만드는 방법

모바일에서 리액트 앱 미리보기를 만드는 방법

나는 그것을 사용하고 있다.create-react-app하려면 , 「 」를 참조해 주세요.yarn start를 버를에서 http://localhost:3000/URL을 사용합니다.모바일에서 앱을 미리 볼 수 있도록 하려면 어떻게 해야 하나요?

먼저 데스크톱 브라우저(최소한 Chrome 및 Firefox)에서 모바일 보기를 열 수 있습니다.상세한 것에 대하여는, 기사를 참조해 주세요.실제 모바일 디바이스에서의 테스트를 대체하는 것은 아니지만 보다 명확한 문제를 식별할 수 있습니다.

둘째, 로컬 네트워크에서 컴퓨터의 IP 주소를 사용해야 합니다(모바일 장치가 데스크톱과 동일한 네트워크에 있다고 가정). 와 에서는, 의 를 할 수 있습니다.ifconfig 「」를 사용합니다.ipconfig를 클릭합니다. localhost의 기계.localhost데스크톱에서는 데스크톱을 가리키고 모바일 디바이스에서는 모바일 디바이스를 가리킵니다.그렇기 때문에 앱은 모바일이 아닌 바탕화면에서 실행이 때문에 액세스 할 수 없는 이유입니다.

, 「IP 주소」, 「IP 주소」를 치환할 .localhost지고있있 있있있다다, .10이기 에 다음 .

http://192.168.1.10:3000/

잊어버린 두 가지 점을 제외하고 모든 답은 정답입니다.

1. 네트워크는 개인 네트워크여야 합니다.Windows 10에서 wifi 아이콘을 클릭하여 네트워크 이름을 클릭하면 속성 옵션이 표시되고 네트워크 프로파일 섹션에서 개인으로 설정합니다.

2. 할 수 .npm run startIP를 사용합니다.다른 친구들이 언급했듯이 cmd를 열고 다음과 같이 입력합니다.ipconfigEnter 키를 누르면 모두 한 줄의 세 부분이 표시됩니다.IPv4 Address, 리액트응용 프로그램의 포트 번호로 이 모든 IP 주소를 사용해 보세요.이것이 도움이 되었으면 합니다.

실제 디바이스에서 테스트하는 경우(권장사항) 휴대전화가 컴퓨터와 동일한 네트워크에 연결되어 있는지 확인한 후 실행 시

yarn start
npm run start 

다음과 같이 표시됩니다.

On Your Network:  http://172.xx.xx.xxx:3000/

모바일 브라우저에 IP 주소를 입력하고 웹 애플리케이션을 테스트합니다.

1. cmd(윈도우):ipconfig

2. IPV4: IP "IPV4" 를 .

3. 브라우저의 URL 검색창에 다음과 같이 입력합니다(예). 192.168.1.4:3000이 실행되고 입니다.3000 리 3000 、 3000 、 3000 3000 、 3000 3000 that 。

4. 모바일 브라우저(Chrome 권장)가 최신 업데이트인지 확인하십시오. Chrome이 업데이트되지 않았기 때문에 리액트 앱이 로드되지 않았습니다.

1. cmd에 ipconfig를 입력합니다...
2. 퍼블릭 IP 보기
3. 모바일 웹 브라우저에 해당 공용 IP를 포트 번호로 입력합니다.예: 192.168.0.175:3000/your_route
4. 즐기세요(같은 wifi에 접속되어 있는지 확인하세요.

이 투고는 매우 유용한 정보로 가득합니다만, 특히 리액트 앱에 대해 몇 가지 부족한 점을 덧붙입니다.

create-react-app을 사용하는 경우

이 경우 리액트 앱을 시작하면 아래 그림과 같이 단말기에서 앱에 액세스할 수 있는 URL이 표시됩니다.

create-react-app(웹팩일 가능성이 있음)을 사용하지 않는 경우

1. react-app 서버(webpack-dev-server for webpack)를 실행합니다.
2. 이 명령을 사용하여 로컬 IP 가져오기ip route get 1.2.3.4 | awk '{print $7}', 를 사용하면, Windows 로 IP 를 취득할 수 있습니다.ipconfigipv4 주소로 지정합니다.
3. 간단하게 말하면http://<local-ip>:<port-number>비슷한 것http://192.168.1.106:3000모바일 브라우저에서 쾅 소리가 납니다.

주의: 위의 조치는 모바일과 서버 머신이 모두 같은 네트워크에 연결되어 있는 경우에만 유효합니다.

Windows의 경우:

1. cmd 단위의 ipconfig를 사용하여 공용 IP를 찾습니다.무선 LAN 어댑터 Wi-Fi에서 IPv4 주소를 찾습니다.전화기와 PC가 같은 LAN(같은 WiFi에 연결)에 있는지 확인합니다.사용하다http://your_ip:3000리액션 앱을 미리 볼 수 있습니다.
2. 힌트: 전화기의 GPS 서비스를 테스트하려면 https 프로토콜을 사용해야 합니다.저 같은 경우에는 GPS를 사용하여 기능을 테스트하기 위해 Heroku에 도입했습니다.

Mac os Catalina에서는 다음과 같이 터미널에서 로컬 IP를 찾을 수 있습니다.

ifconfig

아래(en0)목록에서 다음 주소를 확인합니다.inet

Step 1:  First your system and Mobile should be on same WiFi network.
Step 2:  Run your React Application with   "npm start HOST=0.0.0.0" instead of "npm start"
Step 3:  Open your another terminal and get the your system IP address. for that you need to run "ifconfig" command in your terminal.
Step 4:  Open your mobile browser, and type "192.168.225.99:3000"  in your address bar.This is for Linux Users. [![enter image description here][1]][1]

IP 주소의 특정에 관한 답변과는 별도로 방화벽이 간섭하고 있는 것을 알 수 있습니다.Linux 의 경우는, 디세블로 할 수 있습니다.

sudo ufw disable

그것을 다시 유효하게 하기 위해서

sudo ufw enable

에 호스트명을 추가합니다.hostslocalhost를 가리키는 파일입니다.Windows 에서는, 통상은 다음의 장소에 있습니다.C:\Windows\System32\drivers\etcLinux 에서는 다음 위치에 있습니다./etc/hosts예:

127.0.0.1 my-app.dev

다음으로 머신에 프록시 서버를 설정하고, 그것을 프록시로 사용하도록 전화기를 설정합니다.

그러면 위에서 지정한 호스트 이름을 URL로 사용하여 전화기의 브라우저를 통해 앱에 액세스할 수 있습니다.

create-react-app을 사용한 후 IP 네트워크 링크를 시작하는 경우

하지만 그건 나한테는 안 통하지 않아

1. 터미널을 열고 ipconfig를 엽니다.
2. wifi 어댑터로 IPv4:yuIpNumber 를 사용하고 있는지 확인합니다.
3. http://yourIpNumber:3000 //PORT를 추가해야 합니다.

경우에 따라서는 모바일브라우저가 접속을 거부하거나 접속 타임아웃을 할 수 있습니다.이러한 경우는, 다음의 간단한 순서(Windows 유저)를 따릅니다.

1. Windows Defender 방화벽으로 이동합니다.
2. [상세설정]을 클릭합니다.
3. 인바운드 규칙 선택
4. 다음, 새로운 규칙
5. 다음으로 [Port]> [ All Local Ports ( TCP Check ) ]> [ Allow All Connections ]> [ Give Any Name ]> [ Done ]의 순서로 선택합니다.

리액트 앱 윈도 방화벽 로컬 호스트

가장 쉬운 방법은 로컬포트에 대한 터널을 사용하여 "localhost:"를 터널 URL로 대체하는 것입니다.터널 URL은 어디서든 액세스할 수 있습니다(제가 아는 한).저는 ngrok을 사용합니다.Ngrok 문서는 시작하기에 매우 간단합니다.https://ngrok.com/docs

언급URL : https://stackoverflow.com/questions/45760350/how-to-make-react-app-preview-on-mobile