Vue.js 를 배워보자

Vue.js 애플리케이션 포트 설정: 유연하고 효율적인 개발 환경 구축 가이드

_Blue_Sky_ 2024. 12. 10. 20:31
728x90
728x90

 

 

 

vue가 실행될때 포트번호가 어떻게 되는지 어떻게 알수있지?

 

Vue.js 애플리케이션이 실행될 때 사용되는 포트 번호는 기본적으로 8080번 포트이며, 설정이나 환경에 따라 달라질 수 있습니다. 이를 확인하는 방법은 다음과 같습니다.

1. 실행 로그 확인

npm run serve 명령을 실행하면 터미널에 출력된 로그에서 포트 번호를 확인할 수 있습니다. 예를 들어:

 DONE  Compiled successfully in 887ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.10:8080/

위 로그에서 8080번 포트가 사용 중임을 알 수 있습니다.

2. vue.config.js 파일 확인

프로젝트 디렉토리에 vue.config.js 파일이 있다면, 거기에 지정된 포트 번호를 확인할 수 있습니다. 예:

module.exports = {
  devServer: {
    port: 3000, // 이 포트 번호로 서버가 실행됩니다.
  },
};

여기에서 devServer.port 값이 서버가 실행될 포트 번호를 결정합니다.

3. 기본 포트(8080) 충돌 시 포트 변경

기본적으로 Vue CLI는 8080번 포트를 사용하려고 하지만, 해당 포트가 이미 사용 중이라면 다음 사용 가능한 포트(예: 8081, 8082)로 자동 변경됩니다.
자동 변경된 포트 번호는 실행 로그에 표시됩니다.

4. 사용 중인 포트 직접 확인

현재 실행 중인 Vue.js 애플리케이션의 포트를 확인하려면 아래 명령어를 사용해 보세요:

Linux/MacOS:

lsof -i :8080

출력 예:

COMMAND   PID   USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
node      12345 user   21u  IPv4 123456      0t0  TCP *:http-alt (LISTEN)

Windows:

netstat -ano | findstr :8080

5. 포트를 변경하고 싶을 때

포트를 명시적으로 지정하려면 vue.config.js 또는 명령어에 옵션을 추가하세요.

명령어로 포트 지정:

npm run serve -- --port 3000

vue.config.js로 지정:

module.exports = {
  devServer: {
    port: 3000,
  },
};

이 방법들로 포트를 확인하거나 변경할 수 있습니다. 추가로 궁금한 점 있으시면 말씀해 주세요! 😊

 

 

 

728x90

 

 

설정을 하지 않으면 포트번호가 알아서 자동으로 바뀌나?

 

네, 설정을 하지 않으면 포트 번호는 기본적으로 자동으로 할당됩니다.

기본 동작

  • Vue CLI는 기본적으로 8080번 포트를 사용하여 개발 서버를 시작합니다.
  • 만약 8080번 포트가 이미 사용 중이면, Vue CLI는 다음 사용 가능한 포트(예: 8081, 8082 등)를 자동으로 선택하여 서버를 시작합니다.

예시

예를 들어, 이미 8080번 포트를 다른 애플리케이션이 사용하고 있으면, npm run serve 명령을 실행했을 때 터미널에 다음과 같은 메시지가 출력됩니다:

 DONE  Compiled successfully in 887ms

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.10:8081/

이 경우, Vue CLI는 자동으로 8081번 포트를 사용하여 서버를 실행합니다.

포트 충돌이 발생하지 않도록

  • 자동 포트 변경 기능은 포트 충돌을 방지하기 위해 유용하게 작동하지만, 필요에 따라 수동으로 포트를 설정할 수도 있습니다.
  • vue.config.js 파일을 통해 devServer.port 값을 지정하거나, npm run serve -- --port <포트번호> 명령을 사용하여 직접 포트를 설정할 수 있습니다.

결론

설정하지 않으면 Vue CLI가 자동으로 포트를 할당합니다. 다만, 포트가 충돌할 때마다 자동으로 다음 포트를 선택하므로, 계속해서 변경된 포트를 터미널 로그에서 확인할 수 있습니다.

 

 

난 2999 번 포트로 고정해서 서버를 쓰고 싶어

 

현재 vue.config.js 파일에서 포트를 2999번으로 고정하려면, devServer 옵션을 추가하여 포트를 명시적으로 설정할 수 있습니다. 아래와 같이 수정하면 됩니다.

수정 방법

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 2999 // 포트를 2999로 설정
  }
})

설명:

  • devServer 객체 안에 port 속성을 추가하여 개발 서버가 2999번 포트에서 실행되도록 지정합니다.
  • 이렇게 설정하면 npm run serve 명령을 실행할 때, 서버가 항상 **http://localhost:2999/**에서 실행됩니다.

적용 후:

  • 이제 npm run serve를 실행하면 Vue 개발 서버가 2999번 포트에서 실행됩니다. 터미널에서 확인할 수 있는 출력은 다음과 같을 것입니다:
 DONE  Compiled successfully in 887ms

  App running at:
  - Local:   http://localhost:2999/
  - Network: http://192.168.x.x:2999/

이렇게 설정을 완료한 후에는 2999번 포트로 고정되어 서버가 실행될 것입니다.

 

728x90

 

vue.config.js 에서 포트 설정하는 거랑 뭐가 달라 ?

 

vue.config.js 파일에서 포트 설정을 하는 방법과 package.json의 scripts 섹션에서 포트를 설정하는 방법은 결국 같은 목표(서버 포트 설정)를 달성하지만, 사용하는 방법과 적용되는 범위가 다릅니다. 두 방법의 차이점을 아래에 설명드리겠습니다.

1. vue.config.js에서 포트 설정

vue.config.js 파일에서 포트를 설정하면 전역적인 Vue CLI 설정이므로, 프로젝트에서 실행되는 모든 개발 서버에 대해 적용됩니다. 이 설정은 프로젝트 설정 파일에 직접 포함되기 때문에, 다른 개발자가 프로젝트를 클론하거나 설정할 때도 포트가 일관되게 유지됩니다.

예시:

// vue.config.js
module.exports = {
  devServer: {
    port: 3000  // 포트 3000으로 설정
  }
}

장점:

  • 프로젝트 내에서 일관된 설정을 유지할 수 있습니다.
  • 여러 개발자가 같은 프로젝트를 사용할 때 포트 번호 설정이 자동으로 적용되므로, npm run serve를 실행하는 모든 사람에게 동일한 환경을 제공합니다.
  • 상수적으로 포트를 설정하므로, 매번 package.json을 수정할 필요가 없습니다.

단점:

  • 여러 포트 설정이 필요할 때마다 vue.config.js 파일을 수정해야 합니다.
  • 하나의 프로젝트 내에서 여러 포트를 사용해야 할 경우, 수동으로 변경하고 다시 실행해야 할 수 있습니다.

2. package.json의 scripts 섹션에서 포트 설정

package.json의 scripts 섹션에서 npm run serve 명령어에 --port 옵션을 추가하여 포트를 지정하는 방법은 일시적인 설정입니다. 이 방법은 해당 스크립트를 실행할 때만 유효하고, package.json 파일을 수정한 후에 실행된다는 점에서 다양한 포트를 시도할 수 있는 유연성을 제공합니다.

예시:

// package.json
"scripts": {
  "serve": "vue-cli-service serve --port 3000"
}

장점:

  • 동적으로 포트를 변경할 수 있기 때문에, 상황에 맞게 다양한 포트를 사용할 수 있습니다.
  • 특정 스크립트만 실행할 때 유용하게 사용할 수 있습니다. 예를 들어, 포트를 다르게 설정하고 싶을 때 매번 명령어에 옵션을 추가하여 실행할 수 있습니다.

단점:

  • 프로젝트 전체에서 일관되게 설정된 포트를 유지하는 것이 아니므로, 다른 개발자가 실행할 때마다 package.json을 수정하거나 명령어 옵션을 바꿔야 합니다.
  • 스크립트 명령어 수정이 필요하므로, 여러 개발자가 협업할 때 각기 다른 포트를 설정하는 일이 발생할 수 있습니다.

어떤 방법을 사용해야 할까?

  • 일관된 설정을 유지하고 싶을 때: vue.config.js 파일에서 포트를 설정하는 것이 더 나은 선택입니다. 이는 프로젝트 전체에서 포트를 고정시킬 수 있어, 여러 개발자가 작업할 때 일관성 있게 사용할 수 있습니다.
  • 동적으로 포트를 변경하고 싶을 때: package.json의 scripts에서 포트를 설정하는 것이 유리합니다. 예를 들어, 여러 포트를 사용하거나 개발 환경에 따라 포트를 바꾸고 싶을 때 유용합니다.

결론:

  • **vue.config.js**는 프로젝트 전체에 대한 일관된 설정을 제공합니다.
  • **package.json**은 개발자가 특정 스크립트 실행 시에만 유연하게 포트를 설정할 수 있도록 합니다.

이 두 방법은 필요한 상황에 따라 적절히 선택하여 사용하면 됩니다.

 

 

 

 

그럼 vue.config.js 에서 각각 다르게 포트를 설정하면 어떻게 되 ?

 

vue.config.js에서 각각 다른 포트를 설정하려면, 다양한 조건을 사용하여 여러 포트를 지정할 수 있습니다. 예를 들어, 여러 환경(개발, 테스트 등)에서 다른 포트를 사용할 수 있도록 설정할 수 있습니다.

1. 환경에 따라 포트 설정하기

vue.config.js에서 process.env.NODE_ENV 변수를 사용하여 개발 환경이나 배포 환경에 따라 다른 포트를 설정할 수 있습니다. 예를 들어, development 환경에서는 포트를 3000, production 환경에서는 8080으로 설정할 수 있습니다.

module.exports = {
  devServer: {
    port: process.env.NODE_ENV === 'development' ? 3000 : 8080
  }
}

2. 다중 환경에 대한 포트 설정 예시

여러 환경에서 포트를 다르게 설정하려면, 환경별로 .env 파일을 사용하여 환경 변수로 포트를 설정할 수도 있습니다.

1) .env 파일 설정

  • .env.development: 
    VUE_APP_PORT=3000
  • .env.production: 
    VUE_APP_PORT=8080

2) vue.config.js에서 포트 사용하기

module.exports = {
  devServer: {
    port: process.env.VUE_APP_PORT || 8080  // 기본값은 8080
  }
}

이렇게 하면 개발 환경에서는 .env.development 파일의 VUE_APP_PORT 값인 3000번 포트를 사용하고, 프로덕션 환경에서는 .env.production 파일의 VUE_APP_PORT 값인 8080번 포트를 사용하게 됩니다.

3. 프로젝트 내 여러 개의 Vue 앱에서 포트 설정하기

하나의 프로젝트 내에서 여러 Vue 애플리케이션을 실행하려면, 각 애플리케이션에 대해 별도의 vue.config.js 파일을 사용하거나 포트를 다르게 지정해야 합니다. 예를 들어:

예시 1: 하나의 프로젝트에서 여러 Vue 앱을 실행

각각의 서브 프로젝트에 대해 포트를 다르게 설정할 수 있습니다.

  • 앱 A (/appA/vue.config.js):
  • module.exports = { devServer: { port: 3000 // 앱 A는 3000번 포트 } }
  • 앱 B (/appB/vue.config.js):
  • module.exports = { devServer: { port: 3001 // 앱 B는 3001번 포트 } }

이렇게 각 애플리케이션의 vue.config.js 파일에서 포트를 다르게 설정하면, npm run serve 명령어를 각각의 디렉토리에서 실행할 때, 각 애플리케이션은 설정된 포트에서 실행됩니다.

4. 포트 설정 자동화 (프로젝트 내 여러 개의 Vue 앱)

  • 여러 Vue 앱을 각각 다르게 실행하고자 할 때, package.json 스크립트를 활용하여 각기 다른 포트에서 실행되도록 할 수도 있습니다.

예시:

  • 프로젝트 A (/appA/package.json):
  • "scripts": { "serve": "vue-cli-service serve --port 3000" }
  • 프로젝트 B (/appB/package.json):
  • "scripts": { "serve": "vue-cli-service serve --port 3001" }

각각의 프로젝트 디렉토리에서 npm run serve 명령어를 실행하면, 지정된 포트 번호에서 애플리케이션이 실행됩니다.

결론

  • vue.config.js 파일에서 포트를 설정할 때, 환경에 따라 다르게 설정할 수 있고, 여러 애플리케이션을 동일 프로젝트 내에서 실행할 때도 각기 다른 포트를 지정할 수 있습니다.
  • 환경 변수, process.env.NODE_ENV, .env 파일 등을 활용해 유연하게 포트를 관리할 수 있습니다.
  • 여러 개의 Vue 앱을 다르게 실행하려면 각 애플리케이션마다 포트를 다르게 설정하거나, package.json 스크립트에서 직접 지정할 수 있습니다.
728x90
728x90

'Vue.js 를 배워보자' 카테고리의 다른 글

Nuxt.js가 설치되었는지 확인  (1) 2024.12.11
외부 접근시 Invalid Host header 오류 해결 가이드  (0) 2024.12.11
npm run serve 한뒤에 정지를 하려면?  (0) 2024.12.10
Node.js, Nuxt.js, MySQL, 게시판 구현, CRUD, REST API, 프론트엔드, 백엔드, 데이터베이스, 프로그래밍, 웹 개발  (0) 2024.12.08
Nuxt에서 Pinia를 활용한 페이징된 그리드 데이터 바인딩  (0) 2024.11.30

'Vue.js 를 배워보자'의 다른글

  • 현재글Vue.js 애플리케이션 포트 설정: 유연하고 효율적인 개발 환경 구축 가이드

관련글

티스토리툴바