[ReactJS] create-react-app의 실행 포트 변경

문제점

ReactJS로 프로젝트를 시작하면, 보통 create-react-app을 사용합니다. 개발을 하고 시작을 하려면 다음과 같은 명령을 실행하게 됩니다.

$ yarn run start

그러면 http://localhost:3000으로 페이지가 열리게 됩니다. 환경에 따라 다른 포트로 실행하고 싶습니다.

해결방법

Start Script 수정하기

실제 start 스크립트를 보면 다음과 같이 포트를 설정하고 있습니다.

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

따라서 package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정을 추가합니다. 여기서는 Windows환경에서 set을 활용하여 9090포트로 변경하겠습니다.

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

Linux의 경우에는 export를 활용하시면 됩니다.

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

Mac의 경우에는 다음과 같습니다.

{
  ...
  "scripts": {
    "start": "PORT=9090 react-scripts start",
    ...
  },
  ...
}

.env 파일 활용하기

다음 방법은 .env 파일을 사용하면 됩니다. 프로젝트 상위 디렉터리에 .env 파일을 생성하고 다음과 같이 입력합니다.

PORT=9090