[React] Port 변경 방법

react의 기본 포트 3000를 변경하고자 한다.

▶ 일회성 포트 변경 및 실행

PORT=3002 npm run start

 

▶ 고정 포트 변경

1. package.json 수정

   1-1. Mac, Linux

...
"scripts": {
   "start": "export PORT=3002 && react-scripts start",
}
...

참고 사이트에서는 start에만 했는데, 나는 build도 할꺼라서 그냥 전부 다했다. 참고로 scripts에 electron필드들은 무시하도록(별도로 진행중인 프로젝트 때문에 넣은 것임).

    1-2. Window

...
"scripts": {
   "start": "set PORT=3002 && react-scripts start",
}
...

 

2. 프로젝트명/node_modules/react-scripts/scripts/start.js 수정

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3002;	// 수정
const HOST = process.env.HOST || '0.0.0.0';

node_modules 폴더에는 엄청 많은 폴더가 있으므로, 검색해서 찾는게 빠르다.

 

3. .env 파일 생성 및 port 설정

PORT=3002

다음과 같이 최상위 위치에 .env 파일을 만들어서 작성하면 된다.

 

4. 실행하기

npm run start

3002번 포트로 실행되는 것을 확인할 수 있다.

---

# 참고 사이트: https://developer0809.tistory.com/141