[240807 TIL] 모바일기기에서 개발해야할 때

모바일에서 테스트해야만 할때

개발을 하다보면 모바일에서 직접 보고 싶을때가 있습니다.

 

그럴때는 자신의 와이파이 IP 를 알아낸 뒤
모바일기기에서 localhost:3000 대신
192.168.xx.xx:3000 으로 접속하면 됩니다.

 

그런데 해당 상황에서 nextjs 라우트핸들러를
쓰거나 뭐 하면 fetch 가 다 실패하게 됩니다.

 

왜냐하면 localhost:3000으로 잡혀있는데
날라오는곳은 192.168.xx.xx 여서 그런것 같습니다.

 

예를들어 로그인 시 api/auth/login 으로 날린다~ 라면
이 요청이 실패하게 되고 loaded failed 등의 에러가 잡힐 것입니다.

 

이럴때 임시적으로 대처할 수 있는 방법을 찾았습니다.

package.json 수정

방법은 간단했습니다.

package.json 에 아래와 같은 구문을 추가합니다.

"scripts": {
    "proxy": "next dev -H 192.168.xx.xx",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
},

 

네임은 걍 프록시 라고 했지만 의미는 없고 아무거나 하면 됩니다.
하지만 -H 뒤의 주소는 자신의 테스트할 IP주소를 적어야 합니다.

서버사이드 fetch url 수정

만일 클라이언트 사이드 fetch 만 있고
/api/어쩌구저쩌구

이런 식으로만 fetch endpoint 를 설정했다면 더 건드릴 것은 없습니다.

 

하지만 서버사이드 fetch 가 있는 경우에는 도메인을 다 적어줘야 하지 않습니까?

 

이럴 경우 배포 상황을 생각해서 대개 직접 적기보다는
.env.local 파일 등을 사용해서

NEXT_PUBLIC_BASE_URL 등을 설정하고 있을 것입니다.

 

이제 이 부분을 로컬호스트에서 아래 처럼 바꿔줍니다.

NEXT_PUBLIC_BASE_URL="http://192.168.xx.xx:3000"

 

그리고 yarn dev 대신에 yarn proxy 를 실행하면 끝!

 

이제 모바일에서 192.168.xx.xx:3000 로 접속하면 모든 기능이 작동합니다.