React - 리액트 App 기본 실행 포트 변경하기

Photo by Alex Duffy on Unsplash

 

시작하기

create-react-app을 통해 만든 React App의 경우 3000번 포트를 사용해서 구동될 수 있도록 설정되어 있습니다.

 

일반적인 상황에서는 3000번 포트를 이용해 개발하는 것이 문제 되지 않으나 프로젝트 상황이나 개발 환경에 따라서 포트를 변경해서 사용해야 하는 상황이 발생합니다. 예를 들면 이미 3000번 포트를 다른 프로그램이 사용하고 있거나 다중으로 프로젝트를 실행해야 하는 상황인 경우 기본으로 사용하는 포트를 변경해서 사용해야 합니다.

 

이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법으로는 아래와 같이 3가지 정도로 이야기해 볼 수 있습니다.

 

1. 명령어로 포트 설정하기

1. React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다.

* 명령어를 통해 구동 시 한 번만 적용됩니다.

PORT=3001 npm start

 

2. package.json 파일 설정 수정하기

1. React 프로젝트 폴더에 ".package.json" 파일을 찾아 아래와 같이 수정한다.

2. React 앱을 실행시킨다. ex) npm start

 

Mac OS, 리눅스 환경

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

 

윈도우 환경

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

 

3. ".env" 파일 만들기

1. React 프로젝트 폴더에 ".env" 파일 만든다.

2. ".env" 파일에 아래와 같이 "PORT=사용할포트" 형식으로 값을 입력한 후 저장한다.

3. React 앱을 실행시킨다. ex) npm start

PORT=3001