[reactjs] create-react-app 기반 프로젝트를 실행하기 위해 포트를 지정하는 방법은 무엇입니까?

Program / 글쓴이

내 프로젝트는 create-react-app 기반입니다 . npm start또는 yarn start기본적으로 포트 3000 에서 응용 프로그램을 실행 하며 package.json에 포트를 지정하는 옵션이 없습니다.

이 경우 원하는 포트를 어떻게 지정합니까? 이 프로젝트 중 두 개를 동시에 테스트하기 위해 포트 하나 3005와 다른 하나는3006

답변

환경 변수 를 설정하지 않으려는 경우 또 다른 옵션은 다음에서 scriptspackage.json 부분 을 수정하는 것 입니다.

"start": "react-scripts start"

에

Linux (우분투 14.04 / 16.04에서 테스트 ) 및 MacOS (MacOS Sierra 10.12.4에서 @ aswin-s에서 테스트) : 

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

또는 @IsaacPak의 더 일반적인 솔루션

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

Windows @JacobEnsor 솔루션

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

cross-env lib 는 모든 곳에서 작동합니다. 자세한 내용은 Aguinaldo Possatto 답변 을 참조하십시오

내 대답의 인기로 인해 업데이트 : 현재 .env파일에 저장된 환경 변수를 사용하는 것을 선호 합니다 ( deploy편의하고 읽을 수있는 형태 로 다른 구성에 대한 변수 세트를 저장하는 데 유용합니다 ). 추가하는 것을 잊지 마십시오 *.env으로 .gitignore당신은 여전히 당신의 비밀을 저장하는 경우 .env파일. 다음 은 환경 변수를 사용하는 것이 가장 좋은 이유에 대한 설명입니다. 다음 은 환경에 비밀을 저장하는 것이 좋지 않은 이유에 대한 설명입니다.

답변

이 작업을 수행하는 다른 방법이 있습니다.

.env프로젝트 루트에 파일을 작성하고 포트 번호를 지정하십시오. 처럼:

PORT=3005

답변

당신이 사용할 수있는 크로스 ENV를 포트를 설정하고, 윈도우, 리눅스 및 Mac에서 작동합니다.

yarn add -D cross-env

그런 다음 package.json에서 시작 링크는 다음과 같습니다.

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

답변

PORT서버가 실행될 포트를 지정하기 위해 명명 된 환경 변수를 지정할 수 있습니다 .

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

답변

내 Windows 사람들은 ReactJS 포트를 원하는 포트에서 실행하도록 변경하는 방법을 발견했습니다. 서버를 실행하기 전에 

 node_modules/react-scripts/scripts/start.js

여기에서 아래 줄을 검색하고 포트 번호를 원하는 포트로 변경하십시오.

 var DEFAULT_PORT = process.env.PORT || *4000*;

그리고 당신은 갈 수 있습니다.

답변

.env기본 디렉토리에 이름 외에 이름 을 가진 파일을 작성하고 variable을 원하는 포트 번호로 package.json설정 PORT하십시오.

예를 들면 다음과 같습니다.

.env

PORT=4200

답변

조금만 업데이트하십시오 webpack.config.js.

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

그런 다음 npm start다시 실행 하십시오.