Nuxt 프로젝트 localhost 모바일에서 확인하기

FE개발자 분과 디자이너 님께서 작업하시다가 불편하신 점이 있어서 해결해 드린 경험을 기록으로 남기려고 해요.

팀이 작기 때문에 FE개발자 분께서 개발하신 부분을 디자이너 님이 모바일 화면으로 바로바로 확인하고 싶어 하셨어요.

Nuxt 프로젝트를 모바일에서 확인하는 방법은 다음과 같아요.

 

 

1. nuxt.config.js 파일을 다음과 같이 변경한다.

  server: {
    host: '0'
  },

 

2. PC와 모바일을 같은 와이파이로 설정한다.

 

3. yarn dev로 프로젝트를 실행하게 되면 다음과 같이 접속 가능한 url을 알 수 있다.

 

 

이 외에도 저희 서비스의 BE 부분과 연동하는 코드인 127.0.0.1을 접속 가능한 url 로 변경해서 BE 와도 연결해 드렸어요!

매일 보는 것이 아니라 어느정도 작업하고 그 작업 결과 확인하시는 용도라서 필요할 때마다 저런 방식으로 확인 가능하도록 도와드릴 예정이에요:)

 

참고

https://debbie.codes/blog/nuxt-configure-server-to-see-site-on-mobile/