[React] App 기본 실행 포트 설정하기

1. 개요

create-react-app을 통해 만든 React App의 경우 기본으로  3000번 포트를 사용해서 구동된다.

 

그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다.

이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. 

(아래 내용들은 3001 포트로 변경한다고 가정한다.)

 

 

 

2. 포트 변경 방법

2.1 명령어로 포트 설정하기

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

(명령어를 통해 구동 시 한 번만 적용된다.)

PORT=3001 npm start

 

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

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

 

Mac OS, Linux

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

 

윈도우 환경

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

 

 

[설정 스크린샷]

 

2.3 ".env"파일 만들기

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

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

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

PORT=3001

 

 

[설정 스크린샷]

 

3 설정 결과 확인

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

 

위의 방법들로 포트 변경 설정 후 앱을 실행시키면 아래와 같이 해당 포트로 앱이 정상적으로 실행됨을 확인할 수 있다.

 

 

 

 

---

#References

https://7942yongdae.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-App-%EA%B8%B0%EB%B3%B8-%EC%8B%A4%ED%96%89-%ED%8F%AC%ED%8A%B8-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0