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

내 프로젝트는 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다시 실행 하십시오.

에서 아래 예와 같이 package.json스크립트로 이동하여 --port 4000또는을 사용 set PORT=4000하십시오.

package.json (Windows) :

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (우분투) :

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

이것은 Windows와 Linux 모두에서 작동합니다

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

그러나 PORT = 3006으로 작성된 .env를 작성하는 것이 좋습니다.

내 package.json 파일을 변경하면 "start": "export PORT=3001 && react-scripts start"나에게도 효과가 있었고 macOS 10.13.4에 있습니다.

요약하면 다음과 같은 세 가지 접근 방식이 있습니다.

1. "PORT"라는 환경 변수를 설정하십시오.
2. package.json의 "scripts"부분에서 "start"키를 수정하십시오.
3. .env 파일을 작성하고 PORT 구성을 파일에 넣으십시오.

가장 휴대하기 쉬운 방법이 마지막 방법입니다. 그러나 다른 포스터에서 언급했듯이 구성을 공개 소스 저장소에 업로드하지 않으려면 .env를 .gitignore에 추가하십시오.

자세한 내용 : 이 기사

앱을 시작할 때 기본 포트 구성을 찾을 수 있습니다

yourapp / scripts / start.js

아래로 스크롤하여 원하는 포트로 변경하십시오

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

이것이 당신을 도울 수 있기를 바랍니다.)

이 시도:

npm start port=30022

3000명령 줄 매개 변수 또는 환경 변수로 이외의 포트를 지정할 수 있으면 좋을 것 입니다.

현재 프로세스는 매우 복잡합니다.

1. 운영 npm run eject
2. 끝날 때까지 기다리세요
3. 사용하려는 포트로 편집 scripts/start.js및 찾기 / 바꾸기3000
4. 편집 config/webpack.config.dev.js하고 똑같이하십시오
5. npm start

Windows에서는 두 가지 방법으로 수행 할 수 있습니다.

1. "\ node_modules \ react-scripts \ scripts \ start.js"아래에서 "DEFAULT_PORT"를 검색하고 원하는 포트 번호를 추가하십시오.

   예 : const DEFAULT_PORT = parseInt (process.env.PORT, 10) || 9999;

2. package.json에서 아래 줄을 입력하십시오. "start": "set PORT = 9999 && react-scripts start"그런 다음 NPM start를 사용하여 응용 프로그램을 시작하십시오. 9999 포트에서 응용 프로그램을 시작합니다.

응용 프로그램 코드 또는 환경 파일에서 아무것도 변경하지 않고 명령을 호출하는 동안 포트 번호를 지정하는 것은 어떻습니까? 그렇게하면 여러 다른 포트에서 동일한 코드베이스를 실행하고 제공 할 수 있습니다.

처럼:

$ export PORT=4000 && npm start

위의 예제 값 대신 원하는 포트 번호를 입력 할 수 있습니다 4000.

이미 완료 한 경우 npm run ejectscripts / start.js로 이동하여 포트를 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;(이 경우 3000) 원하는 포트로 변경하십시오.

React-App에서 기본 포트 변경

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

이 줄로 가십시오 :

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

포트 번호로 포트 번호를 변경하십시오

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

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

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

저장하고 종료