개발하다 로컬을 태블릿이나 핸드폰으로 보고싶을때(+ 카메라 사용하고 싶을때)

짱효·2024년 10월 18일
1

✏️

목록 보기
2/5
post-thumbnail

개발하다가 로컬화면을 태블릿이나 핸드폰으로 보고싶은 상황이 온다!
(반응형을 볼때 많이 그런다!)

  • pc 와이파이랑 공유하고 싶은 기기랑 똑같은 와이파이 공유하기!
  • pc에 와이파이 설정 들어가서 사용하고 있는 *와이파이 ip
  • 로컬로 구동할때 *localhost:포트번호

위에 모두 준비가 완료됐다면!!!
로컬 사이트를 보고싶은 기기에 브라우저에 들어가서 주소 창에!

[와이파이 ip]:[로컬호스트 포트 번호]

예를 들어
123.123.123.12:1000

이렇게 작성해주면 끝난다!

근데 왜 카메라는 구동이 안되지,,?(next.js)

그건 바로 http이기 때문!!
https로 바꿔줘야 잘 구동이 된다~~~

(ㅠㅠ 그건 어떻게 해야하는건데ㅠㅠ)

그걸 도와주는 사이트 하나!(*next.js용 입니당)
https://vercel.com/guides/access-nextjs-localhost-https-certificate-self-signed

이것만 붙여주면 끝!

next dev --experimental-https
  1. package.json파일로 들어가서 하단 dev 아래에
 "dev": "next dev -p [포트번호]",
  1. "devHttps"이런 이름 만들어서 붙여주기!
"devHttps": "next dev --experimental-https -p [포트번호]",
  1. 터미널가서 구동하고!!
yarn devHttps
또는 
npm run devHttps
  1. 다시 사용하는 기기에 주소창에 http뒤에 s 붙이면 끝!!!!
    전 - http:// 123.123.123.12:1000(예시 주소)
    후 - https://123.123.123.12:1000(예시 주소)

이렇게되면~~~
로컬을 같은 와이파이를 쓴다면 확인할 수 있고~!
카메라도 사용할 수 있습니다~!

이만 여기까2ㅣ

profile
✨🌏확장해 나가는 프론트엔드 개발자입니다✏️

0개의 댓글