[React] 실행 포트 변경

ReactJS로 프로젝트를 시작하면, 보통 create-react-app을 사용합니다.

개발을 하고 시작을 하려면 다음과 같은 명령을 실행하게 됩니다.

$ yarn run start

그러면 http://localhost:3000으로 페이지가 열리게 됩니다.

실행포트 변경하기

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

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

따라서 package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정을 추가합니다.

여기서는 Windows환경에서 9090포트로 변경하겠습니다.

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

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

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

출처: https://www.oofbird.me/50