모바일에서 사이트를 볼 수 있도록 Nuxt.js 서버 구성

개발 도구뿐만 아니라 실제 모바일 장치나 태블릿에서 사이트를 테스트하고 싶을 때가 있습니다. 이것은 버그를 수정하거나 실제 환경에서 어떻게 보이는지 확인하는 데 유용합니다.

기본적으로 Nuxt.js 개발 서버 호스트는 호스트 머신 내에서만 액세스할 수 있는 localhost입니다. 즉, 모바일에서 localhost를 열 수 없습니다.

그러나 nuxt.confg.js 파일에서 서버를 수정할 수 있습니다.

export default {
  server: {
    host: '0' // default: localhost
  }
}

Nuxt.js는 '0.0.0.0'의 줄임말인 문자열 값 '0'을 할당하여 로컬 IP 주소를 제공합니다.



이제 애플리케이션을 보기 위해 localhost를 입력하는 대신 로컬 IP 주소를 입력합니다. 이 예에서 광산은 http://192.168.0.199:3000/입니다.

이제 모바일 또는 태블릿으로 이동하여 해당 링크를 사용하여 웹사이트를 열 수 있습니다.

기본 포트는 3000입니다. 변경하려는 경우 port 속성을 사용하여 변경할 수도 있습니다.

export default {
  server: {
    port: 8000, // default: 3000
  }
}

이 포트가 이미 사용 중인 경우 Nuxt.js는 임의의 포트를 제공합니다.



nuxt.config.js 파일에서 수정할 수 있지만 사이트를 호스팅할 때 문제가 발생할 수 있으므로 권장하지 않습니다. dev 명령에서 직접 호스트를 수정하는 것이 훨씬 낫습니다.

HOST=0 npm run dev

또는 원하는 포트

PORT=8000 npm run dev

아니면 둘다

HOST=0 PORT=8000 npm run dev

package.json에서 스크립트 명령을 설정할 수도 있습니다. 이 예에서는 dev:host라고 부르지만 원하는 대로 이름을 지정할 수 있습니다. 항상 사용하고 싶은 호스트 이름을 추가하거나 '0'을 추가하여 임의의 호스트 이름을 얻을 수 있습니다.

"scripts": {
  "dev:host": "nuxt --hostname '192.168.0.199' --port 8000"
}

즉, 서버를 변경하려는 경우 하나의 명령만 실행하고 localhost에서 실행하려는 경우 일반 dev 명령을 실행하면 됩니다.

npm run dev:host

이제 모바일에서 사이트를 볼 수 있지만 LAN 외부의 누구와도 이 포트를 공유할 수 없습니다. 즉, 원격으로 작업 중이고 진행 중인 작업을 나와 동일한 Wi-Fi 연결을 사용하지 않는 사람과 공유하려는 경우 이 방법이 작동하지 않습니다.

실제 모바일에서 개발하는 동안 사용해 보고 모바일 사용자 경험을 테스트해 보십시오.

See the nuxt docs for more info