Localhost에서 Create-React-App을 실행할 포트 지정

1. create-react-app 프로젝트 설정
2. Localhost에서 create-react-app를 실행할 포트 지정
3. create-react-app 프로젝트에서 포트 변경
4. cross-env 패키지를 사용하여 create-react-app 프로젝트에서 포트 변경

Facebook은 React를 개발하고 유지 관리하는 조직입니다. 같은 팀이 React 앱을 개발할 수 있는 훌륭한 환경을 제공하는 create-react-app 패키지를 출시했습니다.

이를 통해 웹 팩, 트랜스파일러 및 기타 최신 도구를 설정하는 번거로움 없이 JSX 및 JavaScript 코드 작성에 집중할 수 있습니다. npm을 통해 몇 가지 명령만으로 React 단일 페이지 애플리케이션을 만들 수 있습니다.

create-react-app 프로젝트 설정

개발자는 npm 또는 yarn과 같은 도구를 사용하여 명령을 입력해야 합니다. create-react-app으로 생성된 애플리케이션은 localhost에서 사용할 수 있으며 localhost:3000으로 이동하여 애플리케이션을 미리 볼 수 있습니다.

Localhost에서 create-react-app를 실행할 포트 지정

원격 서버에 상주하지 않고 로컬에서 호스팅되는 응용 프로그램은 컴퓨터에 상주하며 네트워크에 연결되지 않은 장치에서는 액세스할 수 없습니다.

때로는 localhost에서 두 개의 응용 프로그램을 실행해야 하므로 브라우저가 서로 다른 localhost 주소에 서로 다른 응용 프로그램을 표시하는 방법이 필요합니다.

일반적으로 로컬 네트워크의 포트를 사용하여 로컬 호스트의 서로 다른 두 애플리케이션 인스턴스를 구별합니다. 애플리케이션 A는 localhost:3000에서 호스팅될 수 있는 반면 애플리케이션 B는 localhost:3006에서 호스팅될 수 있습니다.

create-react-app 프로젝트를 생성하고 실행하려는 경우 기본적으로 localhost:3000 주소에서 호스팅됩니다. 여기서 3000은 포트입니다. create-react-app 애플리케이션을 시작할 때 npm은 애플리케이션 실행을 위한 포트 지정을 요청하지 않습니다.

기기에서 이미 하나의 React 애플리케이션을 실행 중이고 다른 애플리케이션을 실행하려고 하면 자동으로 다른 포트를 사용하여 호스트하지 않습니다. 대신 해당 포트에서 애플리케이션이 이미 실행 중임을 알리는 오류가 표시됩니다.

따라서 특정 create-react-app 프로젝트가 다른 포트에서 실행되도록 지정하는 방법이 필요할 수 있습니다. 이렇게 하면 두 개의 create-react-app 프로젝트를 동시에 실행할 수 있습니다.

create-react-app 프로젝트에서 포트 변경

애플리케이션의 포트를 변경하려면 프로젝트 디렉토리로 이동하여 package.json 파일을 찾아야 합니다. 프로젝트의 메인 디렉토리에 위치하므로 찾기 어렵지 않습니다.

파일을 열면 npm start와 같이 응용 프로그램을 시작하는 데 사용되는 명령을 제어하는 "scripts" 섹션을 찾습니다.

Windows에서 포트 변경

변경하지 않는 한 이 섹션은 다음과 같이 표시됩니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

그러나 필요한 경우 포트를 지정할 수 있습니다. 이렇게 하려면 "start" 속성 값을 변경해야 합니다.

예를 들어 애플리케이션을 8000 포트에서 실행하려면 다음과 같이 변경할 수 있습니다.

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

보시다시피 처음에 set PORT=8000을 추가하고 && 연산자를 사용하여 이전 값과 연결했습니다.

이것이 Windows에서 create-react-app 프로젝트의 기본 포트를 변경하는 데 필요한 전부입니다. 지금 애플리케이션을 실행하면 브라우저의 localhost:8000 주소에서 열립니다.

Linux/Mac에서 포트 변경

Linux 및 Mac에서는 package.json 파일의 "scripts" 섹션을 다음과 같이 변경하여 기본 localhost 포트를 변경할 수 있습니다.

"start": "PORT=3006 react-scripts start"

Linux 또는 Mac 버전에서 작동하지 않는 경우 다음을 시도할 수 있습니다.

"start": "export PORT=3006 react-scripts start"

cross-env 패키지를 사용하여 create-react-app 프로젝트에서 포트 변경

JavaScript 커뮤니티는 PORT와 같은 환경 변수를 한 곳에서 설정하는 방법을 개발했으며 모든 플랫폼에서 유사하게 실행됩니다.

npm을 dev 종속성으로 사용하여 패키지를 설치해야 합니다. 철자가 맞는지 확인하세요.

npm install --save-dev cross-env

그런 다음 "scripts" 섹션의 "start" 속성을 다음 값으로 변경합니다.

"start": "cross-env PORT=3006 react-scripts start",

현재 패키지는 유지 관리 모드이므로 새로운 기능이 추가되지 않았지만 여전히 작동합니다.