#4 Nuxt.js 호스트 및 포트 변경

 

---

1. Nuxt.js 호스트 및 포트 특징

호스트는 기본적으로 호스트 머신에서만 접근 가능한 localhost 로 설정되어 있습니다.

외부 장치에서 접근하기 위해서는 호스트를 수정해야 합니다.

호스트를 '0.0.0' 이나 '0' 으로 설정 시 로컬 IP 주소가 Nuxt App 호스트에 할당되어 외부에서도 접근할 수 있게 됩니다.

 

포트는 기본적으로 3000번이 할당되지만,

Nuxt App 기동 이전에 이미 3000번 포트가 점유되어 있다면 점유되지 않은 포트 번호를 할당 받습니다.

포트에 문자열 값 '0' 이 할당되면 Nuxt App 에 임의의 포트 번호가 할당됩니다.

 

 

2. Nuxt.js 호스트 및 포트 수정

호스트와 포트 번호를 설정하는 방법에는 세 가지 방법이 있습니다.

각각 방식을 설명 드리겠습니다.

 

1) nuxt.config.js 설정

  // Server setup
  server: {
    host: '0',
    port: '0'
  }

 

다음은 실행 화면입니다.

IP Local IP 주소가 할당되고, 임의의 포트 번호가 할당된 것을 확인할 수 있습니다.

Local IP 주소는 가려놓은 점 양해 부탁드립니다.

 

nuxt.config.js 파일에서 수정할 수 있지만 사이트를 호스팅할 때 문제가 발생할 수 있습니다.

따라서 파일을 직접 수정하는 것은 권장되지 않습니다.

대신 명령어를 통해 호스트와 포트를 직접 설정하는 방식을 대안으로 사용할 수 있습니다.

 

2) 명령어 설정

서버를 기동할 때 명령어를 통해 호스트와 포트 정보를 직접 설정합니다.

HOST=0 PORT=8000 npm run dev

 

3) package.json 설정

매 번 명령어에 호스트와 포트 정보를 입력하는 것도 일입니다.

package.json 에 있는 명령어 설정 자체를 수정할 수 있습니다.

  "scripts": {
    "dev": "nuxt --hostname '0' --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

 

---

본 문서는 Nuxt 공식 문서를 참고하여 작성되었습니다.

https://nuxtjs.org/docs/features/configuration/#edit-host-and-port

Configuration

 

오늘도 행복한 하루 보내세요.

감사합니다.