[localhost] 로컬 서버 포트 변경하기

 

📌 Localhost 3000 변경

- 특정 포트가 필요한 경우

- 여러 프로젝트 진행 시 기본 설정된 3000으로 포트 충돌 

- 이전 사용을 종료한 프로젝트의 프로세스가 백그라운드에 남아

같은 포트의 새로 시작한 프로젝트가 정상적으로 보이지 않는 경우를 대비

 

📍 .env 파일에서 설정 

// .env
PORT=4000

 ✅ 끝 가장 간단한 방법!

 

📍 package.json 파일에서 설정

// ✅ Mac, Linux
"scripts": {
   "start": "export PORT=4000 && react-scripts start",
}

// ✅ window 
"scripts": {
   "start": "set PORT=4000 && npm start",
}

 ✅ 성공적으로 변경

 

📍 cross-env 패키지 사용하기

- 여러 운영체제에서 일관되게 환경 변수를 설정

npm install cross-env --save-dev

"scripts": {
  "start": "cross-env PORT=4000 react-scripts start"
}

 

📍 Vite를 사용하고 있는 프로젝트

- vite 기본 포트 : 5173

🔗 Vite 참고

// ✅ vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 4000,
  }
})

 

 

✍️ 기록

 

감사합니다. 😁