npm run dev 실행할때 port지정하는 방법
npm run dev 실행할때 port지정하는 방법
npm run dev를 실행할 때 포트를 변경하는 방법은 사용 중인 **프레임워크(Vite, Next.js, React 등)**에 따라 조금씩 다릅니다. 상황에 맞는 가장 편한 방법을 선택해 보세요.
1. 명령어 뒤에 직접 입력하기 (일회성)
가장 빠르고 간편한 방법입니다. 명령어 뒤에 –를 붙여서 옵션을 전달합니다.
Vite (비트):
Bash
npm run dev — –port 8080
Next.js:
Bash
npm run dev — -p 8080
Create React App (CRA): (Mac/Linux 기준)
Bash
PORT=8080 npm start
2. package.json 수정하기 (고정 방식)
매번 포트를 입력하기 귀찮다면 scripts 부분을 수정하여 고정할 수 있습니다.
Vite:
JSON
“scripts”: {
“dev”: “vite –port 8080”
}
Next.js:
JSON
“scripts”: {
“dev”: “next dev -p 8080”
}
3. 환경 변수 파일(.env) 사용하기
프로젝트 루트 폴더에 .env 파일을 만들어 설정하는 방식입니다.
Vite: .env 파일에 작성
Plaintext
VITE_PORT=8080
CRA: .env 파일에 작성
Plaintext
PORT=8080
4. 프레임워크 설정 파일 수정 (권장)
프로젝트 설정 파일에 명시적으로 적어두는 것이 협업 시 가장 명확합니다.
Vite (vite.config.js):
JavaScript
export default defineConfig({
server: {
port: 8080,
},
})
[!TIP]
왜 –를 쓰나요?
npm run dev — –port 8080에서 중간의 –는 npm 자체 옵션이 아니라, 그 뒤에 오는 인자들을 실제 실행되는 스크립트(Vite나 Next.js 등)로 그대로 전달하겠다는 의미입니다.